From 8193e8c14d9b54c07ca8a7fe972275d8281a89a2 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sat, 20 Jul 2024 18:54:12 +0600
Subject: [PATCH] web/buttons: add hover state to active button

---
 web/src/components/buttons/Switcher.svelte |  4 ++++
 web/src/routes/+layout.svelte              | 10 ++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/web/src/components/buttons/Switcher.svelte b/web/src/components/buttons/Switcher.svelte
index 99bb740b..e7b3c0de 100644
--- a/web/src/components/buttons/Switcher.svelte
+++ b/web/src/components/buttons/Switcher.svelte
@@ -49,6 +49,10 @@
         padding: var(--switcher-padding);
     }
 
+    .switcher :global(.button.active) {
+        pointer-events: none;
+    }
+
     .switcher.big :global(.button) {
         width: 100%;
         /* [base button height] - ([switcher padding] * [padding factor to accommodate for]) */
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 5348e66a..ea612eb6 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -65,6 +65,7 @@
 
         --button: #f4f4f4;
         --button-hover: #e8e8e8;
+        --button-active-hover: #2a2a2a;
         --button-hover-transparent: rgba(0, 0, 0, 0.06);
         --button-stroke: rgba(0, 0, 0, 0.06);
         --button-text: #282828;
@@ -119,6 +120,7 @@
 
         --button: #191919;
         --button-hover: #2a2a2a;
+        --button-active-hover: #f9f9f9;
         --button-hover-transparent: rgba(225, 225, 225, 0.1);
         --button-stroke: rgba(255, 255, 255, 0.05);
         --button-text: #e1e1e1;
@@ -267,21 +269,25 @@
     }
 
     :global(.button.active) {
-        background: var(--secondary);
         color: var(--primary);
+        background-color: var(--secondary);
     }
 
     /* important is used because active class is toggled by state */
     /* and added to the end of the list, taking priority */
     :global(.active:focus-visible) {
-        background: var(--blue) !important;
         color: var(--sidebar-highlight) !important;
+        background-color: var(--blue) !important;
     }
 
     @media (hover: hover) {
         :global(button:hover) {
             background-color: var(--button-hover);
         }
+
+        :global(.button.active:hover) {
+            background-color: var(--button-active-hover);
+        }
     }
 
     :global(.center-column-container) {