From bfdd433a5f3b4c1d00979778e36e1207312be78e Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 21 Jun 2025 14:32:23 +0200
Subject: [PATCH] Added dark mode ui for leaflet controls

---
 public/icon/question-mark-dark.svg            |  1 +
 public/icon/ruler-dark.svg                    |  1 +
 public/icon/ruler.svg                         |  1 +
 public/icon/square-arrow-out-dark.svg         |  1 +
 src/assets/scss/_leaflet.scss                 | 44 +++++++++++++++++++
 src/assets/scss/radix/_dialog.scss            |  9 ----
 src/assets/scss/theme.scss                    | 10 ++++-
 src/components/maps/MarkerContent.astro       |  4 +-
 .../maps/overlay/SearchMapSwitch.vue          |  2 +-
 9 files changed, 59 insertions(+), 14 deletions(-)
 create mode 100644 public/icon/question-mark-dark.svg
 create mode 100644 public/icon/ruler-dark.svg
 create mode 100644 public/icon/ruler.svg
 create mode 100644 public/icon/square-arrow-out-dark.svg

diff --git a/public/icon/question-mark-dark.svg b/public/icon/question-mark-dark.svg
new file mode 100644
index 00000000..6c906002
--- /dev/null
+++ b/public/icon/question-mark-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="#FFF"><path d="M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path></svg>
\ No newline at end of file
diff --git a/public/icon/ruler-dark.svg b/public/icon/ruler-dark.svg
new file mode 100644
index 00000000..cb6b6aae
--- /dev/null
+++ b/public/icon/ruler-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#FFF" viewBox="0 0 256 256"><path d="M235.32,73.37,182.63,20.69a16,16,0,0,0-22.63,0L20.68,160a16,16,0,0,0,0,22.63l52.69,52.68a16,16,0,0,0,22.63,0L235.32,96A16,16,0,0,0,235.32,73.37ZM84.68,224,32,171.31l32-32,26.34,26.35a8,8,0,0,0,11.32-11.32L75.31,128,96,107.31l26.34,26.35a8,8,0,0,0,11.32-11.32L107.31,96,128,75.31l26.34,26.35a8,8,0,0,0,11.32-11.32L139.31,64l32-32L224,84.69Z"></path></svg>
diff --git a/public/icon/ruler.svg b/public/icon/ruler.svg
new file mode 100644
index 00000000..17ea1152
--- /dev/null
+++ b/public/icon/ruler.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#020617" viewBox="0 0 256 256"><path d="M235.32,73.37,182.63,20.69a16,16,0,0,0-22.63,0L20.68,160a16,16,0,0,0,0,22.63l52.69,52.68a16,16,0,0,0,22.63,0L235.32,96A16,16,0,0,0,235.32,73.37ZM84.68,224,32,171.31l32-32,26.34,26.35a8,8,0,0,0,11.32-11.32L75.31,128,96,107.31l26.34,26.35a8,8,0,0,0,11.32-11.32L107.31,96,128,75.31l26.34,26.35a8,8,0,0,0,11.32-11.32L139.31,64l32-32L224,84.69Z"></path></svg>
diff --git a/public/icon/square-arrow-out-dark.svg b/public/icon/square-arrow-out-dark.svg
new file mode 100644
index 00000000..7110a978
--- /dev/null
+++ b/public/icon/square-arrow-out-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M224,104a8,8,0,0,1-13.66,5.66L184,83.31l-42.34,42.35a8,8,0,0,1-11.32-11.32L172.69,72,146.34,45.66A8,8,0,0,1,152,32h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z" fill="#FFF" /></svg>
\ No newline at end of file
diff --git a/src/assets/scss/_leaflet.scss b/src/assets/scss/_leaflet.scss
index d8b83da6..a6c84ff5 100644
--- a/src/assets/scss/_leaflet.scss
+++ b/src/assets/scss/_leaflet.scss
@@ -50,3 +50,47 @@
         }
     }
 }
