awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-04 12:26:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: fixed padding in layout

Browse Source
This commit is contained in:
=
2025-07-02 01:16:49 +05:30
parent 1bfdbb7314
commit fb9c580e53
8 changed files with 68 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/layouts/KmsLayout/KmsLayout.tsx
+1 -1
View File
@@ -54,7 +54,7 @@ export const KmsLayout = () => {
</div> </div>
</nav> </nav>
</motion.div> </motion.div>
<div className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 p-4 dark:[color-scheme:dark]"> <div className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 p-4 pt-8">
<Outlet /> <Outlet />
</div> </div>
</div> </div>
frontend/src/layouts/OrganizationLayout/components/OrgSidebar/OrgSidebar.tsx
+61 -57
View File
@@ -9,14 +9,15 @@ import {
faPlug, faPlug,
faShare, faShare,
faUserCog, faUserCog,
faUsers faUsers,
faUserTie
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Link } from "@tanstack/react-router"; import { Link } from "@tanstack/react-router";
import { AnimatePresence, motion } from "framer-motion"; import { AnimatePresence, motion } from "framer-motion";
import { CreateOrgModal } from "@app/components/organization/CreateOrgModal"; import { CreateOrgModal } from "@app/components/organization/CreateOrgModal";
import { Menu, MenuGroup, MenuItem, Tooltip } from "@app/components/v2"; import { Button, Menu, MenuGroup, MenuItem, Tooltip } from "@app/components/v2";
import { useOrganization, useSubscription, useUser } from "@app/context"; import { useOrganization, useSubscription, useUser } from "@app/context";
import { usePopUp } from "@app/hooks"; import { usePopUp } from "@app/hooks";
import { useGetOrgTrialUrl } from "@app/hooks/api"; import { useGetOrgTrialUrl } from "@app/hooks/api";
@@ -46,9 +47,9 @@ export const OrgSidebar = ({ isHidden }: Props) => {
animate={{ opacity: 1, translateX: 0 }} animate={{ opacity: 1, translateX: 0 }}
exit={{ opacity: 0, translateX: -240 }} exit={{ opacity: 0, translateX: -240 }}
layout layout
className="dark z-10 w-60 border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900" className="dark z-10 w-60 border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 pb-4"
> >
<nav className="items-between flex h-full flex-col justify-between overflow-y-auto dark:[color-scheme:dark]"> <nav className="items-between flex h-full flex-col overflow-y-auto dark:[color-scheme:dark]">
<Menu> <Menu>
<MenuGroup title="Overview"> <MenuGroup title="Overview">
<Link to="/organization/projects"> <Link to="/organization/projects">
@@ -134,56 +135,16 @@ export const OrgSidebar = ({ isHidden }: Props) => {
)} )}
</Link> </Link>
</MenuGroup> </MenuGroup>
<MenuGroup title="Others">
<Link to="/organization/secret-sharing">
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<div className="mx-1">
<FontAwesomeIcon icon={faShare} className="mr-4" />
Share Secret
</div>
</MenuItem>
)}
</Link>
</MenuGroup>
<MenuGroup title="Admin Panels">
{user?.superAdmin && (
<Link to="/admin">
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<div className="mx-1">
<FontAwesomeIcon icon={faUserCog} className="mr-4" />
Server Admin Console
</div>
</MenuItem>
)}
</Link>
)}
<Link to="/organization/admin">
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<div className="mx-1">
<FontAwesomeIcon icon={faCog} className="mr-4" />
Org Admin Console
</div>
</MenuItem>
)}
</Link>
</MenuGroup>
</Menu> </Menu>
<div <div className="flex-grow" />
className={`relative mt-10 ${ <div>
subscription && subscription.slug === "starter" && !subscription.has_used_trial
? "mb-2"
: "mb-4"
} flex w-full cursor-default flex-col items-center px-1 text-sm text-mineshaft-400`}
>
{subscription && {subscription &&
subscription.slug === "starter" && subscription.slug === "starter" &&
!subscription.has_used_trial && ( !subscription.has_used_trial && (
<Tooltip content="Start Free Pro Trial" side="right"> <Tooltip content="Start Free Pro Trial">
<button <Button
type="button" variant="outline_bg"
className="w-full"
onClick={async () => { onClick={async () => {
if (!subscription || !currentOrg) return; if (!subscription || !currentOrg) return;
@@ -195,24 +156,67 @@ export const OrgSidebar = ({ isHidden }: Props) => {
window.location.href = url; window.location.href = url;
}} }}
className="mt-1.5 w-full" leftIcon={
>
<div className="justify-left mb-1.5 mt-1.5 flex w-full flex-col items-center rounded-md p-1 text-xs text-mineshaft-300 transition-all duration-150 hover:bg-mineshaft-500 hover:text-primary-400">
<FontAwesomeIcon <FontAwesomeIcon
icon={faInfinity} icon={faInfinity}
className="py-2 text-lg text-primary" className="py-2 text-lg text-primary"
/> />
Pro Trial }
</div> >
</button> Pro Trial
</Button>
</Tooltip> </Tooltip>
)} )}
</div> </div>
<div className="w-full p-2">
<Link to="/organization/secret-sharing">
<Button
variant="outline_bg"
className="w-full"
leftIcon={<FontAwesomeIcon icon={faShare} />}
>
Share Secret
</Button>
</Link>
</div>
<div className="flex gap-2 px-2">
<div className="flex-1">
{user.superAdmin ? (
<Tooltip content="Organization Admin" sideOffset={16}>
<Link to="/organization/admin">
<Button variant="outline_bg" className="w-full py-3">
<FontAwesomeIcon icon={faUserCog} size="lg" />
</Button>
</Link>
</Tooltip>
) : (
<Link to="/organization/admin">
<Button
variant="outline_bg"
className="w-full"
leftIcon={<FontAwesomeIcon icon={faUserCog} />}
>
Org Admin
</Button>
</Link>
)}
</div>
{user.superAdmin && (
<div className="flex-1">
<Tooltip content="Server Console Admin" sideOffset={16}>
<Link to="/admin">
<Button variant="outline_bg" className="w-full py-3">
<FontAwesomeIcon icon={faUserTie} size="lg" />
</Button>
</Link>
</Tooltip>
</div>
)}
</div>
</nav> </nav>
</motion.aside> </motion.aside>
)} )}
</AnimatePresence> </AnimatePresence>
<CreateOrgModal <CreateOrgModal
isOpen={popUp?.createOrg?.isOpen} isOpen={popUp?.createOrg?.isOpen}
onClose={() => handlePopUpToggle("createOrg", false)} onClose={() => handlePopUpToggle("createOrg", false)}
frontend/src/layouts/PkiManagerLayout/PkiManagerLayout.tsx
+1 -1
View File
@@ -87,7 +87,7 @@ export const PkiManagerLayout = () => {
</div> </div>
</nav> </nav>
</motion.div> </motion.div>
<div className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 p-4 dark:[color-scheme:dark]"> <div className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 p-4 pt-8">
<Outlet /> <Outlet />
</div> </div>
</div> </div>
frontend/src/layouts/ProjectGeneralLayout/ProjectGeneralLayout.tsx
+1 -1
View File
@@ -44,7 +44,7 @@ export const ProjectGeneralLayout = () => {
</div> </div>
</nav> </nav>
</motion.div> </motion.div>
<div className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 p-4 dark:[color-scheme:dark]"> <div className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 p-4 pt-8">
<Outlet /> <Outlet />
</div> </div>
</div> </div>
frontend/src/layouts/ProjectLayout/ProjectLayout.tsx
+1 -1
View File
@@ -322,7 +322,7 @@ export const ProjectLayout = () => {
</Menu> </Menu>
</nav> </nav>
</motion.div> </motion.div>
<div className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 dark:[color-scheme:dark]"> <div className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800">
{assumedPrivilegeDetails && <AssumePrivilegeModeBanner />} {assumedPrivilegeDetails && <AssumePrivilegeModeBanner />}
<Outlet /> <Outlet />
</div> </div>
frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx
+1 -1
View File
@@ -116,7 +116,7 @@ export const SecretManagerLayout = () => {
</div> </div>
</nav> </nav>
</motion.div> </motion.div>
<div className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 p-4 dark:[color-scheme:dark]"> <div className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 p-4 pt-8">
<Outlet /> <Outlet />
</div> </div>
</div> </div>
frontend/src/layouts/SecretScanningLayout/SecretScanningLayout.tsx
+1 -1
View File
@@ -52,7 +52,7 @@ export const SecretScanningLayout = () => {
</div> </div>
</nav> </nav>
</motion.div> </motion.div>
<div className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 p-4 dark:[color-scheme:dark]"> <div className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 p-4 pt-8">
<Outlet /> <Outlet />
</div> </div>
</div> </div>
frontend/src/layouts/SshLayout/SshLayout.tsx
+1 -1
View File
@@ -64,7 +64,7 @@ export const SshLayout = () => {
</div> </div>
</nav> </nav>
</motion.div> </motion.div>
<div className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 p-4 dark:[color-scheme:dark]"> <div className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 p-4 pt-8">
<Outlet /> <Outlet />
</div> </div>
</div> </div>