style: switch to chevrons and move org badge inside button

This commit is contained in:
Scott Wilson
2025-11-25 17:48:08 -08:00
parent f9fffad9ae
commit b607545c2f

View File

@@ -23,7 +23,7 @@ import {
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useQuery, useQueryClient } from "@tanstack/react-query"; import { useQuery, useQueryClient } from "@tanstack/react-query";
import { Link, useLocation, useNavigate, useRouter } from "@tanstack/react-router"; import { Link, useLocation, useNavigate, useRouter } from "@tanstack/react-router";
import { UserPlusIcon } from "lucide-react"; import { ChevronRight, UserPlusIcon } from "lucide-react";
import { twMerge } from "tailwind-merge"; import { twMerge } from "tailwind-merge";
import { Mfa } from "@app/components/auth/Mfa"; import { Mfa } from "@app/components/auth/Mfa";
@@ -279,12 +279,12 @@ export const Navbar = () => {
return ( return (
<div className="z-10 flex min-h-12 items-center bg-mineshaft-900 px-4"> <div className="z-10 flex min-h-12 items-center bg-mineshaft-900 px-4">
<div className="mr-auto flex h-full min-w-34 items-center"> <div className="mr-auto flex h-full min-w-34 items-center">
<div className="shrink-0"> <div className="mt-0.5 shrink-0">
<Link to="/organizations/$orgId/projects" params={{ orgId: currentOrg.id }}> <Link to="/organizations/$orgId/projects" params={{ orgId: currentOrg.id }}>
<img alt="infisical logo" src="/images/logotransparent.png" className="h-4" /> <img alt="infisical logo" src="/images/logotransparent.png" className="h-4" />
</Link> </Link>
</div> </div>
<p className="pr-3 pl-3 text-lg text-mineshaft-400/70">/</p> <ChevronRight size={18} className="mx-3 mt-[3px] text-mineshaft-400/70" />
{isServerAdminPanel ? ( {isServerAdminPanel ? (
<Link <Link
to="/admin" to="/admin"
@@ -326,10 +326,10 @@ export const Navbar = () => {
> >
<OrgIcon className={twMerge("size-[14px] shrink-0 text-org")} /> <OrgIcon className={twMerge("size-[14px] shrink-0 text-org")} />
<span className="truncate">{currentOrg?.name}</span> <span className="truncate">{currentOrg?.name}</span>
<Badge variant="org" className="hidden lg:inline-flex">
Organization
</Badge>
</button> </button>
<Badge variant="org" className="hidden lg:inline-flex">
Organization
</Badge>
{subscription.cardDeclined && ( {subscription.cardDeclined && (
<Tooltip <Tooltip
content={`Your payment could not be processed${subscription.cardDeclinedReason ? `: ${subscription.cardDeclinedReason}` : ""}. Please update your payment method to continue enjoying premium features.`} content={`Your payment could not be processed${subscription.cardDeclinedReason ? `: ${subscription.cardDeclinedReason}` : ""}. Please update your payment method to continue enjoying premium features.`}
@@ -536,7 +536,7 @@ export const Navbar = () => {
)} )}
{isProjectScope && ( {isProjectScope && (
<> <>
<p className="pr-3 pl-3 text-lg text-mineshaft-400/70">/</p> <ChevronRight size={18} className="mx-3 mt-[3px] text-mineshaft-400/70" />
<ProjectSelect /> <ProjectSelect />
</> </>
)} )}