feat: add button color transition (#105)

iotaledger · Apr 16, 2024 · 99f972c · 99f972c
1 parent 3c7c76b
commit 99f972c
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 20 deletions.
diff --git a/src/lib/components/atoms/buttons/button.svelte b/src/lib/components/atoms/buttons/button.svelte
@@ -59,7 +59,7 @@
 <svelte:element
     this={href ? 'a' : 'button'}
     role={href ? 'link' : 'button'}
-    class="whitespace-pre-line {textClasses} {colorClasses} {iconClasses} {FONT_FAMILY_CLASS.primary}"
+    class="whitespace-pre-line transition-colors {textClasses} {colorClasses} {iconClasses} {FONT_FAMILY_CLASS.primary}"
     {disabled}
     href={href || null}
     target={href && isExternal ? '_blank' : null}

diff --git a/src/lib/components/organisms/menu/menu.svelte b/src/lib/components/organisms/menu/menu.svelte
@@ -25,10 +25,6 @@
      */
     export let isMobileMenuOpen: boolean = false
 
-    function getActiveIndexSetter(index: number): () => void {
-        return () => (activeIndex = index)
-    }
-
     function toggleMobileMenu(): void {
         isMobileMenuOpen = !isMobileMenuOpen
     }
@@ -52,13 +48,7 @@
         </a>
         <desktop-menu-items class="hidden md:flex flex-row items-center space-x-4">
             {#each menuItems as menuItem, index}
-                {@const handleOnClick = getActiveIndexSetter(index)}
-                <MenuItem
-                    {...menuItem}
-                    {darkmode}
-                    isActive={activeIndex === index}
-                    on:click={handleOnClick}
-                />
+                <MenuItem {...menuItem} {darkmode} isActive={activeIndex === index} />
             {/each}
         </desktop-menu-items>
         <button
@@ -76,14 +66,7 @@
     >
         <menu-items class="flex flex-col items-start justify-start space-y-8 py-[60px] px-6">
             {#each menuItems as menuItem, index}
-                {@const handleOnClick = getActiveIndexSetter(index)}
-                <MenuItem
-                    {...menuItem}
-                    {darkmode}
-                    isActive={activeIndex === index}
-                    on:click={handleOnClick}
-                    mobile
-                />
+                <MenuItem {...menuItem} {darkmode} isActive={activeIndex === index} mobile />
             {/each}
         </menu-items>
     </aside>