From e18a606b234a288e720d05eaa96f4e1ad1cf16b5 Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Fri, 18 Oct 2024 14:47:31 -0700
Subject: [PATCH] improvements: adjust UI for alignment and remove checkbox
 separator

---
 frontend/src/views/SecretMainPage/SecretMainPage.tsx        | 3 +--
 .../views/SecretMainPage/components/ActionBar/ActionBar.tsx | 2 +-
 .../components/SecretImportListView/SecretImportItem.tsx    | 6 +++---
 .../src/views/SecretOverviewPage/SecretOverviewPage.tsx     | 3 +--
 .../components/SelectionPanel/SelectionPanel.tsx            | 2 +-
 5 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/frontend/src/views/SecretMainPage/SecretMainPage.tsx b/frontend/src/views/SecretMainPage/SecretMainPage.tsx
index d6e0e7cd7..f851c707c 100644
--- a/frontend/src/views/SecretMainPage/SecretMainPage.tsx
+++ b/frontend/src/views/SecretMainPage/SecretMainPage.tsx
@@ -391,7 +391,7 @@ const SecretMainPageContent = () => {
                           : ""
                       }
                     >
-                      <div>
+                      <div className="mr-6 ml-1">
                         <Checkbox
                           isDisabled={totalCount === 0}
                           id="checkbox-select-all-rows"
@@ -402,7 +402,6 @@ const SecretMainPageContent = () => {
                         />
                       </div>
                     </Tooltip>
-                    <div className="mx-2 h-4 w-[1px] bg-mineshaft-400" />
                     Key
                     <FontAwesomeIcon
                       icon={orderDirection === OrderByDirection.ASC ? faArrowDown : faArrowUp}
diff --git a/frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx b/frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx
index c383511ad..aa1ec5a1b 100644
--- a/frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx
+++ b/frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx
@@ -551,7 +551,7 @@ export const ActionBar = ({
               <FontAwesomeIcon icon={faMinusSquare} size="lg" />
             </IconButton>
           </Tooltip>
-          <div className="ml-4 flex-grow px-2 text-sm">
+          <div className="ml-2 flex-grow px-2 text-sm">
             {Object.keys(selectedSecrets).length} Selected
           </div>
           <ProjectPermissionCan
diff --git a/frontend/src/views/SecretMainPage/components/SecretImportListView/SecretImportItem.tsx b/frontend/src/views/SecretMainPage/components/SecretImportListView/SecretImportItem.tsx
index e7c6b526f..70eb8821a 100644
--- a/frontend/src/views/SecretMainPage/components/SecretImportListView/SecretImportItem.tsx
+++ b/frontend/src/views/SecretMainPage/components/SecretImportListView/SecretImportItem.tsx
@@ -158,17 +158,17 @@ export const SecretImportItem = ({
           }
         }}
       >
-        <div className="flex w-12 items-center px-4 py-2 text-green-700">
+        <div className="flex w-11 items-center py-2 pl-5 text-green-700">
           <FontAwesomeIcon icon={faFileImport} />
         </div>
-        <div className="flex flex-grow items-center px-4 py-2">
+        <div className="flex flex-grow items-center py-2 pl-4 pr-2">
           <EnvFolderIcon
             env={importEnv.slug || ""}
             secretPath={secretImport?.importPath || ""}
             // isReplication={isReplication}
           />
         </div>
-        <div className="flex items-center space-x-4 px-4 py-2">
+        <div className="flex items-center space-x-4 py-2 pr-4">
           {lastReplicated && (
             <Tooltip
               position="left"
diff --git a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
index 79613d07b..e18882501 100644
--- a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
+++ b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
@@ -881,7 +881,7 @@ export const SecretOverviewPage = () => {
                             : ""
                         }
                       >
-                        <div>
+                        <div className="mr-4 ml-2">
                           <Checkbox
                             isDisabled={totalCount === 0}
                             id="checkbox-select-all-rows"
@@ -891,7 +891,6 @@ export const SecretOverviewPage = () => {
                           />
                         </div>
                       </Tooltip>
-                      <div className="mx-2 h-4 w-[1px] bg-mineshaft-400" />
                       Name
                       <IconButton
                         variant="plain"
diff --git a/frontend/src/views/SecretOverviewPage/components/SelectionPanel/SelectionPanel.tsx b/frontend/src/views/SecretOverviewPage/components/SelectionPanel/SelectionPanel.tsx
index 60aaea04e..d7243e51a 100644
--- a/frontend/src/views/SecretOverviewPage/components/SelectionPanel/SelectionPanel.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/SelectionPanel/SelectionPanel.tsx
@@ -165,7 +165,7 @@ export const SelectionPanel = ({ secretPath, resetSelectedEntries, selectedEntri
               <FontAwesomeIcon icon={faMinusSquare} size="lg" />
             </IconButton>
           </Tooltip>
-          <div className="ml-4 flex-grow px-2 text-sm">{selectedCount} Selected</div>
+          <div className="ml-1 flex-grow px-2 text-sm">{selectedCount} Selected</div>
           {shouldShowDelete && (
             <Button
               variant="outline_bg"