From ac73056128298039d8aa9fbcbbbc24ed5b1423a4 Mon Sep 17 00:00:00 2001
From: sethburkart123 <seth.burkart@hills.adventist.edu.au>
Date: Fri, 6 Sep 2024 17:32:30 +1000
Subject: [PATCH] refactor(settings): improve shortcuts button

---
 .../pages/settings/shortcuts.svelte           | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/svelte-interface/pages/settings/shortcuts.svelte b/src/svelte-interface/pages/settings/shortcuts.svelte
index 8bcb9934..25110548 100644
--- a/src/svelte-interface/pages/settings/shortcuts.svelte
+++ b/src/svelte-interface/pages/settings/shortcuts.svelte
@@ -104,10 +104,28 @@
       transition={springTransition}
     >
       <button
-        class="w-full px-4 py-2 mb-4 text-white transition rounded-xl bg-zinc-700/50"
+        class="w-full px-4 py-2 mb-4 text-[13px] text-white transition rounded-xl bg-zinc-700/50"
         onclick={isFormVisible ? addNewCustomShortcut : toggleForm}
       >
-        {isFormVisible ? 'Add' : 'Add Custom Shortcut'}
+        {#if isFormVisible}
+          <MotionDiv
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.7 }}
+          >
+            Add
+          </MotionDiv>
+        {:else}
+          <MotionDiv
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.3 }}
+          >
+            Add Custom Shortcut
+          </MotionDiv>
+        {/if}
       </button>
     </MotionDiv>
   </div>