Fix pattern for toggling footer light/dark

frequency-chain · Nov 8, 2024 · dedf86e · dedf86e
1 parent a77a922
commit dedf86e
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/src/lib/atoms/IconButton.svelte b/src/lib/atoms/IconButton.svelte
@@ -7,27 +7,28 @@
   export let type: 'light' | 'dark' = 'light';
 
   let iconBgColor = {
-    light: 'navy',
-    dark: 'white',
+    light: 'bg-navy',
+    dark: 'bg-white',
   }[type];
 
   let iconFgColor = {
-    light: 'white',
-    dark: 'black',
+    light: 'text-white',
+    dark: 'text-black',
   }[type];
 </script>
 
 <a
   aria-label={label}
   class={cn(
-    `flex h-f32 w-f32 items-center justify-center bg-${iconBgColor} p-1 transition-colors duration-[0.3s] hover:bg-teal`,
+    'flex h-f32 w-f32 items-center justify-center p-1 transition-colors duration-[0.3s] hover:bg-teal',
     isRound ? 'rounded-full' : 'rounded',
+    iconBgColor,
     $$restProps.class
   )}
   {href}
   target="_blank"
 >
-  <div class="h-auto w-full text-{iconFgColor}">
+  <div class="h-auto w-full {iconFgColor}">
     <slot />
   </div>
 </a>
diff --git a/src/lib/features/Footer.svelte b/src/lib/features/Footer.svelte
@@ -6,25 +6,31 @@
   export let privacyHref: string = '/privacy';
   export let type: 'light' | 'dark' = 'light';
 
-  let fgColor = {
-    dark: 'white',
-    light: 'black',
+  let fgColorText = {
+    dark: 'text-white',
+    light: 'text-black',
+  }[type];
+  let fgColorBg = {
+    dark: 'bg-white',
+    light: 'bg-black',
   }[type];
 </script>
 
 <footer
   class={cn(
-    `sm md:md flex flex-col items-center gap-f16 border-t-[2px] border-current text-${fgColor} mx-auto my-0 max-w-screen-xl py-f48 md:gap-f48`
+    'sm md:md mx-auto my-0 flex max-w-screen-xl flex-col items-center gap-f16 border-t-[2px] border-current py-f48 md:gap-f48',
+    fgColorText,
+    $$restProps.class
   )}
 >
   <FrequencyLogo class="w-[146px] md:w-[257px]" />
   <aside class="flex flex-col items-center space-y-4 leading-none md:flex-row md:space-x-4 md:space-y-0">
     <div>
-      © {new Date().getFullYear()} Frequency Network Foundation. <span class="md:hidden">All Right Reserved</span>
+      © {new Date().getFullYear()} Frequency Network Foundation <span class="md:hidden">All Rights Reserved</span>
     </div>
-    <div class={cn(`hidden w-[2px] self-stretch md:block bg-${fgColor}`)}></div>
-    <div class="hidden md:block">All Right Reserved</div>
-    <div class={cn(`hidden w-[2px] self-stretch md:block bg-${fgColor}`)}></div>
+    <div class="hidden w-[2px] self-stretch md:block {fgColorBg}"></div>
+    <div class="hidden md:block">All Rights Reserved</div>
+    <div class="hidden w-[2px] self-stretch md:block {fgColorBg}"></div>
     <div>
       <a href={privacyHref} class="underline transition duration-[0.3s] hover:text-teal">Privacy Policy</a>
     </div>