Chore: add temporary ODD header logo

oddsdk · Apr 18, 2023 · cb39039 · cb39039 · vercel · Apr 18, 2023
1 parent 1b15734
commit cb39039
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 16 deletions.
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
@@ -2,10 +2,8 @@
   import { goto } from '$app/navigation'
   import { sessionStore, themeStore } from '../stores'
   import { DEFAULT_THEME_KEY, storeTheme, type ThemeOptions } from '$lib/theme'
-  import AlphaTag from '$components/nav/AlphaTag.svelte'
   import Avatar from '$components/settings/Avatar.svelte'
   import BrandLogo from '$components/icons/BrandLogo.svelte'
-  import BrandWordmark from '$components/icons/BrandWordmark.svelte'
   import DarkMode from '$components/icons/DarkMode.svelte'
   import Hamburger from '$components/icons/Hamburger.svelte'
   import LightMode from '$components/icons/LightMode.svelte'
@@ -36,7 +34,6 @@
         on:click={() => goto('/')}
       >
         <BrandLogo />
-        <AlphaTag />
     </button>
     {/if}
   </div>
@@ -48,12 +45,6 @@
       on:click={() => goto('/')}
     >
       <BrandLogo />
-      <div class="hidden lg:inline-block">
-        <BrandWordmark />
-      </div>
-      <div class="hidden sm:inline-block">
-        <AlphaTag />
-      </div>
     </button>
   {/if}
 

diff --git a/src/components/icons/BrandLogo.svelte b/src/components/icons/BrandLogo.svelte
@@ -1,8 +1,26 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="41" height="40" fill="none">
+<script lang="ts">
+  import { themeStore } from '$src/stores'
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width="53" height="27" fill="none">
   <path
-    fill="currentColor"
+    fill="#F16583"
+    d="M52.5 13.854c0 6.627-5.373 12-12 12s-12-5.373-12-12c0-6.628 5.373-12 12-12s12 5.372 12 12Z"
+  />
+  <path
+    fill="#F16583"
+    stroke={$themeStore.selectedTheme === 'light' ? '#FAFAFA' : '#171717'}
+    d="M26.5 26.354c6.904 0 12.5-5.597 12.5-12.5 0-6.904-5.596-12.5-12.5-12.5S14 6.95 14 13.854c0 6.903 5.596 12.5 12.5 12.5Z"
+  />
+  <path
+    fill={$themeStore.selectedTheme === 'light' ? '#FAFAFA' : '#171717'}
+    stroke={$themeStore.selectedTheme === 'light' ? '#FAFAFA' : '#171717'}
+    d="M12.745 26.354c6.757 0 12.214-5.608 12.214-12.5 0-6.893-5.457-12.5-12.214-12.5C5.988 1.354.53 6.96.53 13.854c0 6.892 5.458 12.5 12.215 12.5Z"
+  />
+  <path
+    fill="#F16583"
     fill-rule="evenodd"
-    d="M5.8 0C2.111 0 .5 1.599.5 5.333v29.334C.5 38.255 2.156 40 5.8 40h29.15c3.674 0 5.301-1.678 5.301-5.333V5.333c0-3.67-1.658-5.333-5.3-5.333H5.8Zm3.82 26.397L11.407 8.2c.165-1.681-1.147-3.138-2.825-3.138-2.04 0-3.579 2.19-3.014 4.276.755 2.793 1.486 6.496 1.533 10.49.027 2.326-.207 4.576-.56 6.615-.354 2.05.202 4.187 1.37 5.81 1.167 1.62 2.912 2.687 4.924 2.687h1.037c2.546 0 4.61-2.077 4.61-4.638v-1.935c0-1.164-.84-2.155-1.982-2.339l-1.412-.228a1.018 1.018 0 0 0-1.174.917l-.008.092a2.158 2.158 0 0 1-2.144 1.969 2.161 2.161 0 0 1-2.142-2.38Zm8.862-5.777v-7.53c0-1.03.83-1.867 1.855-1.867s1.856.836 1.856 1.868v16.246c0 3.094 2.493 5.602 5.567 5.602h.237c3.995 0 6.975-4.28 6.242-8.41-.366-2.06-.62-4.339-.62-6.695 0-4.102.771-7.898 1.563-10.716.554-1.97-.9-4.057-2.825-4.057-1.55 0-2.772 1.33-2.65 2.885l1.446 18.476a2.178 2.178 0 0 1-2.163 2.355 2.175 2.175 0 0 1-2.16-1.984l-1.576-17.26c-.232-2.534-2.343-4.472-4.871-4.472-2.539 0-4.656 1.954-4.873 4.5l-1.046 10.886a2.022 2.022 0 0 0 1.715 2.177 2.017 2.017 0 0 0 2.303-2.004Z"
+    d="M12.745 21.597c4.174 0 7.559-3.467 7.559-7.744 0-4.276-3.385-7.743-7.56-7.743-4.174 0-7.558 3.467-7.558 7.744 0 4.276 3.384 7.743 7.559 7.743Zm0 4.256c6.47 0 11.714-5.372 11.714-12 0-6.627-5.245-12-11.714-12-6.47 0-11.715 5.373-11.715 12 0 6.628 5.245 12 11.715 12Z"
     clip-rule="evenodd"
   />
 </svg>
diff --git a/src/components/nav/SidebarNav.svelte b/src/components/nav/SidebarNav.svelte
@@ -3,9 +3,7 @@
   import { page } from '$app/stores'
   import { sessionStore } from '$src/stores'
   import About from '$components/icons/About.svelte'
-  import AlphaTag from '$components/nav/AlphaTag.svelte'
   import BrandLogo from '$components/icons/BrandLogo.svelte'
-  import BrandWordmark from '$components/icons/BrandWordmark.svelte'
   import Home from '$components/icons/Home.svelte'
   import PhotoGallery from '$components/icons/PhotoGallery.svelte'
   import Settings from '$components/icons/Settings.svelte'
@@ -71,8 +69,6 @@
           }}
         >
           <BrandLogo />
-          <BrandWordmark />
-          <AlphaTag />
         </button>
 
         <!-- Upper Menu -->