Hot fix logo hex (#45)

* change

* header

* hot fix on logohex

---------

Co-authored-by: eNDdy <[email protected]>
Co-authored-by: Claire Olmstead <[email protected]>

src/lib/assets/logos/FrequencyAccessLogo.svelte

@@ -17,29 +17,36 @@
   <path
     d="M0 0.737414V35.2633H5.90985V24.5081L17.7833 19.2909L17.6269 13.1214L5.95873 18.2334V6.48588H21.0242V0.737414H0ZM28.7378 6.48087H36.6567C39.2279 6.48087 41.3347 7.79895 41.3347 10.6456C41.3347 13.4923 39.2279 14.8605 36.6567 14.8605H28.7378V6.48588V6.48087ZM22.7742 0.737414V35.2633H28.7378V26.7784L47.2446 35.2633V28.6227L29.2511 20.6641H36.5003C42.2586 20.6641 47.2446 16.8702 47.2446 10.7007C47.2446 4.5313 42.2586 0.737414 36.5003 0.737414H22.7742ZM49.0434 0.737414V35.2633H70.0187V29.4647H54.9533V20.8194H70.0187V15.076H54.9533V6.48588H70.0187V0.737414H49.0434ZM126.517 0.737414V24.3527C126.517 27.886 123.999 30.3067 120.607 30.3067C117.214 30.3067 114.697 27.881 114.697 24.3527V0.737414H108.787V24.2475C108.787 31.2038 114.081 36 120.612 36C127.142 36 132.436 31.2038 132.436 24.2475V0.737414H126.526H126.517ZM134.23 0.737414V35.2633H155.206V29.4647H140.14V20.8194H155.206V15.076H140.14V6.48588H155.206V0.737414H134.23ZM175.77 0.737414V24.037L163.432 0.737414H157.004V35.2633H162.812V12.0188L175.203 35.2633H181.577V0.737414H175.77ZM230.728 0.737414L226.05 13.7028L221.113 0.737414H214.583L228.876 35.2633H235.045L229.081 20.8746L237 0.792543H230.728V0.737414ZM77.4733 17.9778C77.4733 11.232 82.821 5.69402 89.4543 5.69402C96.0876 5.69402 101.435 11.1769 101.435 17.9778C101.435 20.1378 100.922 22.2478 99.8417 24.1472L86.5262 15.7125V22.5635L95.8822 28.3621C93.927 29.575 91.7175 30.2616 89.4054 30.2616C82.8747 30.3167 77.5319 24.9391 77.4781 18.2434V17.9778M89.4005 0.00068895C79.7365 0.0558181 71.8714 8.1197 71.9202 18.0279C71.974 27.9361 79.8391 36 89.5031 35.9499C93.7168 35.9499 97.7789 34.3662 100.966 31.5245L106.93 35.2132V28.6227L104.564 27.1493C106.108 24.3577 106.93 21.1953 106.93 17.9778C107.037 8.1197 99.2747 0.0558181 89.6596 0.00068895C89.5569 0.00068895 89.5031 0.00068895 89.4005 0.00068895ZM200.964 0.00068895C191.3 0.00068895 183.381 8.01446 183.381 17.9728C183.381 27.9311 191.197 36 200.91 36C206.512 36 211.757 33.3137 215.047 28.6728L210.936 24.458C208.932 28.1466 205.075 30.4119 200.964 30.3067C194.179 30.3067 189.091 24.9842 189.091 18.0229C189.091 11.0616 194.233 5.68901 200.964 5.68901C205.075 5.58376 208.932 7.84907 210.936 11.5928L215.047 7.37797C211.757 2.63686 206.512 -0.0494284 200.964 0.00068895Z"
     fill={frequencyColor}
+    class="transition-all duration-1000"
   />
   <path
     d="M168.071 40.9833C168.236 40.4627 168.463 40 169.124 40C169.784 40 170.053 40.482 170.197 40.9833L174.183 54.036C174.327 54.4987 173.77 55 173.192 55C172.552 55 172.221 54.4987 172.077 54.036L171.313 51.7224H166.914L166.129 54.036C165.985 54.4987 165.654 55 165.014 55C164.436 55 163.879 54.4987 164.023 54.036L168.071 40.9833ZM169.144 44.5694H169.103L167.492 49.7943H170.734L169.144 44.5694Z"
     fill={accessColor}
+    class="transition-all duration-1000"
   />
   <path
     d="M181.968 55C180.419 55 179.531 54.4216 178.87 53.1684L176.971 49.5823C176.62 48.9267 176.413 48.3098 176.413 47.5578C176.413 46.7095 176.578 46.1889 176.991 45.4177L178.891 41.8509C179.593 40.5206 180.481 40 182.071 40H185.582C186.036 40 186.614 40.2314 186.614 40.964C186.614 41.6581 186.057 41.928 185.582 41.928H182.133C181.245 41.928 181.101 42.0051 180.708 42.7378L178.912 46.0925C178.643 46.6131 178.478 46.9602 178.478 47.5578C178.478 48.0977 178.664 48.4254 178.912 48.8882L180.667 52.2236C181.08 53.0141 181.286 53.072 182.216 53.072H185.582C186.036 53.072 186.614 53.3033 186.614 54.036C186.614 54.7301 186.057 55 185.582 55H181.968Z"
     fill={accessColor}
+    class="transition-all duration-1000"
   />
   <path
     d="M193.119 55C191.571 55 190.683 54.4216 190.022 53.1684L188.122 49.5823C187.771 48.9267 187.564 48.3098 187.564 47.5578C187.564 46.7095 187.73 46.1889 188.143 45.4177L190.042 41.8509C190.745 40.5206 191.632 40 193.223 40H196.733C197.187 40 197.766 40.2314 197.766 40.964C197.766 41.6581 197.208 41.928 196.733 41.928H193.284C192.397 41.928 192.252 42.0051 191.86 42.7378L190.063 46.0925C189.795 46.6131 189.629 46.9602 189.629 47.5578C189.629 48.0977 189.815 48.4254 190.063 48.8882L191.818 52.2236C192.231 53.0141 192.438 53.072 193.367 53.072H196.733C197.187 53.072 197.766 53.3033 197.766 54.036C197.766 54.7301 197.208 55 196.733 55H193.119Z"
     fill={accessColor}
+    class="transition-all duration-1000"
   />
   <path
     d="M210.362 53.072C210.899 53.072 211.394 53.3419 211.394 54.036C211.394 54.7301 210.899 55 210.362 55H201.193V40H210.362C210.899 40 211.394 40.2699 211.394 40.964C211.394 41.6581 210.899 41.928 210.362 41.928H203.258V46.536H206.294C206.831 46.536 207.326 46.8059 207.326 47.5C207.326 48.1941 206.831 48.464 206.294 48.464H203.258V53.072H210.362Z"
     fill={accessColor}
+    class="transition-all duration-1000"
   />
   <path
     d="M223.474 51.2211C223.887 51.7224 224.197 52.1658 224.197 52.8213C224.197 54.2674 223.02 55 221.595 55H217.052C216.268 55 215.586 54.865 214.967 54.383C214.409 53.9589 213.996 53.2648 213.996 52.59C213.996 51.973 214.368 51.4332 215.091 51.4332C215.689 51.4332 216.061 51.8959 216.061 52.4164C216.061 52.9949 216.391 53.072 216.97 53.072H221.451C221.616 53.072 222.132 53.1298 222.132 52.8406C222.132 52.6864 221.843 52.3972 221.76 52.2815L214.678 43.7789C214.244 43.2584 213.996 42.8727 213.996 42.1979C213.996 41.4267 214.388 40.7712 215.091 40.347C215.669 40 216.144 40 216.804 40H221.182C221.967 40 222.628 40.1542 223.227 40.6362C223.764 41.0797 224.197 41.7931 224.197 42.4679C224.197 43.0848 223.867 43.5861 223.123 43.5861C222.504 43.5861 222.132 43.2198 222.132 42.6799C222.132 42.0244 221.781 41.928 221.141 41.928H216.763C216.536 41.928 216.061 41.8702 216.061 42.1979C216.061 42.3715 216.288 42.6028 216.371 42.7185L223.474 51.2211Z"
     fill={accessColor}
+    class="transition-all duration-1000"
   />
   <path
     d="M236.277 51.2211C236.69 51.7224 237 52.1658 237 52.8213C237 54.2674 235.823 55 234.398 55H229.855C229.07 55 228.389 54.865 227.769 54.383C227.212 53.9589 226.799 53.2648 226.799 52.59C226.799 51.973 227.171 51.4332 227.893 51.4332C228.492 51.4332 228.864 51.8959 228.864 52.4164C228.864 52.9949 229.194 53.072 229.772 53.072H234.253C234.419 53.072 234.935 53.1298 234.935 52.8406C234.935 52.6864 234.646 52.3972 234.563 52.2815L227.48 43.7789C227.047 43.2584 226.799 42.8727 226.799 42.1979C226.799 41.4267 227.191 40.7712 227.893 40.347C228.471 40 228.946 40 229.607 40H233.985C234.77 40 235.43 40.1542 236.029 40.6362C236.566 41.0797 237 41.7931 237 42.4679C237 43.0848 236.669 43.5861 235.926 43.5861C235.307 43.5861 234.935 43.2198 234.935 42.6799C234.935 42.0244 234.584 41.928 233.944 41.928H229.566C229.339 41.928 228.864 41.8702 228.864 42.1979C228.864 42.3715 229.091 42.6028 229.174 42.7185L236.277 51.2211Z"
     fill={accessColor}
+    class="transition-all duration-1000"
   />
 </svg>

src/lib/assets/logos/FrequencyLogo.svelte

@@ -1,3 +1,8 @@
+<script lang="ts">
+  // logoHex = teal
+  export let logoHex = '#55B1AB';
+</script>
+
 <svg
   width="257"
   height="36"
@@ -8,6 +13,7 @@
 >
   <path
     d="M0 0.737414V35.2633H6.40857V24.5081L19.284 19.2909L19.1144 13.1214L6.46158 18.2334V6.48588H22.7984V0.737414H0ZM31.1629 6.48087H39.7501C42.5383 6.48087 44.8229 7.79895 44.8229 10.6456C44.8229 13.4923 42.5383 14.8605 39.7501 14.8605H31.1629V6.48588V6.48087ZM24.696 0.737414V35.2633H31.1629V26.7784L51.2314 35.2633V28.6227L31.7195 20.6641H39.5805C45.8247 20.6641 51.2314 16.8702 51.2314 10.7007C51.2314 4.5313 45.8247 0.737414 39.5805 0.737414H24.696ZM53.1821 0.737414V35.2633H75.9275V29.4647H59.5907V20.8194H75.9275V15.076H59.5907V6.48588H75.9275V0.737414H53.1821ZM137.193 0.737414V24.3527C137.193 27.886 134.463 30.3067 130.785 30.3067C127.106 30.3067 124.376 27.881 124.376 24.3527V0.737414H117.967V24.2475C117.967 31.2038 123.708 36 130.79 36C137.872 36 143.612 31.2038 143.612 24.2475V0.737414H137.204H137.193ZM145.558 0.737414V35.2633H168.303V29.4647H151.966V20.8194H168.303V15.076H151.966V6.48588H168.303V0.737414H145.558ZM190.603 0.737414V24.037L177.224 0.737414H170.254V35.2633H176.551V12.0188L189.988 35.2633H196.9V0.737414H190.603ZM250.199 0.737414L245.126 13.7028L239.773 0.737414H232.691L248.19 35.2633H254.88L248.413 20.8746L257 0.792543H250.199V0.737414ZM84.0111 17.9778C84.0111 11.232 89.8101 5.69402 97.0031 5.69402C104.196 5.69402 109.995 11.1769 109.995 17.9778C109.995 20.1378 109.439 22.2478 108.267 24.1472L93.828 15.7125V22.5635L103.974 28.3621C101.853 29.575 99.4574 30.2616 96.9501 30.2616C89.8684 30.3167 84.0747 24.9391 84.0164 18.2434V17.9778M96.9448 0.00068895C86.4653 0.0558181 77.9365 8.1197 77.9895 18.0279C78.0478 27.9361 86.5766 36 97.0562 35.9499C101.625 35.9499 106.03 34.3662 109.486 31.5245L115.953 35.2132V28.6227L113.388 27.1493C115.063 24.3577 115.953 21.1953 115.953 17.9778C116.07 8.1197 107.652 0.0558181 97.2258 0.00068895C97.1145 0.00068895 97.0561 0.00068895 96.9448 0.00068895ZM217.923 0.00068895C207.444 0.00068895 198.856 8.01446 198.856 17.9728C198.856 27.9311 207.332 36 217.865 36C223.939 36 229.627 33.3137 233.194 28.6728L228.737 24.458C226.563 28.1466 222.381 30.4119 217.923 30.3067C210.566 30.3067 205.048 24.9842 205.048 18.0229C205.048 11.0616 210.624 5.68901 217.923 5.68901C222.381 5.58376 226.563 7.84907 228.737 11.5928L233.194 7.37797C229.627 2.63686 223.939 -0.0494284 217.923 0.00068895Z"
-    fill="currentColor"
+    fill={logoHex}
+    class="transition-all duration-1000"
   />
 </svg>

src/lib/features/Header.svelte

@@ -6,7 +6,8 @@
 
   export let menuItems: MenuItem[] = [];
   export let logoType: 'primary' | 'access' = 'primary';
-  export let logoHex;
+  // logoHex = teal
+  export let logoHex = '#55B1AB';
 
   $: isNavOpen = false;
 
@@ -21,19 +22,12 @@
       if (!hasMobileNav) isNavOpen = false;
     });
   }
-
-  const textColor = () => {
-    if (hasMobileNav) return 'text-white';
-    if (logoHex) return `text-[${logoHex}]`;
-    // default to teal
-    return 'text-teal';
-  };
 </script>
 
 <div class={`flex justify-between bg-navy p-f16 md:bg-transparent md:p-0 ${$$restProps.class}`}>
   <!-- For Desktop -->
   {#if logoType == 'primary'}
-    <FrequencyLogo class={textColor()} />
+    <FrequencyLogo logoHex={hasMobileNav ? '#fff' : logoHex} />
   {:else if logoType == 'access'}
     <FrequencyAccessLogo accessColor={hasMobileNav ? '#fff' : '#000'} frequencyColor={logoHex} />
   {/if}