+
+.leaflet-touch .leaflet-bar {
+    border-color: var(--border);
+
+    .leaflet-control-zoom-in,
+    .leaflet-control-zoom-out {
+        color: var(--foreground);
+        background-color: var(--background);
+        border-color: var(--border);
+
+        &:hover,
+        &:focus-visible {
+            color: var(--background);
+            background-color: var(--accent);
+        }
+    }
+}
+
+.leaflet-touch .leaflet-control-measure {
+    color: var(--foreground);
+    background-color: var(--background);
+
+    .leaflet-control-measure-toggle {
+        color: var(--foreground);
+        background-color: var(--background);
+        border-color: var(--border);
+        background-image: url('/icon/ruler.svg');
+        background-size: 66%;
+
+        &:hover,
+        &:focus-visible {
+            color: var(--background);
+            background-color: var(--accent);
+        }
+    }
+}
+
+.dark {
+    .leaflet-touch .leaflet-control-measure {
+        .leaflet-control-measure-toggle {
+            background-image: url('/icon/ruler-dark.svg');
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/assets/scss/radix/_dialog.scss b/src/assets/scss/radix/_dialog.scss
index eeca8e29..72685cef 100644
--- a/src/assets/scss/radix/_dialog.scss
+++ b/src/assets/scss/radix/_dialog.scss
@@ -64,18 +64,9 @@
             text-decoration: none;
             color: var(--green-500);
         }
-
-        &::after {
-            top: 50%;
-            transform: translateY(-70%);
-        }
     }
 }
 
-.dark .dialog-description a::after {
-    filter: invert(1);
-}
-
 @keyframes show-overlay {
     from {
         opacity: 0;
diff --git a/src/assets/scss/theme.scss b/src/assets/scss/theme.scss
index 8cb7f756..6daabb57 100644
--- a/src/assets/scss/theme.scss
+++ b/src/assets/scss/theme.scss
@@ -59,11 +59,11 @@ html {
 }
 
 a[href^='http'] {
-    padding-right: 1.25em;
+    white-space: nowrap;
+    orphans: 2;
 }
 
 a[href^='http']::after {
-    position: absolute;
     content: url('/icon/square-arrow-out.svg');
     display: inline-block;
     width: 1em;
@@ -71,6 +71,12 @@ a[href^='http']::after {
     margin-left: .25em;
 }
 
+.dark {
+    a[href^='http']::after {
+        content: url('/icon/square-arrow-out-dark.svg');
+    }
+}
+
 strong {
     font-weight: 600;
 }
diff --git a/src/components/maps/MarkerContent.astro b/src/components/maps/MarkerContent.astro
index fe497db0..cb6b3e28 100644
--- a/src/components/maps/MarkerContent.astro
+++ b/src/components/maps/MarkerContent.astro
@@ -101,7 +101,7 @@ const seeMapText = t('maps.go-to-map', lang)
             font-weight: 600;
             bottom: .5rem;
             right: 1rem;
-            color: var(--background);
+            color: var(--white);
             z-index: 20;
             opacity: .6;
             transition-property: opacity;
@@ -110,7 +110,7 @@ const seeMapText = t('maps.go-to-map', lang)
 
             a {
                 padding-right: 0;
-                color: var(--background);
+                color: var(--white);
                 text-decoration: underline;
                 text-underline-offset: .15rem;
 
diff --git a/src/components/maps/overlay/SearchMapSwitch.vue b/src/components/maps/overlay/SearchMapSwitch.vue
index 5179ad0d..5996fe21 100644
--- a/src/components/maps/overlay/SearchMapSwitch.vue
+++ b/src/components/maps/overlay/SearchMapSwitch.vue
@@ -214,7 +214,7 @@ const menus: Menu[] = [
 }
 
 .dark .legal::before {
-    filter: invert(1);
+    content: url('/icon/question-mark-dark.svg');
 }
 
 .map-menu {