tweak(platform): Update Nav Menu styling (#8148)

* easy nav ui changes

* teaked mobile nav menu

autogpt_platform/frontend/package.json

@@ -54,7 +54,7 @@
     "react-day-picker": "^8.10.1",
     "react-dom": "^18",
     "react-hook-form": "^7.52.1",
-    "react-icons": "^5.2.1",
+    "react-icons": "^5.3.0",
     "react-markdown": "^9.0.1",
     "react-modal": "^3.16.1",
     "react-shepherd": "^6.1.1",

autogpt_platform/frontend/src/components/CreditButton.tsx

@@ -22,10 +22,10 @@ export default function CreditButton() {
       <Button
         onClick={fetchCredit}
         variant="outline"
-        className="flex items-center space-x-2 text-muted-foreground"
+        className="flex items-center space-x-2 rounded-xl bg-gray-200"
       >
-        <span className="flex items-center">
-          <IconCoin /> {credit}
+        <span className="mr-2 flex items-center text-foreground">
+          {credit} <span className="ml-2 text-muted-foreground"> credits</span>
         </span>
         <IconRefresh />
       </Button>

autogpt_platform/frontend/src/components/NavBar.tsx

@@ -15,6 +15,9 @@ import {
 } from "@/components/ui/icons";
 import AutoGPTServerAPI from "@/lib/autogpt-server-api";
 import CreditButton from "@/components/CreditButton";
+import { BsBoxes } from "react-icons/bs";
+import { LuLaptop } from "react-icons/lu";
+import { LuShoppingCart } from "react-icons/lu";
 
 export async function NavBar() {
   const isAvailable = Boolean(
@@ -24,7 +27,7 @@ export async function NavBar() {
   const { user } = await getServerUser();
 
   return (
-    <header className="sticky top-0 z-50 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
+    <header className="sticky top-0 z-50 flex h-16 items-center gap-4 border-b bg-background px-4 md:rounded-b-3xl md:px-6 md:shadow-md">
       <div className="flex flex-1 items-center gap-4">
         <Sheet>
           <SheetTrigger asChild>
@@ -40,64 +43,58 @@ export async function NavBar() {
           <SheetContent side="left">
             <nav className="grid gap-6 text-lg font-medium">
               <Link
-                href="/"
-                className="flex flex-row gap-2 text-muted-foreground hover:text-foreground"
+                href="/marketplace"
+                className="mt-4 flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
               >
-                <IconSquareActivity /> Monitor
+                <LuShoppingCart /> Marketplace
+              </Link>
+              <Link
+                href="/"
+                className="flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
+              >
+                <LuLaptop /> Monitor
               </Link>
               <Link
                 href="/build"
-                className="flex flex-row gap-2 text-muted-foreground hover:text-foreground"
+                className="flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
               >
-                <IconWorkFlow /> Build
-              </Link>
-              <Link
-                href="/marketplace"
-                className="flex flex-row gap-2 text-muted-foreground hover:text-foreground"
-              >
-                <IconPackage2 /> Marketplace
+                <BsBoxes /> Build
               </Link>
             </nav>
           </SheetContent>
         </Sheet>
-        <nav className="hidden md:flex md:flex-row md:items-center md:gap-5 lg:gap-6">
+        <nav className="hidden md:flex md:flex-row md:items-center md:gap-7 lg:gap-8">
+          <div className="flex h-10 w-20 flex-1 flex-row items-center justify-center gap-2">
+            <a href="https://agpt.co/">
+              <Image
+                src="/AUTOgpt_Logo_dark.png"
+                alt="AutoGPT Logo"
+                width={100}
+                height={40}
+                priority
+              />
+            </a>
+          </div>
+          <Link
+            href="/marketplace"
+            className="text-basehover:text-foreground flex flex-row items-center gap-2 font-semibold text-foreground"
+          >
+            <LuShoppingCart /> Marketplace
+          </Link>
           <Link
             href="/"
-            className="flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
+            className="text-basehover:text-foreground flex flex-row items-center gap-2 font-semibold text-foreground"
           >
-            <IconSquareActivity /> Monitor
+            <LuLaptop className="mr-1" /> Monitor
           </Link>
           <Link
             href="/build"
-            className="flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
+            className="flex flex-row items-center gap-2 text-base font-semibold text-foreground hover:text-foreground"
           >
-            <IconWorkFlow /> Build
-          </Link>
-          <Link
-            href="/marketplace"
-            className="flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
-          >
-            <IconPackage2 /> Marketplace
+            <BsBoxes className="mr-1" /> Build
           </Link>
         </nav>
       </div>
-      <div className="relative flex flex-1 justify-center">
-        <a
-          className="pointer-events-auto flex place-items-center gap-2"
-          href="https://news.agpt.co/"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          By{" "}
-          <Image
-            src="/AUTOgpt_Logo_dark.png"
-            alt="AutoGPT Logo"
-            width={100}
-            height={20}
-            priority
-          />
-        </a>
-      </div>
       <div className="flex flex-1 items-center justify-end gap-4">
         {isAvailable && user && <CreditButton />}