Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Address UI layout misalignments on the SecretsOverviewPage #2593

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -809,8 +809,8 @@ export const SecretOverviewPage = () => {
<Table>
<THead>
<Tr className="sticky top-0 z-20 border-0">
<Th className="sticky left-0 z-20 min-w-[20rem] border-b-0 p-0">
<div className="flex items-center border-b border-r border-mineshaft-600 px-5 pt-3.5 pb-3">
<Th className="sticky left-0 z-20 min-w-[20rem] border-b border-r p-0">
<div className="flex items-center border-mineshaft-600 px-5 pt-3.5 pb-3">
Name
<IconButton
variant="plain"
Expand All @@ -837,10 +837,10 @@ export const SecretOverviewPage = () => {

return (
<Th
className="min-table-row min-w-[11rem] border-b-0 p-0 text-center"
className="min-table-row min-w-[11rem] border-b p-0 text-center"
key={`secret-overview-${name}-${index + 1}`}
>
<div className="flex items-center justify-center border-b border-mineshaft-600 px-5 pt-3.5 pb-[0.83rem]">
<div className="flex items-center justify-center border-mineshaft-600 px-5 pt-3.5 pb-3">
<button
type="button"
className="text-sm font-medium duration-100 hover:text-mineshaft-100"
Expand Down Expand Up @@ -980,15 +980,15 @@ export const SecretOverviewPage = () => {
</TBody>
<TFoot>
<Tr className="sticky bottom-0 z-10 border-0 bg-mineshaft-800">
<Td className="sticky left-0 z-10 border-0 bg-mineshaft-800 p-0">
<Td className="sticky left-0 z-10 border-t border-r border-mineshaft-600 g-mineshaft-800 p-0">
<div
className="w-full border-t border-r border-mineshaft-600"
className="w-full border-mineshaft-600"
style={{ height: "45px" }}
/>
</Td>
{visibleEnvs?.map(({ name, slug }) => (
<Td key={`explore-${name}-btn`} className="border-0 border-mineshaft-600 p-0">
<div className="flex w-full items-center justify-center border-r border-t border-mineshaft-600 px-5 py-2">
<Td key={`explore-${name}-btn`} className="border-t border-mineshaft-600 p-0">
<div className="flex w-full items-center justify-center border-mineshaft-600 px-5 py-2">
<Button
size="xs"
variant="outline_bg"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,11 +67,11 @@ export const SecretOverviewTableRow = ({
<>
<Tr isHoverable isSelectable onClick={() => setIsFormExpanded.toggle()} className="group">
<Td
className={`sticky left-0 z-10 bg-mineshaft-800 bg-clip-padding py-0 px-0 group-hover:bg-mineshaft-700 ${
isFormExpanded && "border-t-2 border-mineshaft-500"
className={`sticky left-0 z-10 border-r bg-mineshaft-800 bg-clip-padding py-0 px-0 group-hover:bg-mineshaft-700 ${
isFormExpanded ? "border-t-2 border-mineshaft-500" : "border-mineshaft-600"
}`}
>
<div className="h-full w-full border-r border-mineshaft-600 py-2.5 px-5">
<div className="h-full w-full border-mineshaft-600 py-2.5 px-5">
<div className="flex items-center space-x-5">
<div className="text-bunker-300">
<Checkbox
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
className="secret-table relative mb-2 flex w-full flex-row items-center justify-between overflow-hidden rounded-lg border border-solid border-mineshaft-700 bg-mineshaft-800 font-inter"
>
<div className="flex h-11 flex-1 flex-shrink-0 items-center">
<span className="flex h-full min-w-[11rem] items-center justify-start border-r-2 border-mineshaft-600 px-4">
<span className="flex h-full min-w-[11rem] items-center justify-start border-r border-mineshaft-600 px-4">
Key
</span>

Expand Down