From ee979b213c8698856f7a7f23634328270521dcd6 Mon Sep 17 00:00:00 2001
From: btahir89 <bilal.tahir89@gmail.com>
Date: Sat, 23 Nov 2024 23:22:51 -0800
Subject: [PATCH] add hover effect on icons

---
 components/SoundEffectsControls.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/SoundEffectsControls.tsx b/components/SoundEffectsControls.tsx
index 5e3d6c8..bd5d9c0 100644
--- a/components/SoundEffectsControls.tsx
+++ b/components/SoundEffectsControls.tsx
@@ -140,11 +140,11 @@ const SoundEffectsControls: React.FC<SoundEffectsControlsProps> = ({
             <button
               onClick={() => toggleEffect(effect.id)}
               disabled={isLoading}
-              className={`rounded-[var(--lofi-button-radius)] p-1.5 shadow-[var(--lofi-card-shadow)] transition-colors focus:outline-none ${
+              className={`rounded-[var(--lofi-button-radius)] p-1.5 shadow-lg transition-all hover:translate-y-[-1px] hover:shadow-xl focus:outline-none active:translate-y-[1px] ${
                 isLoading
                   ? 'opacity-50'
                   : isActive
-                  ? 'bg-[var(--lofi-accent)] text-white'
+                  ? 'bg-[var(--lofi-accent)] text-white shadow-[var(--lofi-accent)]/20'
                   : 'bg-[var(--lofi-button-bg)] text-[var(--lofi-button-text)] hover:bg-[var(--lofi-button-hover)]'
               }`}
             >
@@ -165,7 +165,7 @@ const SoundEffectsControls: React.FC<SoundEffectsControlsProps> = ({
             {effect.isCustom && (
               <button
                 onClick={() => handleDeleteEffect(effect.id)}
-                className="rounded-md bg-[var(--lofi-button-bg)] p-1 text-[var(--lofi-button-text)] hover:bg-[var(--lofi-button-hover)] focus:outline-none"
+                className="rounded-md bg-[var(--lofi-button-bg)] p-1 text-[var(--lofi-button-text)] shadow-lg transition-all hover:translate-y-[-1px] hover:bg-[var(--lofi-button-hover)] hover:shadow-xl focus:outline-none active:translate-y-[1px]"
               >
                 <X size={14} />
               </button>