feat: header reorganisation (#361)

Closes MIS-266 <img width="1030" alt="image" src="https://github.com/user-attachments/assets/3a211fb9-b5e6-455d-9944-72eee186f9d0"> <img width="1022" alt="image" src="https://github.com/user-attachments/assets/51a7f4b5-a4a1-40f2-96fc-0a473651ec51">
rivet-gg · Sep 26, 2024 · 8982218 · 8982218
1 parent 2fadb14
commit 8982218
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 17 deletions.
diff --git a/apps/hub/public/icon-white-borderless.svg b/apps/hub/public/icon-white-borderless.svg
diff --git a/apps/hub/src/components/header/header.tsx b/apps/hub/src/components/header/header.tsx
@@ -1,6 +1,5 @@
 import { useAuth } from "@/domains/auth/contexts/auth";
 import {
-  AssetImage,
   Button,
   Flex,
   Sheet,
@@ -11,7 +10,6 @@ import { Icon, faBars } from "@rivet-gg/icons";
 import { Link } from "@tanstack/react-router";
 import { Breadcrumbs } from "../breadcrumbs/breadcrumbs";
 import { MobileBreadcrumbs } from "../breadcrumbs/mobile-breadcrumbs";
-import { CommandPanel } from "../command-panel";
 import { HeaderRouteLoader } from "./header-route-loader";
 import { HeaderSubNav } from "./header-sub-nav";
 import { MobileHeaderSubNav } from "./mobile-header-sub-nav";
@@ -60,9 +58,9 @@ export function Header() {
                       href="/"
                       className="flex items-center gap-2 text-lg font-semibold"
                     >
-                      <AssetImage
+                      <img
                         className="h-6"
-                        src="/logo/icon-white.svg"
+                        src="/icon-white-borderless.svg"
                         alt="Rivet logo"
                       />
                     </Link>
@@ -71,6 +69,9 @@ export function Header() {
                   </Flex>
                 </div>
                 <Flex direction="col" justify="end" gap="6">
+                  <NavItem asChild>
+                    <Link search={{ modal: "feedback" }}>Feedback</Link>
+                  </NavItem>
                   <NavItem asChild>
                     <a
                       href="https://rivet.gg/changelog"
@@ -104,19 +105,17 @@ export function Header() {
           </Sheet>
           <nav className="flex-1 font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
             <Link to="/">
-              <AssetImage
-                className="h-8"
-                alt="Rivet Logo"
-                src="/logo/icon-white.svg"
+              <img
+                className="h-6"
+                src="/icon-white-borderless.svg"
+                alt="Rivet logo"
               />
             </Link>
             <div className="hidden md:flex">
               <Breadcrumbs />
             </div>
           </nav>
           <div className="gap-6 font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm">
-            <CommandPanel />
-
             <NavItem
               asChild
               className="hidden md:inline-block border px-4 py-2 rounded-md"
@@ -132,6 +131,15 @@ export function Header() {
                 Changelog
               </a>
             </NavItem>
+            <NavItem asChild className="hidden md:inline-block">
+              <a
+                href="https://rivet.gg/support"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Help
+              </a>
+            </NavItem>
             <NavItem asChild className="hidden md:inline-block">
               <a href="https://rivet.gg/docs" target="_blank" rel="noreferrer">
                 Docs

diff --git a/apps/hub/src/layouts/root.tsx b/apps/hub/src/layouts/root.tsx
@@ -1,5 +1,6 @@
+import { CommandPanel } from "@/components/command-panel";
 import { NavItem } from "@/components/header/nav-item";
-import { AssetImage, cn } from "@rivet-gg/components";
+import { cn } from "@rivet-gg/components";
 import { Icon, faDiscord, faGithub, faXTwitter } from "@rivet-gg/icons";
 import { useMatches } from "@tanstack/react-router";
 import type { ReactNode } from "react";
@@ -39,12 +40,12 @@ const Footer = () => {
     <footer className="text-muted-foreground bg-background p-4 text-center text-sm border-t mt-8">
       <div className="container">
         <div className="flex items-center justify-between">
-          <div className="flex gap-4 items-center">
+          <div className="flex gap-4 items-center justify-between w-full lg:w-auto lg:justify-normal">
             <div className="flex gap-4 items-center">
-              <AssetImage
-                src="/logo/icon-white.svg"
+              <img
+                src="/icon-white-borderless.svg"
                 alt="Rivet"
-                className="h-8"
+                className="h-6"
               />
               &copy; {new Date().getFullYear()}
             </div>
@@ -58,8 +59,11 @@ const Footer = () => {
               All services are online
             </a>
           </div>
+          <div>
+            <CommandPanel />
+          </div>
         </div>
-        <div className="flex items-center justify-between mt-8 mb-4">
+        <div className="flex flex-col lg:flex-row items-center justify-between mt-4 gap-4 lg:gap-0 lg:mt-8 mb-4">
           <div className="text-base flex items-center gap-4">
             <NavItem
               href="https://rivet.gg/discord"
@@ -83,7 +87,7 @@ const Footer = () => {
               <Icon icon={faXTwitter} />
             </NavItem>
           </div>
-          <div className="flex items-center gap-8">
+          <div className="flex items-center flex-wrap justify-between lg:justify-normal w-full lg:w-auto gap-4 lg:gap-8">
             <NavItem href="https://rivet.gg" target="_blank" rel="noreferrer">
               Home
             </NavItem>