From e62c4a660038adf93647ffb73050d57745a4950e Mon Sep 17 00:00:00 2001
From: Mumbi Francis <kinya.francis.mumbi@gmail.com>
Date: Wed, 24 Jan 2024 14:24:44 +0300
Subject: [PATCH] Standardize map buttons

---
 lib/vue/src/components/map/CMap.vue           | 22 ++++++++++++++++++-
 .../variables/18182031_webapp_variable.scss   |  3 +++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/lib/vue/src/components/map/CMap.vue b/lib/vue/src/components/map/CMap.vue
index 8b68d4918..bdb1c3db9 100644
--- a/lib/vue/src/components/map/CMap.vue
+++ b/lib/vue/src/components/map/CMap.vue
@@ -87,7 +87,6 @@
         >
           <font-awesome-icon
             :icon="['fas', 'location-arrow']"
-            class="text-primary"
           />
         </a>
       </l-control>
@@ -294,6 +293,27 @@ export default {
 }
 </script>
 
+<style lang="scss">
+.leaflet-touch .leaflet-bar {
+  border: 1px solid transparent;
+  border-radius: 0.3rem;
+}
+
+.leaflet-bar a {
+  background-color: var(--primary);
+  color: var(--white);
+
+  &:hover {
+    background-color: var(--primary-dark);
+    transition: background-color 0.15s ease;
+  }
+}
+
+[data-color-mode="dark"] .leaflet-bar a {
+  color: var(--black);
+}
+</style>
+
 <style scoped>
 .geosearch-container {
   position: absolute;
diff --git a/server/assets/src/scss/variables/18182031_webapp_variable.scss b/server/assets/src/scss/variables/18182031_webapp_variable.scss
index 38dec4a1d..8b36f9f37 100644
--- a/server/assets/src/scss/variables/18182031_webapp_variable.scss
+++ b/server/assets/src/scss/variables/18182031_webapp_variable.scss
@@ -38,6 +38,8 @@ $gray-700: if(lightness($black) < lightness($white), mix($black, $white, 70%), m
 $gray-800: if(lightness($black) < lightness($white), mix($black, $white, 80%), mix($white, $black, 80%));
 $gray-900: if(lightness($black) < lightness($white), mix($black, $white, 90%), mix($white, $black, 90%));
 
+$primary-dark:   darken($primary, 7.5%) !default;
+
 $yiq-contrasted-threshold: 45; // Our magic number, we can pretend its 42..
 $yiq-text-dark:             $black !default;
 $yiq-text-light:            $white !default;
@@ -48,6 +50,7 @@ $theme-colors: map-merge(
     "white": $white,
     "black": $black,
     "extra-light": $extra-light,
+    "primary-dark": $primary-dark,
   ),
   $theme-colors
 );