From 2e48affd69f4b04a6c0a1540ff24820bab3c750a Mon Sep 17 00:00:00 2001
From: Claire Olmstead <olmsteadclaire@gmail.com>
Date: Thu, 7 Nov 2024 15:57:44 -0800
Subject: [PATCH] update button, update header, add newake font option in
 tailwind

Don't commit Newake, but still use it if it is available. Fallback to Arial Black
---
 src/lib/atoms/Button.svelte            |  8 ++++----
 src/lib/features/Header.stories.svelte |  4 ++--
 src/lib/features/Header.svelte         | 23 ++++++++++++++---------
 src/lib/features/NavMenu.svelte        | 19 +++++++++++--------
 src/lib/features/NavMenuMobile.svelte  |  8 ++++----
 src/lib/styles/index.css               |  1 +
 tailwind.config.ts                     |  3 ++-
 7 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/src/lib/atoms/Button.svelte b/src/lib/atoms/Button.svelte
index c086270..bf750a5 100644
--- a/src/lib/atoms/Button.svelte
+++ b/src/lib/atoms/Button.svelte
@@ -40,7 +40,7 @@
       md: 'w-[339px]',
       lg: 'w-[388px]',
       normal: 'w-[263px]',
-      auto: '',
+      auto: 'w-auto',
       full: 'w-full',
     }[size] || 'w-[263px]';
 </script>
@@ -50,10 +50,10 @@
   <a {...$$restProps} {href} class={disabled ? 'pointer-events-none' : 'pointer-events-auto'}>
     <button
       {...$$restProps}
-      class={`rounded-full p-f8 text-center transition-all ${btnStylesClass} ${btnSizeClass} ${$$restProps.class ?? ''}`}
+      class={`rounded-full px-f24 py-f8 text-center transition-all ${btnStylesClass} ${btnSizeClass} ${$$restProps.class ?? ''}`}
       {disabled}
     >
-      <Typography bold={true} class="flex items-center justify-center gap-f8">
+      <Typography bold={true} class="flex items-center justify-center gap-f8 font-sans">
         <slot />
       </Typography>
     </button>
@@ -65,7 +65,7 @@
     class={`rounded-full p-f8 text-center transition-all ${btnStylesClass} ${btnSizeClass} ${$$restProps.class ?? ''}`}
     {disabled}
   >
-    <Typography bold={true} class="flex items-center justify-center gap-f8">
+    <Typography bold={true} class="flex items-center justify-center gap-f8 font-sans">
       <slot />
     </Typography>
   </button>
diff --git a/src/lib/features/Header.stories.svelte b/src/lib/features/Header.stories.svelte
index 1985b61..64c45c3 100644
--- a/src/lib/features/Header.stories.svelte
+++ b/src/lib/features/Header.stories.svelte
@@ -16,6 +16,6 @@
 <Meta title="UI Components/Features/Header" component={Header} />
 
 <!--Primary-->
-<Story name="Header - Frequency Logo">
-  <Header {menuItems} />
+<Story name="Header">
+  <Header {menuItems} class="fixed left-0 top-0 w-full" />
 </Story>
diff --git a/src/lib/features/Header.svelte b/src/lib/features/Header.svelte
index f6e8607..1d2e078 100644
--- a/src/lib/features/Header.svelte
+++ b/src/lib/features/Header.svelte
@@ -7,16 +7,21 @@
   export let menuItems: MenuItem[] = [];
 </script>
 
-<div class={`flex h-[80px] justify-between p-f16 md:p-0 ${$$restProps.class}`}>
-  <!-- For Desktop -->
-  <div class="flex w-[146px] items-center text-teal md:w-[200px]">
-    <FrequencyLogo />
-  </div>
+<div class={`header-shadow font-title flex h-[85px] w-[100vw] items-center justify-center ${$$restProps.class}`}>
+  <div class="flex w-full max-w-screen-xl items-center justify-between sm:px-f20 md:px-f32 lg:pt-f24">
+    <!-- For Desktop -->
+    <div class="flex w-[146px] items-center text-teal md:w-[200px]">
+      <FrequencyLogo />
+    </div>
 
-  <div class="hidden items-stretch lg:flex">
     <NavMenu {menuItems} />
+    <!-- For Mobile -->
+    <NavMenuMobile {menuItems} />
   </div>
-
-  <!-- For Mobile -->
-  <NavMenuMobile {menuItems} />
 </div>
