From 5450c1126a17b3e443a55527d12d412736a98322 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Mon, 25 Sep 2023 23:24:29 -0700
Subject: [PATCH] minor style updates to the dashboard

---
 .../src/views/SecretMainPage/SecretMainPage.tsx   |  6 +++---
 .../components/ActionBar/ActionBar.tsx            | 11 ++++++-----
 .../SecretListView/SecretDetaiSidebar.tsx         |  2 ++
 .../components/SecretListView/SecretItem.tsx      | 15 +++++++++------
 .../SecretOverviewTableRow/SecretEditRow.tsx      |  3 ++-
 5 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/frontend/src/views/SecretMainPage/SecretMainPage.tsx b/frontend/src/views/SecretMainPage/SecretMainPage.tsx
index 8ebdc42a6..3bed3a945 100644
--- a/frontend/src/views/SecretMainPage/SecretMainPage.tsx
+++ b/frontend/src/views/SecretMainPage/SecretMainPage.tsx
@@ -257,15 +257,15 @@ export const SecretMainPage = () => {
           />
           <div
             className={twMerge(
-              "mt-6 overflow-auto thin-scrollbar bg-mineshaft-800 text-left text-bunker-300 rounded-md text-sm"
+              "mt-3 overflow-auto thin-scrollbar bg-mineshaft-800 text-left text-bunker-300 rounded-md text-sm border border-mineshaft-600"
             )}
           >
             <div className="flex flex-col ">
               {isNotEmtpy && (
                 <div className="flex font-medium border-b border-mineshaft-600">
-                  <div className="w-12 flex-shrink-0" />
+                  <div className="w-[2.8rem] px-4 py-3 flex-shrink-0" />
                   <div
-                    className="w-80 flex-shrink-0 border-r flex items-center border-mineshaft-600 px-4 py-2"
+                    className="w-80 flex-shrink-0 border-r flex items-center border-mineshaft-600 w-11 px-4 py-2"
                     role="button"
                     tabIndex={0}
                     onClick={handleSortToggle}
diff --git a/frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx b/frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx
index 0de8fcd2a..e9cfe8095 100644
--- a/frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx
+++ b/frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx
@@ -1,6 +1,6 @@
 import { subject } from "@casl/ability";
 import {
-  faAnglesDown,
+  faAngleDown,
   faCheckCircle,
   faChevronRight,
   faCodeCommit,
@@ -317,11 +317,11 @@ export const ActionBar = ({
                 variant="outline_bg"
                 className="rounded-l-none bg-mineshaft-600 p-3"
               >
-                <FontAwesomeIcon icon={faAnglesDown} />
+                <FontAwesomeIcon icon={faAngleDown} />
               </IconButton>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-              <div className="p-2 flex flex-col space-y-2">
+              <div className="p-1.5 flex flex-col space-y-1">
                 <ProjectPermissionCan
                   I={ProjectPermissionActions.Create}
                   a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
@@ -373,7 +373,7 @@ export const ActionBar = ({
           isMultiSelectActive && "h-16"
         )}
       >
-        <div className="text-bunker-300 flex items-center bg-mineshaft-800 mt-4 py-2 px-4 rounded-md">
+        <div className="text-bunker-300 flex items-center bg-mineshaft-800 mt-3.5 py-2 px-4 rounded-md border border-mineshaft-600">
           <Tooltip content="Clear">
             <IconButton variant="plain" ariaLabel="clear-selection" onClick={onResetSelectedSecret}>
               <FontAwesomeIcon icon={faMinusSquare} size="lg" />
@@ -391,8 +391,9 @@ export const ActionBar = ({
             {(isAllowed) => (
               <Button
                 variant="outline_bg"
+                colorSchema="danger"
                 leftIcon={<FontAwesomeIcon icon={faTrash} />}
-                className="ml-4 text-red-700"
+                className="ml-4"
                 onClick={() => handlePopUpOpen("bulkDeleteSecrets")}
                 isDisabled={!isAllowed}
                 size="xs"
diff --git a/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx b/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx
index 8c83460a1..73201615a 100644
--- a/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx
+++ b/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx
@@ -312,6 +312,8 @@ export const SecretDetailSidebar = ({
                           <Button
                             size="xs"
                             className="w-full"
+                            colorSchema="primary"
+                            variant="outline_bg"
                             leftIcon={<FontAwesomeIcon icon={faTag} />}
                             onClick={onCreateTag}
                             isDisabled={!isAllowed}
diff --git a/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx b/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx
index ff98f56e7..754a57103 100644
--- a/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx
+++ b/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx
@@ -193,11 +193,11 @@ export const SecretItem = memo(
                 id={`checkbox-${secret._id}`}
                 isChecked={isSelected}
                 onCheckedChange={() => onToggleSecretSelect(secret._id)}
-                className={twMerge("group-hover:flex hidden", isSelected && "flex")}
+                className={twMerge("group-hover:flex hidden ml-3", isSelected && "flex")}
               />
               <FontAwesomeIcon
                 icon={faKey}
-                className={twMerge("group-hover:hidden block", isSelected && "hidden")}
+                className={twMerge("group-hover:hidden block ml-3", isSelected && "hidden")}
               />
             </div>
             <div className="w-80 h-11 flex items-center px-4 py-2 flex-shrink-0">
@@ -211,7 +211,7 @@ export const SecretItem = memo(
                     autoCapitalization={currentWorkspace?.autoCapitalization}
                     variant="plain"
                     {...field}
-                    className="w-full focus:text-bunker-100 hover:ring-primary-400/50 hover:ring-1"
+                    className="w-full focus:text-bunker-100 focus:ring-transparent px-0"
                   />
                 )}
               />
@@ -232,7 +232,7 @@ export const SecretItem = memo(
                       isVisible={isVisible}
                       isReadOnly={isReadOnly}
                       {...field}
-                      containerClassName="hover:border-primary-400/50 border border-transparent px-2 py-1.5 rounded-md transition-all group-hover:mr-2"
+                      containerClassName="py-1.5 rounded-md transition-all group-hover:mr-2"
                     />
                   )}
                 />
@@ -247,7 +247,7 @@ export const SecretItem = memo(
                       key="secret-value"
                       isVisible={isVisible}
                       {...field}
-                      containerClassName="hover:border-primary-400/50 border border-transparent px-2 py-1.5 rounded-md transition-all group-hover:mr-2"
+                      containerClassName="py-1.5 rounded-md transition-all group-hover:mr-2"
                     />
                   )}
                 />
@@ -311,10 +311,12 @@ export const SecretItem = memo(
                         </DropdownMenuItem>
                       );
                     })}
-                    <DropdownMenuItem>
+                    <DropdownMenuItem className="px-1.5">
                       <Button
                         size="xs"
                         className="w-full"
+                        colorSchema="primary"
+                        variant="outline_bg"
                         leftIcon={<FontAwesomeIcon icon={faTag} />}
                         onClick={onCreateTag}
                       >
@@ -415,6 +417,7 @@ export const SecretItem = memo(
                       <IconButton
                         ariaLabel="delete-value"
                         variant="plain"
+                        colorSchema="danger"
                         size="md"
                         className="group-hover:opacity-100 opacity-0 p-0"
                         onClick={() => onDeleteSecret(secret)}
diff --git a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
index 84ee05ddd..38db3e6b4 100644
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
@@ -122,12 +122,13 @@ export const SecretEditRow = ({
               <Tooltip content="cancel">
                 <IconButton
                   variant="plain"
+                  colorSchema="danger"
                   ariaLabel="reset-value"
                   className="h-full"
                   onClick={handleFormReset}
                   isDisabled={isSubmitting}
                 >
-                  <FontAwesomeIcon icon={faXmark} />
+                  <FontAwesomeIcon icon={faXmark} className="hover:text-red" />
                 </IconButton>
               </Tooltip>
             </div>