improvement: update styling/consistency for navbar

frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx

@@ -4,13 +4,13 @@ import { faCircleQuestion, faUserCircle } from "@fortawesome/free-regular-svg-ic
 import {
   faArrowUpRightFromSquare,
   faBook,
+  faBuilding,
+  faCaretDown,
   faCheck,
-  faCubes,
   faEnvelope,
   faInfo,
   faInfoCircle,
   faSignOut,
-  faSort,
   faUser,
   faUsers
 } from "@fortawesome/free-solid-svg-icons";
@@ -186,16 +186,16 @@ export const Navbar = () => {
           <img alt="infisical logo" src="/images/logotransparent.png" className="h-4" />
         </Link>
       </div>
+      <p className="pl-1 pr-3 text-lg text-mineshaft-400/70">/</p>
       <div className="flex items-center">
-        <p className="pl-2 pr-3 text-lg text-mineshaft-400/70">/</p>
         <DropdownMenu modal={false}>
           <Link to="/organization/projects">
-            <div className="flex cursor-pointer items-center gap-2 text-sm text-white transition-all duration-100 hover:text-primary-400">
+            <div className="group flex cursor-pointer items-center gap-2 text-sm text-white transition-all duration-100 hover:text-primary">
               <div>
-                <FontAwesomeIcon icon={faCubes} className="pr-1 text-xs" />
+                <FontAwesomeIcon icon={faBuilding} className="text-xs text-bunker-300" />
               </div>
               <div className="max-w-32 overflow-hidden text-ellipsis">{currentOrg?.name}</div>
-              <div className="mr-2 rounded border border-mineshaft-500 px-1 text-xs text-bunker-300">
+              <div className="mr-1 rounded border border-mineshaft-500 px-1 text-xs text-bunker-300 !no-underline">
                 {getPlan(subscription)}
               </div>
             </div>
@@ -206,9 +206,9 @@ export const Navbar = () => {
                 variant="plain"
                 colorSchema="secondary"
                 ariaLabel="switch-org"
-                className="rounded-md px-2 py-2 hover:bg-mineshaft-600"
+                className="px-2 py-1"
               >
-                <FontAwesomeIcon icon={faSort} className="text-xs text-bunker-300" />
+                <FontAwesomeIcon icon={faCaretDown} className="text-xs text-bunker-300" />
               </IconButton>
             </div>
           </DropdownMenuTrigger>
@@ -265,13 +265,11 @@ export const Navbar = () => {
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
-        <p className="px-2 text-lg text-mineshaft-400/70">/</p>
-      </div>
-      <div className="pl-2">
-        {breadcrumbs ? (
-          <BreadcrumbContainer breadcrumbs={breadcrumbs as TBreadcrumbFormat[]} />
-        ) : null}
       </div>
+      <p className="pl-1 pr-3 text-lg text-mineshaft-400/70">/</p>
+      {breadcrumbs ? (
+        <BreadcrumbContainer breadcrumbs={breadcrumbs as TBreadcrumbFormat[]} />
+      ) : null}
       <div className="flex-grow" />
       <DropdownMenu modal={false}>
         <DropdownMenuTrigger>

frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx

@@ -1,12 +1,12 @@
 import { useMemo, useState } from "react";
 import { faStar } from "@fortawesome/free-regular-svg-icons";
 import {
+  faCaretDown,
   faCheck,
-  faCube,
   faMagnifyingGlass,
   faPlus,
-  faSort,
-  faStar as faSolidStar
+  faStar as faSolidStar,
+  faTable
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, linkOptions } from "@tanstack/react-router";
@@ -99,7 +99,7 @@ export const ProjectSelect = () => {
   }, [workspaces, projectFavorites, currentWorkspace]);
 
   return (
-    <div className="flex w-full items-center gap-2">
+    <div className="-mr-2 flex w-full items-center gap-1">
       <DropdownMenu modal={false}>
         <Link
           to={getProjectHomePage(
@@ -109,9 +109,9 @@ export const ProjectSelect = () => {
             projectId: currentWorkspace.id
           }}
         >
-          <div className="flex cursor-pointer items-center gap-2 text-sm text-white duration-100 hover:text-primary-400">
+          <div className="flex cursor-pointer items-center gap-2 text-sm text-white duration-100 hover:text-primary">
             <div>
-              <FontAwesomeIcon icon={faCube} className="text-xs" />
+              <FontAwesomeIcon icon={faTable} className="text-xs text-bunker-300" />
             </div>
             <Tooltip content={currentWorkspace.name} className="max-w-96">
               <div className="max-w-32 overflow-hidden text-ellipsis whitespace-nowrap">
@@ -125,10 +125,10 @@ export const ProjectSelect = () => {
             <IconButton
               variant="plain"
               colorSchema="secondary"
-              ariaLabel="switch-org"
+              ariaLabel="switch-project"
               className="px-2 py-1"
             >
-              <FontAwesomeIcon icon={faSort} className="text-xs text-bunker-300" />
+              <FontAwesomeIcon icon={faCaretDown} className="text-xs text-bunker-300" />
             </IconButton>
           </div>
         </DropdownMenuTrigger>