From 26c06a269706eb3f0fafc126786b807ed1aa7c01 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Wed, 10 Jul 2024 11:42:26 +0200
Subject: [PATCH] UX: when using a white background icon, a dark outline gets
 used instead

---
 public/css/index-tailwind-output.css | 5 +++++
 src/UI/Map/DynamicIcon.svelte        | 4 ++++
 src/index.css                        | 5 +++++
 3 files changed, 14 insertions(+)

diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index ecb93e65a..43cb20594 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -4891,6 +4891,11 @@ a.link-underline {
   animation: glowing-drop-shadow 1s ease-in-out infinite alternate;
 }
 
+.selected .light-icon svg:not(.noselect *) path.selectable {
+  stroke: #4a4a4a !important;
+  stroke-width: 10px !important;
+}
+
 .selected svg {
   /* A marker on the map gets the 'selected' class when it's properties are displayed
     */
diff --git a/src/UI/Map/DynamicIcon.svelte b/src/UI/Map/DynamicIcon.svelte
index e1987a26c..dcc5a0efc 100644
--- a/src/UI/Map/DynamicIcon.svelte
+++ b/src/UI/Map/DynamicIcon.svelte
@@ -24,6 +24,10 @@
 
 {#if iconItem?.startsWith("<")}
   {@html iconItem}
+{:else if color === "white"}
+  <span class="light-icon">
+    <Icon icon={iconItem} {color} {emojiHeight} />
+  </span>
 {:else}
   <Icon icon={iconItem} {color} {emojiHeight} />
 {/if}
diff --git a/src/index.css b/src/index.css
index db06e1556..e01331df8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -531,6 +531,11 @@ a.link-underline {
   animation: glowing-drop-shadow 1s ease-in-out infinite alternate;
 }
 
+.selected .light-icon svg:not(.noselect *) path.selectable {
+    stroke: #4a4a4a !important;
+    stroke-width: 10px !important;
+}
+
 .selected svg {
   /* A marker on the map gets the 'selected' class when it's properties are displayed
     */