[docs] Logo B (#901)

mui · Dec 2, 2024 · c076a76 · c076a76
1 parent 5639425
commit c076a76
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 12 deletions.
diff --git a/docs/public/static/favicon-dev.ico b/docs/public/static/favicon-dev.ico
diff --git a/docs/public/static/favicon.ico b/docs/public/static/favicon.ico
diff --git a/docs/src/app/Favicons.tsx b/docs/src/app/Favicons.tsx
@@ -1,25 +1,18 @@
-'use client';
 import * as React from 'react';
 
-// TODO: add SVG favicons when we are settled with the logo
 export function Favicons() {
   return (
     <React.Fragment>
       {/* Separate set of favicons in dev so that the dev tabs are easier to spot */}
       {process.env.NODE_ENV !== 'production' && (
-        <React.Fragment>
-          <link rel="icon" href="/static/favicon-dev.ico" sizes="32x32" />
-          {/* <link rel="icon" href="/static/favicon-dev.svg" type="image/svg+xml" /> */}
-        </React.Fragment>
+        <link rel="icon" href="/static/favicon-dev.ico" sizes="32x32" />
       )}
 
       {process.env.NODE_ENV === 'production' && (
-        <React.Fragment>
-          <link rel="icon" href="/static/favicon.ico" sizes="32x32" />
-          {/* <link rel="icon" href="/static/favicon.svg" type="image/svg+xml" /> */}
-        </React.Fragment>
+        <link rel="icon" href="/static/favicon.ico" sizes="32x32" />
       )}
 
+      {/* Used by Safari when the website is favourited */}
       <link rel="apple-touch-icon" href="/static/apple-touch-icon.png" />
     </React.Fragment>
   );

diff --git a/docs/src/components/Header.css b/docs/src/components/Header.css
@@ -75,4 +75,24 @@
       }
     }
   }
+
+  .HeaderLogoLink {
+    display: flex;
+    padding: 0.25rem 0.5rem;
+    margin: -0.25rem -0.5rem;
+
+    &:active {
+      color: var(--color-gray-500);
+    }
+
+    & svg {
+      margin-top: -0.125rem;
+    }
+
+    &:focus-visible {
+      border-radius: var(--radius-md);
+      outline: 2px solid var(--color-blue);
+      outline-offset: -1px;
+    }
+  }
 }
diff --git a/docs/src/components/Header.tsx b/docs/src/components/Header.tsx
@@ -12,8 +12,11 @@ export function Header() {
   return (
     <div className="Header">
       <div className="HeaderInner">
-        <NextLink href="/" className="HeaderLink text-lg font-bold tracking-tight">
-          base ui
+        <NextLink href="#" className="HeaderLogoLink">
+          <svg width="17" height="24" viewBox="0 0 17 24" fill="currentcolor">
+            <path d="M9.5001 7.01537C9.2245 6.99837 9 7.22385 9 7.49999V23C13.4183 23 17 19.4183 17 15C17 10.7497 13.6854 7.27351 9.5001 7.01537Z" />
+            <path d="M8 9.8V12V23C3.58172 23 0 19.0601 0 14.2V12V1C4.41828 1 8 4.93989 8 9.8Z" />
+          </svg>
         </NextLink>
 
         <div className="flex gap-6 max-show-side-nav:hidden">