Rebase with new logo

jsr-io · Apr 18, 2024 · eeb5282 · eeb5282
1 parent 7935dfd
commit eeb5282
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 29 deletions.
diff --git a/frontend/components/Header.tsx b/frontend/components/Header.tsx
@@ -6,6 +6,7 @@ import { UserMenu } from "../islands/UserMenu.tsx";
 import { GitHub } from "./icons/GitHub.tsx";
 import { SearchKind } from "../util.ts";
 import { HeaderLogo } from "../islands/HeaderLogo.tsx";
+import { Logo } from "./Logo.tsx";
 
 export function Header({
   user,
@@ -57,21 +58,9 @@ export function Header({
               href="/"
               class="outline-none focus-visible:ring-2 ring-cyan-700"
             >
-              <span className="sr-only">JSR home</span>
-              <Logo size="medium" class="flex-none hover:animate-flip-rotate" />
+              <HeaderLogo class="h-8 flex-none" />
             </a>
           )}
-          <div>
-            {!isHomepage && (
-              <a
-                href="/"
-                class="outline-none focus-visible:ring-2 ring-cyan-700"
-              >
-                <span className="sr-only">JSR home</span>
-                <HeaderLogo class="h-8 flex-none" />
-              </a>
-            )}
-          </div>
           <div class="hidden sm:block grow-1 flex-1">
             {!isHomepage && (
               <GlobalSearch

diff --git a/frontend/islands/HeaderLogo.tsx b/frontend/islands/HeaderLogo.tsx
@@ -1,5 +1,6 @@
 // Copyright 2024 the JSR authors. All rights reserved. MIT license.
 import { signal } from "@preact/signals";
+import { Logo } from "../components/Logo.tsx";
 
 const rotationDegrees = signal(0);
 const isAnimating = signal(false);
@@ -13,26 +14,14 @@ export function HeaderLogo(props: { class?: string }) {
         rotationDegrees.value += 180;
       }}
     >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 638 343"
-        fill="none"
-        class={`transition-transform duration-300 ${props.class}`}
+      <div
+        class={`h-auto transition-transform duration-300 ${props.class}`}
         style={`transform: rotate(${rotationDegrees.value}deg)`}
         aria-hidden="true"
         onTransitionEnd={() => isAnimating.value = false}
       >
-        <g fill-rule="evenodd">
-          <path
-            fill="#083344"
-            d="M637.272 49v196h-98v98h-343v-49h-196V98h98V0h343v49h196Z"
-          />
-          <path
-            fill="#F7DF1E"
-            d="M100.101 196h47.171V49h49v196H51.102v-98H100.1v49ZM588.272 98v98h-49v-49h-49v147h-49V98h147ZM294.272 98v49h98v147h-147v-49h98v-49h-98V49h147v49h-98Z"
-          />
-        </g>
-      </svg>
+        <Logo size="medium" />
+      </div>
     </div>
   );
 }