+
+<style>
+  .header-shadow {
+    box-shadow: 0 4px 4px 0 #00000040;
+  }
+</style>
diff --git a/src/lib/features/NavMenu.svelte b/src/lib/features/NavMenu.svelte
index 533544b..52490df 100644
--- a/src/lib/features/NavMenu.svelte
+++ b/src/lib/features/NavMenu.svelte
@@ -43,21 +43,24 @@
   });
 </script>
 
-<nav class="flex items-stretch gap-f40">
+<nav class="hidden items-center gap-f40 lg:flex">
   {#each menuItems as item}
     {#if item.isButton}
-      <div class="content-center">
-        <Button class="px-6">
-          <a href={item.href} target={item.isExternal ? '_blank' : '_self'}>{`${item.label}`}</a>
-        </Button>
-      </div>
+      <Button
+        size="auto"
+        class="shadow-[0_4px_4px_0_#00000040] lg:mt-[-16px]"
+        href={item.href}
+        target={item.isExternal ? '_blank' : '_self'}
+      >
+        {item.label}
+      </Button>
     {:else}
       <a
         href={item.href}
         target={item.isExternal ? '_blank' : '_self'}
-        class={`h6 underline-on-nav-hover border-color flex content-center px-2 py-6 font-bold text-navy transition-all duration-1000 after:bg-current ${item.viewportHighlightId && highlightId === item.viewportHighlightId ? 'underline-on-nav' : ''}`}
+        class={`h6 underline-on-nav-hover border-color flex content-center px-2 py-f20 font-bold text-navy transition-all duration-1000 after:bg-current ${item.viewportHighlightId && highlightId === item.viewportHighlightId ? 'underline-on-nav' : ''}`}
       >
-        {`${item.label}`}
+        {item.label}
       </a>
     {/if}
   {/each}
diff --git a/src/lib/features/NavMenuMobile.svelte b/src/lib/features/NavMenuMobile.svelte
index 50d60dc..7d0de96 100644
--- a/src/lib/features/NavMenuMobile.svelte
+++ b/src/lib/features/NavMenuMobile.svelte
@@ -12,17 +12,17 @@
 
 <input type="checkbox" class="peer hidden" bind:checked={isOpen} id={toggleIdentifier} />
 <OpenClose
-  classes="stroke-navy peer-checked:stroke-white peer-checked:hover:stroke-teal hover:stroke-teal flex self-center lg:hidden"
+  classes="cursor-pointer stroke-navy peer-checked:stroke-white peer-checked:hover:stroke-teal hover:stroke-teal flex self-center lg:hidden"
 />
 <div
   class="z-1 fixed right-0 top-0 z-10 flex h-0 w-[100vw] flex-col justify-between gap-f24 overflow-y-scroll bg-navy px-[12%] transition-[height] duration-[1s] peer-checked:h-[100vh] lg:hidden"
   aria-expanded={isOpen}
 >
-  <nav id="mobile-navigation" aria-label="Main" class="mt-[60px] flex flex-col gap-4 text-white">
+  <nav id="mobile-navigation" aria-label="Main" class="mb-f20 mt-[85px] flex flex-col gap-f24 text-white">
     {#each menuItems as item}
       {#if item.isButton}
-        <Button size="full" class="max-w-[360px] self-center">
-          <a href={item.href} target={item.isExternal ? '_blank' : '_self'}>{item.label}</a>
+        <Button size="full" class="mt-f24 max-w-[360px]" href={item.href} target={item.isExternal ? '_blank' : '_self'}>
+          {item.label}
         </Button>
       {:else}
         <a
diff --git a/src/lib/styles/index.css b/src/lib/styles/index.css
index 1f56341..47e4881 100644
--- a/src/lib/styles/index.css
+++ b/src/lib/styles/index.css
@@ -58,6 +58,7 @@
   .form-error {
     @apply sm font-bold text-error;
   }
+
   .card-shadow {
     box-shadow: 4px 4px 10px 0 rgb(0 0 0 / 25%);
   }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 2e454f0..2859c4e 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -13,7 +13,8 @@ export default {
   theme: {
     extend: {
       fontFamily: {
-        sans: ['Poppins'],
+        title: ['Newake', 'sans-serif'],
+        sans: ['Poppins', 'sans-serif'],
       },
       colors: tailwindColors,
       fontSize: {