From b592f4cb6da8dabf73f5e66f16b6613ff7b42abc Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Sun, 24 Mar 2024 22:00:30 -0700
Subject: [PATCH] update ui

---
 .../components/ActionBar/ActionBar.tsx               | 12 ++++++------
 .../CreateDynamicSecretForm.tsx                      |  6 +++---
 .../CreateDynamicSecretForm/SqlDatabaseInputForm.tsx |  5 +++--
 .../CreateDynamicSecretLease.tsx                     |  2 +-
 4 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx b/frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx
index ee3475ea4..dfe114044 100644
--- a/frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx
+++ b/frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx
@@ -338,14 +338,14 @@ export const ActionBar = ({
                 >
                   {(isAllowed) => (
                     <Button
-                      leftIcon={<FontAwesomeIcon icon={faFolderPlus} />}
+                      leftIcon={<FontAwesomeIcon icon={faFolderPlus} className="pr-2" />}
                       onClick={() => {
                         handlePopUpOpen("addFolder");
                         handlePopUpClose("misc");
                       }}
                       isDisabled={!isAllowed}
                       variant="outline_bg"
-                      className="h-10"
+                      className="h-10 text-left"
                       isFullWidth
                     >
                       Add Folder
@@ -358,14 +358,14 @@ export const ActionBar = ({
                 >
                   {(isAllowed) => (
                     <Button
-                      leftIcon={<FontAwesomeIcon icon={faFingerprint} />}
+                      leftIcon={<FontAwesomeIcon icon={faFingerprint} className="pr-2" />}
                       onClick={() => {
                         handlePopUpOpen("addDynamicSecret");
                         handlePopUpClose("misc");
                       }}
                       isDisabled={!isAllowed}
                       variant="outline_bg"
-                      className="h-10"
+                      className="h-10 text-left"
                       isFullWidth
                     >
                       Add Dynamic Secret
@@ -378,13 +378,13 @@ export const ActionBar = ({
                 >
                   {(isAllowed) => (
                     <Button
-                      leftIcon={<FontAwesomeIcon icon={faFileImport} />}
+                      leftIcon={<FontAwesomeIcon icon={faFileImport} className="pr-2" />}
                       onClick={() => {
                         handlePopUpOpen("addSecretImport");
                         handlePopUpClose("misc");
                       }}
                       variant="outline_bg"
-                      className="h-10"
+                      className="h-10 text-left"
                       isFullWidth
                       isDisabled={!isAllowed}
                     >
diff --git a/frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/CreateDynamicSecretForm.tsx b/frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/CreateDynamicSecretForm.tsx
index a7c24c09c..1a8e79001 100644
--- a/frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/CreateDynamicSecretForm.tsx
+++ b/frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/CreateDynamicSecretForm.tsx
@@ -41,7 +41,7 @@ export const CreateDynamicSecretForm = ({
     <Modal isOpen={isOpen} onOpenChange={(state) => handleFormReset(state)}>
       <ModalContent
         title="Dynamic secret setup"
-        subTitle="Secrets provisioned dynamically with a TTL"
+        subTitle="Set up secrets provisioned dynamically with a TTL."
         className="my-4 max-h-screen max-w-3xl overflow-scroll"
       >
         <AnimatePresence exitBeforeEnter>
@@ -53,10 +53,10 @@ export const CreateDynamicSecretForm = ({
               animate={{ opacity: 1, translateX: 0 }}
               exit={{ opacity: 0, translateX: -30 }}
             >
-              <div className="mb-4 ">Pick a service to connect</div>
+              <div className="mb-4 text-mineshaft-300">Select a service to connect to:</div>
               <div className="flex items-center space-x-4">
                 <div
-                  className="flex h-32 w-32 cursor-pointer flex-col items-center space-y-4 rounded border border-mineshaft-500 bg-bunker-700 p-6 transition-all hover:bg-bunker-600"
+                  className="flex h-32 w-32 cursor-pointer flex-col items-center space-y-4 rounded border border-mineshaft-500 bg-bunker-600 p-6 transition-all hover:bg-primary/10 hover:border-primary/70 hover:text-white"
                   role="button"
                   tabIndex={0}
                   onClick={() => {
diff --git a/frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/SqlDatabaseInputForm.tsx b/frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/SqlDatabaseInputForm.tsx
index 4c545aea9..69f9c8aca 100644
--- a/frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/SqlDatabaseInputForm.tsx
+++ b/frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/SqlDatabaseInputForm.tsx
@@ -168,8 +168,9 @@ export const SqlDatabaseInputForm = ({
           </div>
         </div>
         <div>
-          <div className="mb-4 border-b border-b-mineshaft-600 pb-2">Configuration</div>
+          <div className="mb-4 border-b border-mineshaft-500 pb-2 text-mineshaft-200 pl-1 mt-4 font-medium">Configuration</div>
           <div className="flex flex-col">
+            <div className="text-sm text-mineshaft-400 pl-1 pb-0.5">Service</div>
             <Controller
               control={control}
               name="provider.client"
@@ -281,7 +282,7 @@ export const SqlDatabaseInputForm = ({
               <Accordion
                 type="single"
                 collapsible
-                className="w-full bg-mineshaft-700"
+                className="w-full bg-mineshaft-700 mb-2"
               >
                 <AccordionItem value="advance-statements">
                   <AccordionTrigger>Modify SQL Statements</AccordionTrigger>
diff --git a/frontend/src/views/SecretMainPage/components/DynamicSecretListView/CreateDynamicSecretLease.tsx b/frontend/src/views/SecretMainPage/components/DynamicSecretListView/CreateDynamicSecretLease.tsx
index 4c7ee67b6..3cb6f7c4b 100644
--- a/frontend/src/views/SecretMainPage/components/DynamicSecretListView/CreateDynamicSecretLease.tsx
+++ b/frontend/src/views/SecretMainPage/components/DynamicSecretListView/CreateDynamicSecretLease.tsx
@@ -62,7 +62,7 @@ const renderOutputForm = (provider: DynamicSecretProviders, data: unknown) => {
         <OutputDisplay
           label="Database Password"
           value={DB_PASSWORD}
-          helperText="Important: Copy this information now. It will disappear after this.opy this values as you won't be able to see it again."
+          helperText="Important: Copy these credentials now. You will not be able to see them again after you close the modal."
         />
       </div>
     );