From 238295888ca2adbcbd5dc83955f3d75f63630d9a Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Thu, 27 Feb 2025 18:15:51 +0600
Subject: [PATCH] web/DonateOptionsCard: faster scrolling, hover state for
 custom value

---
 web/src/components/donate/DonateOptionsCard.svelte | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/src/components/donate/DonateOptionsCard.svelte b/web/src/components/donate/DonateOptionsCard.svelte
index 727d2495..90e1c749 100644
--- a/web/src/components/donate/DonateOptionsCard.svelte
+++ b/web/src/components/donate/DonateOptionsCard.svelte
@@ -85,7 +85,7 @@
     const scroll = (direction: "left" | "right") => {
         const currentPos = donateList.scrollLeft;
         const maxPos = donateList.scrollWidth - donateList.getBoundingClientRect().width;
-        const newPos = direction === "left" ? currentPos - 150 : currentPos + 150;
+        const newPos = direction === "left" ? currentPos - 250 : currentPos + 250;
 
         donateList.scroll({
             left: newPos,
@@ -285,10 +285,17 @@
         width: 100%;
         border-radius: 12px;
         color: var(--white);
-        background-color: rgba(255, 255, 255, 0.1);
+        background: rgba(255, 255, 255, 0.05);
         display: flex;
         align-items: center;
         gap: 4px;
+
+    }
+
+    @media (hover: hover) {
+        #input-container:hover {
+            background: rgba(255, 255, 255, 0.1);
+        }
     }
 
     #input-dollar-sign {
@@ -336,7 +343,6 @@
 
     #donation-custom-submit {
         color: var(--white);
-        background-color: rgba(255, 255, 255, 0.1);
         aspect-ratio: 1/1;
         padding: 0px 10px;
     }