improve nav bar

frontend/src/components/v2/Badge/Badge.tsx

@@ -20,11 +20,11 @@ const badgeVariants = cva(
         success: "bg-green/20 text-green",
         org: "bg-org-v1/20 text-org-v1 [&_svg]:text-org-v1 flex items-center opacity-100 hover:bg-org-v1/10 [&_svg]:size-3 gap-x-1 w-min whitespace-nowrap",
         namespace:
-          "bg-namespace-v1/20 text-namespace-v1 [&_svg]:text-namespace-v1 flex opacity-100 hover:bg-namespace-v1/10 items-center [&_svg]:size-3.5 gap-x-1 w-min whitespace-nowrap",
+          "bg-namespace-v1/20 text-namespace-v1 [&_svg]:text-namespace-v1 flex opacity-100 hover:bg-namespace-v1/10 items-center [&_svg]:size-3.5 gap-x-1.5 w-min whitespace-nowrap",
         project:
-          "bg-primary/10 text-primary [&_svg]:text-primary opacity-100 hover:bg-primary/10 flex items-center [&_svg]:size-3 w-min gap-x-1 whitespace-nowrap",
+          "bg-primary/10 text-primary [&_svg]:text-primary opacity-100 hover:bg-primary/10 flex items-center [&_svg]:size-3 w-min gap-x-1.5 whitespace-nowrap",
         instance:
-          "bg-mineshaft-200/20 text-mineshaft-200 [&_svg]:text-mineshaft-200 opacity-100 hover:bg-mineshaft-200/20 flex items-center [&_svg]:size-3 gap-x-1 w-min whitespace-nowrap"
+          "bg-mineshaft-200/20 text-mineshaft-200 [&_svg]:text-mineshaft-200 opacity-100 hover:bg-mineshaft-200/20 flex items-center [&_svg]:size-3 gap-x-1.5 w-min whitespace-nowrap"
       }
     }
   }

frontend/src/components/v2/PageHeader/PageHeader.tsx

@@ -18,12 +18,12 @@ type Props = {
 
 const SCOPE_NAME: Record<NonNullable<Props["scope"]>, { label: string; icon: IconDefinition }> = {
   org: { label: "Organization", icon: faGlobe },
-  [ProjectType.SecretManager]: { label: "Secrets Management", icon: faCube },
+  [ProjectType.SecretManager]: { label: "Project", icon: faCube },
-  [ProjectType.CertificateManager]: { label: "PKI", icon: faCube },
+  [ProjectType.CertificateManager]: { label: "Project", icon: faCube },
-  [ProjectType.SSH]: { label: "SSH", icon: faCube },
+  [ProjectType.SSH]: { label: "Project", icon: faCube },
-  [ProjectType.KMS]: { label: "KMS", icon: faCube },
+  [ProjectType.KMS]: { label: "Project", icon: faCube },
-  [ProjectType.PAM]: { label: "PAM", icon: faCube },
+  [ProjectType.PAM]: { label: "Project", icon: faCube },
-  [ProjectType.SecretScanning]: { label: "Secret Scanning", icon: faCube },
+  [ProjectType.SecretScanning]: { label: "Project", icon: faCube },
   namespace: { label: "Namespace", icon: faCubes },
   instance: { label: "Server", icon: faServer }
 };

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

@@ -242,7 +242,8 @@ export const Navbar = () => {
                       variant="org"
                       className={twMerge(
                         "max-w-full min-w-0 cursor-pointer text-sm",
-                        !isOrgScope && "bg-transparent opacity-75"
+                        !isOrgScope &&
+                          "bg-transparent text-mineshaft-200 hover:bg-transparent hover:underline"
                       )}
                     >
                       <FontAwesomeIcon icon={faGlobe} />
@@ -349,7 +350,7 @@ export const Navbar = () => {
                 <p className="pr-3 pl-1 text-lg text-mineshaft-400/70">/</p>
                 {breadcrumbs ? (
                   <BreadcrumbContainer
-                    className="min-w-[10rem] flex-1"
+                    className="min-w-[15rem] flex-1"
                     breadcrumbs={[breadcrumbs[0]] as TBreadcrumbFormat[]}
                   />
                 ) : null}

frontend/src/layouts/PersonalSettingsLayout/PersonalSettingsLayout.tsx

@@ -1,10 +1,7 @@
 import { useTranslation } from "react-i18next";
-import { faArrowLeft, faMobile } from "@fortawesome/free-solid-svg-icons";
+import { faMobile } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Link, Outlet } from "@tanstack/react-router";
+import { Outlet } from "@tanstack/react-router";
-
-import { WishForm } from "@app/components/features/WishForm";
-import { Navbar } from "@app/layouts/OrganizationLayout/components/NavBar";
 
 import { InsecureConnectionBanner } from "../OrganizationLayout/components/InsecureConnectionBanner";
 

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

@@ -35,10 +35,19 @@ import {
 import { getProjectHomePage } from "@app/helpers/project";
 import { usePopUp } from "@app/hooks";
 import { useGetUserProjects } from "@app/hooks/api";
-import { Project } from "@app/hooks/api/projects/types";
+import { Project, ProjectType } from "@app/hooks/api/projects/types";
 import { useUpdateUserProjectFavorites } from "@app/hooks/api/users/mutation";
 import { useGetUserProjectFavorites } from "@app/hooks/api/users/queries";
 
+const PROJECT_TYPE_NAME: Record<ProjectType, string> = {
+  [ProjectType.SecretManager]: "Secrets Management",
+  [ProjectType.CertificateManager]: "PKI",
+  [ProjectType.SSH]: "SSH",
+  [ProjectType.KMS]: "KMS",
+  [ProjectType.PAM]: "PAM",
+  [ProjectType.SecretScanning]: "Secret Scanning"
+};
+
 export const ProjectSelect = () => {
   const [searchProject, setSearchProject] = useState("");
   const { currentProject: currentWorkspace } = useProject();
@@ -106,11 +115,16 @@ export const ProjectSelect = () => {
           params={{
             projectId: currentWorkspace.id
           }}
-          className="overflow-hidden"
+          className="group flex cursor-pointer items-center gap-x-1.5 overflow-hidden hover:text-white"
         >
-          <Badge variant="project" className="max-w-full min-w-0 cursor-pointer text-sm">
+          <p className="inline-block truncate text-mineshaft-200 group-hover:underline">
+            {currentWorkspace?.name}
+          </p>
+          <Badge variant="project" className="cursor-pointer">
             <FontAwesomeIcon icon={faCube} />
-            <p className="truncate">{currentWorkspace?.name}</p>
+            <span>
+              {currentWorkspace.type ? PROJECT_TYPE_NAME[currentWorkspace.type] : "Project"}
+            </span>
           </Badge>
         </Link>
         <DropdownMenuTrigger asChild>

frontend/src/pages/public/ErrorPage/ErrorPage.tsx

@@ -17,7 +17,7 @@ export const ErrorPage = ({ error }: ErrorComponentProps) => {
   }
 
   return (
-    <div className="flex h-screen w-screen items-center justify-center bg-mineshaft-900">
+    <div className="flex h-full items-center justify-center">
       <div className="flex max-w-3xl flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-8 text-center text-mineshaft-200">
         <FontAwesomeIcon icon={faBugs} className="my-2 inline text-6xl" />
         <p>