feat(frontend): Updates to navbar (#9047)

### Changes 🏗️ Updates to navbar and button sizes, added autogpt icon The navbar now matches the design and resolves [Markeplace - Reduce the size of the top menu bar, change the font size & the height of the bar to 64px #8953](#8953) ![image](https://github.com/user-attachments/assets/d8b7cfdd-6e57-4f71-bae5-c2b51bfa63f3) ![image](https://github.com/user-attachments/assets/b908a28f-c325-44df-80e4-84f6eca2ddd5) ![image](https://github.com/user-attachments/assets/b4324590-bf27-4fd5-97e2-c7e6047dda15)
Significant-Gravitas · Dec 18, 2024 · e8dd0a2 · e8dd0a2
1 parent 9d93704
commit e8dd0a2
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 8 deletions.
diff --git a/autogpt_platform/frontend/src/components/agptui/CreditsCard.tsx b/autogpt_platform/frontend/src/components/agptui/CreditsCard.tsx
@@ -23,7 +23,7 @@ const CreditsCard = ({ credits }: CreditsCardProps) => {
   };
 
   return (
-    <div className="inline-flex h-[60px] items-center gap-2.5 rounded-2xl bg-neutral-200 p-4 dark:bg-neutral-800">
+    <div className="inline-flex h-[48px] items-center gap-2.5 rounded-2xl bg-neutral-200 p-4 dark:bg-neutral-800">
       <div className="flex items-center gap-0.5">
         <span className="p-ui-semibold text-base leading-7 text-neutral-900 dark:text-neutral-50">
           {currentCredits.toLocaleString()}

diff --git a/autogpt_platform/frontend/src/components/agptui/Navbar.tsx b/autogpt_platform/frontend/src/components/agptui/Navbar.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import Link from "next/link";
 import { ProfilePopoutMenu } from "./ProfilePopoutMenu";
-import { IconType, IconLogIn } from "@/components/ui/icons";
+import { IconType, IconLogIn, IconAutoGPTLogo } from "@/components/ui/icons";
 import { MobileNavBar } from "./MobileNavBar";
 import { Button } from "./Button";
 import CreditsCard from "./CreditsCard";
@@ -55,10 +55,18 @@ export const Navbar = async ({ links, menuItemGroups }: NavbarProps) => {
 
   return (
     <>
-      <nav className="sticky top-0 z-50 hidden h-20 w-[1408px] items-center justify-between rounded-bl-2xl rounded-br-2xl border border-white/50 bg-white/5 py-3 pl-6 pr-3 backdrop-blur-[26px] dark:border-gray-700 dark:bg-gray-900 md:inline-flex">
-        <div className="flex items-center space-x-10">
+      <nav className="sticky top-0 z-50 hidden h-16 w-[1408px] items-center justify-between rounded-bl-2xl rounded-br-2xl border border-white/50 bg-white/5 py-3 pl-6 pr-3 backdrop-blur-[26px] dark:border-gray-700 dark:bg-gray-900 md:inline-flex">
+        <div className="flex items-center gap-11">
+          <div className="relative h-10 w-[88.87px]">
+            <IconAutoGPTLogo className="h-full w-full" />
+          </div>
           {links.map((link) => (
-            <NavbarLink key={link.name} name={link.name} href={link.href} />
+            <NavbarLink
+              key={link.name}
+              name={link.name}
+              href={link.href}
+              className="font-poppins text-[20px] leading-[28px]"
+            />
           ))}
         </div>
         {/* Profile section */}
@@ -80,7 +88,7 @@ export const Navbar = async ({ links, menuItemGroups }: NavbarProps) => {
                 size="sm"
                 className="flex items-center justify-end space-x-2"
               >
-                <IconLogIn className="h-5 w-5" />
+                <IconLogIn className="h-5 h-[48px] w-5" />
                 <span>Log In</span>
               </Button>
             </Link>

diff --git a/autogpt_platform/frontend/src/components/agptui/NavbarLink.tsx b/autogpt_platform/frontend/src/components/agptui/NavbarLink.tsx
@@ -21,7 +21,7 @@ export const NavbarLink = ({ name, href }: NavbarLinkProps) => {
 
   return (
     <div
-      className={`px-5 py-4 ${
+      className={`h-[48px] px-5 py-4 ${
         activeLink === href
           ? "rounded-2xl bg-neutral-800 dark:bg-neutral-200"
           : ""
@@ -49,7 +49,7 @@ export const NavbarLink = ({ name, href }: NavbarLinkProps) => {
       )}
       <Link href={href}>
         <div
-          className={`font-poppins text-xl font-medium leading-7 ${
+          className={`font-poppins text-[20px] font-medium leading-[28px] ${
             activeLink === href
               ? "text-neutral-50 dark:text-neutral-900"
               : "text-neutral-900 dark:text-neutral-50"

diff --git a/autogpt_platform/frontend/src/components/ui/icons.tsx b/autogpt_platform/frontend/src/components/ui/icons.tsx
@@ -1698,6 +1698,128 @@ export const IconMoon = createIcon((props) => (
   </svg>
 ));
 
+/**
+ * AutoGPT Logo icon component.
+ *
+ * @component IconAutoGPTLogo
+ * @param {IconProps} props - The props object containing additional attributes and event handlers for the icon.
+ * @returns {JSX.Element} - The AutoGPT logo icon.
+ */
+export const IconAutoGPTLogo = createIcon((props) => (
+  <svg
+    width="89"
+    height="40"
+    viewBox="0 0 89 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-label="AutoGPT Logo"
+    {...props}
+  >
+    <g id="AutoGPT-logo 1" clipPath="url(#clip0_3364_2463)">
+      <path
+        id="Vector"
+        d="M69.1364 28.8681V38.6414C69.1364 39.3617 68.5471 39.951 67.8301 39.951C67.0541 39.951 66.4124 39.4599 66.4124 38.6414V24.0584C66.4124 20.9644 68.9236 18.4531 72.0177 18.4531C75.1117 18.4531 77.623 20.9644 77.623 24.0584C77.623 27.1525 75.1117 29.6637 72.0177 29.6637C70.9634 29.6637 69.9812 29.3723 69.1397 28.8681H69.1364ZM70.2856 22.3231C71.2417 22.3231 72.0177 23.0991 72.0177 24.0552C72.0177 25.0112 71.2417 25.7872 70.2856 25.7872C70.1088 25.7872 69.9353 25.761 69.7749 25.7119C70.2824 26.3994 71.0976 26.8447 72.0177 26.8447C73.5565 26.8447 74.8039 25.5973 74.8039 24.0584C74.8039 22.5196 73.5565 21.2721 72.0177 21.2721C71.0976 21.2721 70.2824 21.7174 69.7749 22.405C69.9353 22.3559 70.1088 22.3297 70.2856 22.3297V22.3231Z"
+        fill="url(#paint0_linear_3364_2463)"
+      />
+      <path
+        id="Vector_2"
+        d="M62.133 28.8675V35.144C62.133 35.7137 61.9005 36.2343 61.524 36.6075C60.6989 37.4326 59.1699 37.4326 58.3448 36.6075C57.2611 35.5238 58.2891 33.6903 56.3509 31.752C54.4126 29.8137 51.1974 29.8694 49.318 31.752C48.4504 32.6196 47.9102 33.8212 47.9102 35.144C47.9102 35.8643 48.4995 36.4536 49.2198 36.4536C49.999 36.4536 50.6375 35.9625 50.6375 35.144C50.6375 34.5743 50.87 34.057 51.2465 33.6805C52.0716 32.8554 53.6006 32.8554 54.4257 33.6805C55.6076 34.8624 54.4126 36.5289 56.4196 38.536C58.3022 40.4186 61.5731 40.4186 63.4524 38.536C64.3201 37.6683 64.8603 36.4667 64.8603 35.144V24.0545C64.8603 20.9605 62.3491 18.4492 59.255 18.4492C56.161 18.4492 53.6497 20.9605 53.6497 24.0545C53.6497 27.1486 56.161 29.6598 59.255 29.6598C60.3093 29.6598 61.2948 29.3684 62.133 28.8642V28.8675ZM59.255 26.8441C58.335 26.8441 57.5197 26.3988 57.0122 25.7112C57.1727 25.7603 57.3462 25.7865 57.523 25.7865C58.479 25.7865 59.255 25.0106 59.255 24.0545C59.255 23.0985 58.479 22.3225 57.523 22.3225C57.3462 22.3225 57.1727 22.3487 57.0122 22.3978C57.5197 21.7103 58.335 21.265 59.255 21.265C60.7938 21.265 62.0413 22.5124 62.0413 24.0512C62.0413 25.5901 60.7938 26.8375 59.255 26.8375V26.8441Z"
+        fill="url(#paint1_linear_3364_2463)"
+      />
+      <path
+        id="Vector_3"
+        d="M81.709 12.959C81.709 9.51134 80.3371 6.24048 77.9045 3.80453C75.4685 1.36858 72.1977 0 68.75 0C65.3024 0 62.0315 1.37186 59.5956 3.80453C57.1596 6.24048 55.791 9.51461 55.791 12.959V13.5451C55.791 14.2948 56.4 14.9038 57.1498 14.9038C57.8996 14.9038 58.5085 14.2948 58.5085 13.5451V12.959C58.5085 10.2349 59.5956 7.64836 61.5175 5.72645C63.4394 3.80453 66.0259 2.71425 68.75 2.71425C71.4741 2.71425 74.0574 3.80126 75.9826 5.72645C77.9045 7.64836 78.9948 10.2349 78.9948 12.959C78.9948 13.7088 79.6037 14.3178 80.3535 14.3178C81.1033 14.3178 81.7123 13.7088 81.7123 12.959H81.709Z"
+        fill="url(#paint2_linear_3364_2463)"
+      />
+      <path
+        id="Vector_4"
+        d="M81.7092 17.061V18.7341H83.8963C84.6232 18.7341 85.2191 19.33 85.2191 20.0569C85.2191 20.7837 84.6952 21.4582 83.8963 21.4582H81.7092V35.1964C81.7092 35.7661 81.9417 36.2834 82.3182 36.6599C83.1433 37.485 84.6723 37.485 85.4974 36.6599C85.8739 36.2834 86.1064 35.7661 86.1064 35.1964V34.738C86.1064 33.9228 86.7481 33.4284 87.5241 33.4284C88.2444 33.4284 88.8337 34.0177 88.8337 34.738V35.1964C88.8337 36.5192 88.2935 37.7208 87.4258 38.5884C85.5432 40.471 82.2822 40.471 80.3996 38.5884C79.5319 37.7208 78.9917 36.5192 78.9917 35.1964V17.061C78.9917 16.272 79.6171 15.7383 80.3832 15.7383C81.1493 15.7383 81.706 16.3342 81.706 17.061H81.7092Z"
+        fill="url(#paint3_linear_3364_2463)"
+      />
+      <path
+        id="Vector_5"
+        d="M75.4293 38.6377C75.4293 39.358 74.8399 39.9441 74.1196 39.9441C73.3436 39.9441 72.7019 39.453 72.7019 38.6377V34.2013C72.7019 33.4809 73.2912 32.8916 74.0116 32.8916C74.7875 32.8916 75.4293 33.3827 75.4293 34.2013V38.6377Z"
+        fill="url(#paint4_linear_3364_2463)"
+      />
+      <path
+        id="Vector_6"
+        d="M11.7672 22.2907V31.6252H8.94164V26.9399H2.82557V31.6252H0V22.2907C0 14.5998 11.7672 14.4983 11.7672 22.2907ZM44.3808 31.6252C48.5618 31.6252 51.9506 28.2365 51.9506 24.0554C51.9506 19.8744 48.5618 16.4857 44.3808 16.4857C40.1997 16.4857 36.811 19.8744 36.811 24.0554C36.811 28.2365 40.1997 31.6252 44.3808 31.6252ZM44.3808 28.7309C41.8008 28.7309 39.7086 26.6387 39.7086 24.0587C39.7086 21.4787 41.8008 19.3865 44.3808 19.3865C46.9608 19.3865 49.053 21.4787 49.053 24.0587C49.053 26.6387 46.9608 28.7309 44.3808 28.7309ZM37.3218 16.4857V19.2097H33.2095V31.6252H30.4854V19.2097H26.3731V16.4857H37.3218ZM25.0111 25.8202V16.4857H22.1855V25.8202C22.1855 30.0242 16.0661 29.9489 16.0661 25.8202V16.4857H13.2406V25.8202C13.2406 33.5111 25.0078 33.6126 25.0078 25.8202H25.0111ZM8.94164 24.2159V22.294C8.94164 18.09 2.8223 18.1653 2.8223 22.294V24.2159H8.94164Z"
+        fill="#000030"
+      />
+      <path
+        id="Vector_7"
+        d="M87.4713 32.257C88.2434 32.257 88.8693 31.6311 88.8693 30.859C88.8693 30.0869 88.2434 29.4609 87.4713 29.4609C86.6992 29.4609 86.0732 30.0869 86.0732 30.859C86.0732 31.6311 86.6992 32.257 87.4713 32.257Z"
+        fill="#669CF6"
+      />
+      <path
+        id="Vector_8"
+        d="M49.2167 39.9475C49.9888 39.9475 50.6147 39.3215 50.6147 38.5494C50.6147 37.7773 49.9888 37.1514 49.2167 37.1514C48.4445 37.1514 47.8186 37.7773 47.8186 38.5494C47.8186 39.3215 48.4445 39.9475 49.2167 39.9475Z"
+        fill="#669CF6"
+      />
+    </g>
+    <defs>
+      <linearGradient
+        id="paint0_linear_3364_2463"
+        x1="62.7328"
+        y1="20.9589"
+        x2="62.7328"
+        y2="33.2932"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#000030" />
+        <stop offset="1" stopColor="#9900FF" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_3364_2463"
+        x1="47.5336"
+        y1="20.947"
+        x2="47.5336"
+        y2="33.2951"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#000030" />
+        <stop offset="1" stopColor="#4285F4" />
+      </linearGradient>
+      <linearGradient
+        id="paint2_linear_3364_2463"
+        x1="69.4138"
+        y1="6.17402"
+        x2="48.0898"
+        y2="-3.94009"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#4285F4" />
+        <stop offset="1" stopColor="#9900FF" />
+      </linearGradient>
+      <linearGradient
+        id="paint3_linear_3364_2463"
+        x1="74.2976"
+        y1="15.7136"
+        x2="74.2976"
+        y2="34.5465"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#000030" />
+        <stop offset="1" stopColor="#4285F4" />
+      </linearGradient>
+      <linearGradient
+        id="paint4_linear_3364_2463"
+        x1="64.3579"
+        y1="24.1914"
+        x2="65.0886"
+        y2="30.9756"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#4285F4" />
+        <stop offset="1" stopColor="#9900FF" />
+      </linearGradient>
+      <clipPath id="clip0_3364_2463">
+        <rect width="88.8696" height="40" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+));
+
 export const IconBuilder = createIcon((props) => <IconToyBrick {...props} />);
 
 export enum IconType {
@@ -1709,6 +1831,7 @@ export enum IconType {
   UploadCloud,
   Settings,
   LogOut,
+  AutoGPTLogo,
 }
 
 export function getIconForSocial(