Skip to content

Commit 1d71eff

Browse files
rohan-chaturvedirohan-chaturvedi
committed
fix: env page padding
Signed-off-by: rohan <rohan.chaturvedi@protonmail.com>
1 parent 5301b8e commit 1d71eff

File tree

1 file changed

+96
-96
lines changed
  • frontend/app/[team]/apps/[app]/environments/[environment]/[[...path]]

1 file changed

+96
-96
lines changed

‎frontend/app/[team]/apps/[app]/environments/[environment]/[[...path]]/page.tsx‎

Lines changed: 96 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1033,107 +1033,107 @@ export default function EnvironmentPath({
10331033

10341034
return (
10351035
<SecretReferenceContext.Provider value={referenceContext}>
1036-
<div className="h-full max-h-screen overflow-y-auto w-full text-black dark:text-white">
1037-
{keyring !== null && !loading && (
1038-
<div className="flex flex-col py-4 bg-zinc-200 dark:bg-zinc-900">
1039-
<div className="flex items-center gap-8 justify-between w-full">
1040-
<div className="flex items-center gap-8">
1041-
{envLinks.length > 1 ? (
1042-
<Menu as="div" className="relative group">
1043-
{({ open }) => (
1044-
<>
1045-
<Menu.Button as={Fragment}>
1046-
<div className="cursor-pointer flex items-center gap-2">
1047-
<h3 className="font-semibold text-xl">{environment.name}</h3>
1048-
<FaChevronDown
1049-
className={clsx(
1050-
'transition transform ease',
1051-
open
1052-
? 'rotate-180 text-black dark:text-white'
1053-
: 'rotate-0 text-neutral-500 group-hover:text-black group-hover:dark:text-white'
1054-
)}
1055-
/>
1056-
</div>
1057-
</Menu.Button>
1058-
<Transition
1059-
enter="transition duration-100 ease-out"
1060-
enterFrom="transform scale-95 opacity-0"
1061-
enterTo="transform scale-100 opacity-100"
1062-
leave="transition duration-75 ease-out"
1063-
leaveFrom="transform scale-100 opacity-100"
1064-
leaveTo="transform scale-95 opacity-0"
1065-
as="div"
1066-
className="absolute z-20 left-0 origin-bottom-left mt-2"
1067-
>
1068-
<Menu.Items as={Fragment}>
1069-
<div className="flex flex-col w-min divide-y divide-neutral-500/40 rounded-md bg-neutral-200 dark:bg-neutral-800 shadow-lg ring-1 ring-inset ring-neutral-500/40 focus:outline-none">
1070-
{envLinks.map((link: { label: string; href: string }) => (
1071-
<Menu.Item key={link.href} as={Fragment}>
1072-
{({ active }) => (
1073-
<Link
1074-
href={link.href}
1075-
className={clsx(
1076-
'text-black dark:text-white px-4 py-2 flex items-center justify-between gap-4 rounded-md',
1077-
active && 'bg-zinc-200 dark:bg-zinc-700'
1078-
)}
1079-
>
1080-
<div className="text-lg">{link.label}</div>
1081-
<FaExchangeAlt className="text-neutral-500" />
1082-
</Link>
1083-
)}
1084-
</Menu.Item>
1085-
))}
1036+
<div className="h-full max-h-screen overflow-y-auto w-full text-black dark:text-white px-8">
1037+
{keyring !== null && !loading && (
1038+
<div className="flex flex-col py-4 bg-zinc-200 dark:bg-zinc-900">
1039+
<div className="flex items-center gap-8 justify-between w-full">
1040+
<div className="flex items-center gap-8">
1041+
{envLinks.length > 1 ? (
1042+
<Menu as="div" className="relative group">
1043+
{({ open }) => (
1044+
<>
1045+
<Menu.Button as={Fragment}>
1046+
<div className="cursor-pointer flex items-center gap-2">
1047+
<h3 className="font-semibold text-xl">{environment.name}</h3>
1048+
<FaChevronDown
1049+
className={clsx(
1050+
'transition transform ease',
1051+
open
1052+
? 'rotate-180 text-black dark:text-white'
1053+
: 'rotate-0 text-neutral-500 group-hover:text-black group-hover:dark:text-white'
1054+
)}
1055+
/>
10861056
</div>
1087-
</Menu.Items>
1088-
</Transition>
1089-
</>
1090-
)}
1091-
</Menu>
1092-
) : (
1093-
<h3 className="font-semibold text-2xl">{environment.name}</h3>
1094-
)}
1095-
<div className="flex items-center gap-2">
1096-
<FolderBreadcrumbLinks path={params.path} />
1057+
</Menu.Button>
1058+
<Transition
1059+
enter="transition duration-100 ease-out"
1060+
enterFrom="transform scale-95 opacity-0"
1061+
enterTo="transform scale-100 opacity-100"
1062+
leave="transition duration-75 ease-out"
1063+
leaveFrom="transform scale-100 opacity-100"
1064+
leaveTo="transform scale-95 opacity-0"
1065+
as="div"
1066+
className="absolute z-20 left-0 origin-bottom-left mt-2"
1067+
>
1068+
<Menu.Items as={Fragment}>
1069+
<div className="flex flex-col w-min divide-y divide-neutral-500/40 rounded-md bg-neutral-200 dark:bg-neutral-800 shadow-lg ring-1 ring-inset ring-neutral-500/40 focus:outline-none">
1070+
{envLinks.map((link: { label: string; href: string }) => (
1071+
<Menu.Item key={link.href} as={Fragment}>
1072+
{({ active }) => (
1073+
<Link
1074+
href={link.href}
1075+
className={clsx(
1076+
'text-black dark:text-white px-4 py-2 flex items-center justify-between gap-4 rounded-md',
1077+
active && 'bg-zinc-200 dark:bg-zinc-700'
1078+
)}
1079+
>
1080+
<div className="text-lg">{link.label}</div>
1081+
<FaExchangeAlt className="text-neutral-500" />
1082+
</Link>
1083+
)}
1084+
</Menu.Item>
1085+
))}
1086+
</div>
1087+
</Menu.Items>
1088+
</Transition>
1089+
</>
1090+
)}
1091+
</Menu>
1092+
) : (
1093+
<h3 className="font-semibold text-2xl">{environment.name}</h3>
1094+
)}
1095+
<div className="flex items-center gap-2">
1096+
<FolderBreadcrumbLinks path={params.path} />
1097+
</div>
1098+
</div>
1099+
<div>
1100+
{unsavedChanges && (
1101+
<DeployPreview
1102+
clientSecrets={clientSecrets}
1103+
serverSecrets={serverSecrets}
1104+
secretsToDelete={secretsToDelete}
1105+
/>
1106+
)}
10971107
</div>
10981108
</div>
1099-
<div>
1100-
{unsavedChanges && (
1101-
<DeployPreview
1102-
clientSecrets={clientSecrets}
1103-
serverSecrets={serverSecrets}
1104-
secretsToDelete={secretsToDelete}
1105-
/>
1106-
)}
1107-
</div>
1108-
</div>
1109-
<div className="space-y-0 sticky top-0 z-5 bg-zinc-200/50 dark:bg-zinc-900/50 backdrop-blur">
1110-
<div className="flex items-center w-full justify-between border-b border-zinc-300 dark:border-zinc-700 py-4 backdrop-blur-md">
1111-
<div className="flex items-center gap-4">
1112-
<div className="relative flex items-center bg-zinc-100 dark:bg-zinc-800 rounded-md px-2">
1113-
<div className="">
1114-
<FaSearch className="text-neutral-500" />
1109+
<div className="space-y-0 sticky top-0 z-5 bg-zinc-200/50 dark:bg-zinc-900/50 backdrop-blur">
1110+
<div className="flex items-center w-full justify-between border-b border-zinc-300 dark:border-zinc-700 py-4 backdrop-blur-md">
1111+
<div className="flex items-center gap-4">
1112+
<div className="relative flex items-center bg-zinc-100 dark:bg-zinc-800 rounded-md px-2">
1113+
<div className="">
1114+
<FaSearch className="text-neutral-500" />
1115+
</div>
1116+
<input
1117+
placeholder="Search keys or values"
1118+
className="custom bg-zinc-100 dark:bg-zinc-800 placeholder:text-neutral-500"
1119+
value={searchQuery}
1120+
onChange={(e) => setSearchQuery(e.target.value)}
1121+
/>
1122+
<FaTimesCircle
1123+
className={clsx(
1124+
'cursor-pointer text-neutral-500 transition-opacity ease',
1125+
searchQuery
1126+
? 'opacity-100 pointer-events-auto'
1127+
: 'opacity-0 pointer-events-none'
1128+
)}
1129+
role="button"
1130+
onClick={() => setSearchQuery('')}
1131+
/>
1132+
</div>
1133+
<div className="relative z-20">
1134+
<SortMenu sort={sort} setSort={setSort} />
11151135
</div>
1116-
<input
1117-
placeholder="Search keys or values"
1118-
className="custom bg-zinc-100 dark:bg-zinc-800 placeholder:text-neutral-500"
1119-
value={searchQuery}
1120-
onChange={(e) => setSearchQuery(e.target.value)}
1121-
/>
1122-
<FaTimesCircle
1123-
className={clsx(
1124-
'cursor-pointer text-neutral-500 transition-opacity ease',
1125-
searchQuery
1126-
? 'opacity-100 pointer-events-auto'
1127-
: 'opacity-0 pointer-events-none'
1128-
)}
1129-
role="button"
1130-
onClick={() => setSearchQuery('')}
1131-
/>
1132-
</div>
1133-
<div className="relative z-20">
1134-
<SortMenu sort={sort} setSort={setSort} />
11351136
</div>
1136-
</div>
11371137

11381138
<div className="flex gap-2 items-center">
11391139
{unsavedChanges && (

0 commit comments

Comments
 (0)