From 7411f358d23df7c1e26d257f1a044083f08234a2 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sat, 27 Jul 2024 15:03:37 +0600
Subject: [PATCH] web/DialogButtons: move elevated button styling to layout

---
 .../components/dialog/DialogButtons.svelte    | 20 +------------------
 web/src/routes/+layout.svelte                 | 16 +++++++++++++++
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/web/src/components/dialog/DialogButtons.svelte b/web/src/components/dialog/DialogButtons.svelte
index 3b9943e1..082d20e0 100644
--- a/web/src/components/dialog/DialogButtons.svelte
+++ b/web/src/components/dialog/DialogButtons.svelte
@@ -8,7 +8,7 @@
 <div class="popup-buttons">
     {#each buttons as button}
         <button
-            class="button popup-button {button.color}"
+            class="button elevated popup-button {button.color}"
             class:color={button.color}
             class:active={button.main}
             on:click={async () => {
@@ -41,22 +41,4 @@
         background-color: var(--red);
         color: var(--white);
     }
-
-    .popup-button:not(.active) {
-        background-color: var(--button-elevated);
-    }
-
-    .popup-button:not(.active):active {
-        background-color: var(--button-elevated-hover);
-    }
-
-    .popup-button:not(:focus-visible) {
-        box-shadow: none;
-    }
-
-    @media (hover: hover) {
-        .popup-button:not(.active):hover {
-            background-color: var(--button-elevated-hover);
-        }
-    }
 </style>
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 4e21beac..adf439d4 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -333,6 +333,18 @@
         background-color: var(--button-hover);
     }
 
+    :global(.button.elevated) {
+        background-color: var(--button-elevated);
+    }
+
+    :global(.button.elevated:active) {
+        background-color: var(--button-elevated-hover);
+    }
+
+    :global(.button.elevated:not(:focus-visible)) {
+        box-shadow: none;
+    }
+
     :global(.button.active) {
         color: var(--primary);
         background-color: var(--secondary);
@@ -353,6 +365,10 @@
         :global(button:hover) {
             background-color: var(--button-hover);
         }
+    
+        :global(.button.elevated:hover) {
+            background-color: var(--button-elevated-hover);
+        }
 
         :global(.button.active:not(.color):hover) {
             background-color: var(--button-active-hover);