Merge pull request #4104 from Infisical/update-navbar-styling

improvement(frontend): update styling/consistency for navbar

frontend/src/components/navigation/NavHeader.tsx

@@ -151,7 +151,7 @@ export default function NavHeader({
                 <div className="flex items-center space-x-2">
                   <span
                     className={twMerge(
-                      "text-sm font-semibold transition-all",
+                      "text-sm transition-all",
                       isHoveringCopyButton ? "text-bunker-200" : "text-bunker-300"
                     )}
                   >
@@ -198,7 +198,7 @@ export default function NavHeader({
                   }}
                   search={(query) => ({ ...query, secretPath: newSecretPath })}
                   className={twMerge(
-                    "text-sm font-semibold transition-all hover:text-primary",
+                    "text-sm transition-all hover:text-primary",
                     isHoveringCopyButton ? "text-primary" : "text-primary/80"
                   )}
                 >

frontend/src/components/navigation/SecretDashboardPathBreadcrumb.tsx

@@ -38,7 +38,7 @@ export const SecretDashboardPathBreadcrumb = ({
         <div className="group flex items-center space-x-2">
           <span
             className={twMerge(
-              "text-sm font-semibold transition-all",
+              "text-sm transition-all",
               isCopying ? "text-bunker-200" : "text-bunker-300"
             )}
           >
@@ -77,7 +77,7 @@ export const SecretDashboardPathBreadcrumb = ({
           }}
           search={(query) => ({ ...query, secretPath: newSecretPath })}
           className={twMerge(
-            "text-sm font-semibold transition-all hover:text-primary",
+            "text-sm transition-all hover:text-primary",
             isCopying && "text-primary"
           )}
         >

frontend/src/components/v2/Breadcrumb/Breadcrumb.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import React from "react";
-import { faEllipsis, faSort } from "@fortawesome/free-solid-svg-icons";
+import { faCaretDown, faEllipsis } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, ReactNode } from "@tanstack/react-router";
 import { LinkComponentProps } from "node_modules/@tanstack/react-router/dist/esm/link";
@@ -27,7 +27,7 @@ const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWi
     <ol
       ref={ref}
       className={twMerge(
-        "flex flex-wrap items-center gap-1.5 break-words text-sm text-bunker-100 sm:gap-2.5",
+        "flex flex-wrap items-center break-words text-sm text-bunker-100",
         className
       )}
       {...props}
@@ -56,7 +56,7 @@ const BreadcrumbLink = React.forwardRef<
   return (
     <div
       ref={ref}
-      className={twMerge("transition-colors hover:text-primary-400", className)}
+      className={twMerge("transition-colors hover:text-primary", className)}
       {...props}
     />
   );
@@ -79,7 +79,7 @@ BreadcrumbPage.displayName = "BreadcrumbPage";
 
 const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
   <li role="presentation" aria-hidden="true" className={twMerge("", className)} {...props}>
-    {children ?? <p className="px-2 text-lg text-mineshaft-400/70">/</p>}
+    {children ?? <p className="px-3 text-lg text-mineshaft-400/70">/</p>}
   </li>
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
@@ -134,12 +134,17 @@ const BreadcrumbContainer = ({ breadcrumbs }: { breadcrumbs: TBreadcrumbFormat[]
                 <DropdownMenu>
                   <DropdownMenuTrigger>
                     <BreadcrumbItem>
-                      <BreadcrumbSegment className="rounded-md px-2 py-1 py-2 hover:bg-mineshaft-600">
-                        {el.label} <FontAwesomeIcon icon={faSort} size="sm" />
+                      <BreadcrumbSegment className="rounded-md py-1 py-2">
+                        {el.label}{" "}
+                        <FontAwesomeIcon
+                          icon={faCaretDown}
+                          size="sm"
+                          className="ml-2 text-bunker-300"
+                        />
                       </BreadcrumbSegment>
                     </BreadcrumbItem>
                   </DropdownMenuTrigger>
-                  <DropdownMenuContent side="right" align="start">
+                  <DropdownMenuContent side="bottom" sideOffset={8} align="start">
                     {el?.dropdownTitle && <DropdownMenuLabel>{el.dropdownTitle}</DropdownMenuLabel>}
                     {el.links.map((i, dropIndex) => (
                       <Link

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>