awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-07 21:27:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix ui for navbar

Browse Source
This commit is contained in:
Vladyslav Matsiiako
2025-07-02 01:16:51 +05:30
committed by =
parent 6734bf245f
commit ac6f79815a
3 changed files with 25 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/v2/Breadcrumb/Breadcrumb.tsx
+3 -7
View File
@@ -40,7 +40,7 @@ const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWitho
({ className, ...props }, ref) => ( ({ className, ...props }, ref) => (
<li <li
ref={ref} ref={ref}
className={twMerge("inline-flex items-center gap-1.5 font-medium", className)} className={twMerge("inline-flex text-sm items-center gap-1.5", className)}
{...props} {...props}
/> />
) )
@@ -80,11 +80,7 @@ BreadcrumbPage.displayName = "BreadcrumbPage";
const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => ( const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
<li role="presentation" aria-hidden="true" className={twMerge("", className)} {...props}> <li role="presentation" aria-hidden="true" className={twMerge("", className)} {...props}>
{children ?? ( {children ?? (
<FontAwesomeIcon <p className="text-lg text-mineshaft-400/70 px-2">/</p>
icon={faSlash}
className="rotate-90 font-medium text-bunker-300"
style={{ fontSize: "10px" }}
/>
)} )}
</li> </li>
); );
@@ -140,7 +136,7 @@ const BreadcrumbContainer = ({ breadcrumbs }: { breadcrumbs: TBreadcrumbFormat[]
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger> <DropdownMenuTrigger>
<BreadcrumbItem> <BreadcrumbItem>
<BreadcrumbSegment> <BreadcrumbSegment className="px-2 py-1 rounded-md py-2 hover:bg-mineshaft-600">
{el.label} <FontAwesomeIcon icon={faSort} size="sm" /> {el.label} <FontAwesomeIcon icon={faSort} size="sm" />
</BreadcrumbSegment> </BreadcrumbSegment>
</BreadcrumbItem> </BreadcrumbItem>
frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
+15 -24
View File
@@ -10,7 +10,6 @@ import {
faInfo, faInfo,
faInfoCircle, faInfoCircle,
faSignOut, faSignOut,
faSlash,
faSort, faSort,
faUser, faUser,
faUsers faUsers
@@ -161,27 +160,23 @@ export const Navbar = () => {
} }
return ( return (
<div className="z-10 flex h-12 items-center gap-1 border-b border-mineshaft-600 bg-mineshaft-800 px-4 py-2"> <div className="z-10 flex h-12 items-center border-b border-mineshaft-600 bg-mineshaft-800 px-4 py-2">
<div> <div>
<Link to="/organization/projects"> <Link to="/organization/projects">
<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>
<div className="flex items-center gap-2"> <div className="flex items-center">
<FontAwesomeIcon <p className="text-lg text-mineshaft-400/70 pl-2 pr-3">/</p>
icon={faSlash}
className="rotate-90 font-medium text-bunker-300"
style={{ fontSize: "10px" }}
/>
<DropdownMenu modal={false}> <DropdownMenu modal={false}>
<Link to="/organization/projects"> <Link to="/organization/projects">
<div className="flex cursor-pointer items-center gap-2 text-sm text-white"> <div className="flex cursor-pointer items-center gap-2 text-sm text-white">
<div> <div>
<FontAwesomeIcon icon={faCubes} className="text-xs" /> <FontAwesomeIcon icon={faCubes} className="text-xs pr-1" />
</div> </div>
<div className="max-w-32 overflow-hidden text-ellipsis">{currentOrg?.name}</div> <div className="max-w-32 overflow-hidden text-ellipsis">{currentOrg?.name}</div>
<div className="rounded border border-mineshaft-500 px-1 text-xs text-bunker-300"> <div className="rounded border border-mineshaft-500 px-1 mr-2 text-xs text-bunker-300">
{getPlan(subscription)} {getPlan(subscription)}
</div> </div>
</div> </div>
@@ -192,7 +187,7 @@ export const Navbar = () => {
variant="plain" variant="plain"
colorSchema="secondary" colorSchema="secondary"
ariaLabel="switch-org" ariaLabel="switch-org"
className="px-2 py-1" className="px-2 rounded-md py-2 hover:bg-mineshaft-600"
> >
<FontAwesomeIcon icon={faSort} className="text-xs text-bunker-300" /> <FontAwesomeIcon icon={faSort} className="text-xs text-bunker-300" />
</IconButton> </IconButton>
@@ -251,13 +246,9 @@ export const Navbar = () => {
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
<FontAwesomeIcon <p className="text-lg text-mineshaft-400/70 px-2">/</p>
icon={faSlash}
className="mr-1 rotate-90 font-medium text-bunker-300"
style={{ fontSize: "10px" }}
/>
</div> </div>
<div> <div className="pl-2">
{breadcrumbs ? ( {breadcrumbs ? (
<BreadcrumbContainer breadcrumbs={breadcrumbs as TBreadcrumbFormat[]} /> <BreadcrumbContainer breadcrumbs={breadcrumbs as TBreadcrumbFormat[]} />
) : null} ) : null}
@@ -268,14 +259,14 @@ export const Navbar = () => {
onMouseEnter={() => setOpenSupport(true)} onMouseEnter={() => setOpenSupport(true)}
onMouseLeave={() => setOpenSupport(false)} onMouseLeave={() => setOpenSupport(false)}
> >
<div className="mr-2"> <div className="border border-mineshaft-500 border-r-0 rounded-l-md px-2 py-1 hover:bg-mineshaft-600">
<FontAwesomeIcon icon={faCircleQuestion} size="lg" className="text-mineshaft-200" /> <FontAwesomeIcon icon={faCircleQuestion} className="text-mineshaft-200" />
</div> </div>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
align="end" align="end"
side="bottom" side="bottom"
className="p-1" className="p-1 mt-3"
onMouseEnter={() => setOpenSupport(true)} onMouseEnter={() => setOpenSupport(true)}
onMouseLeave={() => setOpenSupport(false)} onMouseLeave={() => setOpenSupport(false)}
> >
@@ -326,14 +317,14 @@ export const Navbar = () => {
onMouseEnter={() => setOpenUser(true)} onMouseEnter={() => setOpenUser(true)}
onMouseLeave={() => setOpenUser(false)} onMouseLeave={() => setOpenUser(false)}
> >
<div> <div className="border border-mineshaft-500 rounded-r-md px-2 py-1 hover:bg-mineshaft-600">
<FontAwesomeIcon icon={faUserCircle} size="lg" className="text-mineshaft-200" /> <FontAwesomeIcon icon={faUserCircle} className="text-mineshaft-200" />
</div> </div>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
side="bottom" side="bottom"
align="end" align="end"
className="p-1" className="p-1 mt-3"
onMouseEnter={() => setOpenUser(true)} onMouseEnter={() => setOpenUser(true)}
onMouseLeave={() => setOpenUser(false)} onMouseLeave={() => setOpenUser(false)}
> >
@@ -388,7 +379,7 @@ export const Navbar = () => {
content="This token is linked to your current login session and can only access resources within the organization you're currently logged into." content="This token is linked to your current login session and can only access resources within the organization you're currently logged into."
className="max-w-3xl" className="max-w-3xl"
> >
<FontAwesomeIcon icon={faInfoCircle} className="mb-[0.06rem] pl-1.5 text-xs" /> <FontAwesomeIcon icon={faInfoCircle} className="pl-1.5 text-xs" />
</Tooltip> </Tooltip>
</DropdownMenuItem> </DropdownMenuItem>
<div className="mt-1 h-1 border-t border-mineshaft-600" /> <div className="mt-1 h-1 border-t border-mineshaft-600" />
frontend/src/layouts/ProjectLayout/ProjectLayout.tsx
+7 -7
View File
@@ -94,7 +94,7 @@ export const ProjectLayout = () => {
params={{ projectId: currentWorkspace.id }} params={{ projectId: currentWorkspace.id }}
> >
<MenuItem <MenuItem
className="relative flex items-center gap-2 overflow-hidden" className="relative flex items-center gap-2 overflow-hidden rounded-none"
isSelected={isSecretManager} isSelected={isSecretManager}
leftIcon={<Lottie className="inline-block h-6 w-6 shrink-0" icon="vault" />} leftIcon={<Lottie className="inline-block h-6 w-6 shrink-0" icon="vault" />}
> >
@@ -116,7 +116,7 @@ export const ProjectLayout = () => {
params={{ projectId: currentWorkspace.id }} params={{ projectId: currentWorkspace.id }}
> >
<MenuItem <MenuItem
className="relative flex items-center gap-2 overflow-hidden" className="relative flex items-center gap-2 overflow-hidden rounded-none"
isSelected={isPki} isSelected={isPki}
leftIcon={<Lottie className="inline-block h-6 w-6 shrink-0" icon="note" />} leftIcon={<Lottie className="inline-block h-6 w-6 shrink-0" icon="note" />}
> >
@@ -136,7 +136,7 @@ export const ProjectLayout = () => {
params={{ projectId: currentWorkspace.id }} params={{ projectId: currentWorkspace.id }}
> >
<MenuItem <MenuItem
className="relative flex items-center gap-2 overflow-hidden" className="relative flex items-center gap-2 overflow-hidden rounded-none"
isSelected={isKms} isSelected={isKms}
leftIcon={<Lottie className="inline-block h-6 w-6 shrink-0" icon="unlock" />} leftIcon={<Lottie className="inline-block h-6 w-6 shrink-0" icon="unlock" />}
> >
@@ -156,7 +156,7 @@ export const ProjectLayout = () => {
params={{ projectId: currentWorkspace.id }} params={{ projectId: currentWorkspace.id }}
> >
<MenuItem <MenuItem
className="relative flex items-center gap-2 overflow-hidden" className="relative flex items-center gap-2 overflow-hidden rounded-none"
isSelected={isSsh} isSelected={isSsh}
leftIcon={ leftIcon={
<Lottie className="inline-block h-6 w-6 shrink-0" icon="terminal" /> <Lottie className="inline-block h-6 w-6 shrink-0" icon="terminal" />
@@ -178,7 +178,7 @@ export const ProjectLayout = () => {
params={{ projectId: currentWorkspace.id }} params={{ projectId: currentWorkspace.id }}
> >
<MenuItem <MenuItem
className="relative flex items-center gap-2 overflow-hidden" className="relative flex items-center gap-2 overflow-hidden rounded-none"
isSelected={isSecretScanning} isSelected={isSecretScanning}
leftIcon={ leftIcon={
<Lottie className="inline-block h-6 w-6 shrink-0" icon="secret-scan" /> <Lottie className="inline-block h-6 w-6 shrink-0" icon="secret-scan" />
@@ -206,7 +206,7 @@ export const ProjectLayout = () => {
> >
{({ isActive }) => ( {({ isActive }) => (
<MenuItem <MenuItem
className="relative flex items-center gap-2 overflow-hidden" className="relative flex items-center gap-2 overflow-hidden rounded-none"
isSelected={isActive} isSelected={isActive}
leftIcon={ leftIcon={
<Lottie className="inline-block h-6 w-6 shrink-0" icon="groups" /> <Lottie className="inline-block h-6 w-6 shrink-0" icon="groups" />
@@ -232,7 +232,7 @@ export const ProjectLayout = () => {
> >
{({ isActive }) => ( {({ isActive }) => (
<MenuItem <MenuItem
className="relative flex items-center gap-2 overflow-hidden" className="relative flex items-center gap-2 overflow-hidden rounded-none"
isSelected={isActive} isSelected={isActive}
leftIcon={ leftIcon={
<Lottie className="inline-block h-6 w-6 shrink-0" icon="settings-cog" /> <Lottie className="inline-block h-6 w-6 shrink-0" icon="settings-cog" />