From fca003dfd76f87cb36d02076699b3382c3d4fd12 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Fri, 3 Feb 2023 20:09:28 -0800
Subject: [PATCH] Minor typos fixed and style changes

---
 .../components/basic/table/EnvironmentsTable.tsx |  2 +-
 frontend/src/components/v2/Button/Button.tsx     |  7 ++++---
 frontend/src/components/v2/Card/Card.tsx         |  4 ++--
 .../src/components/v2/IconButton/IconButton.tsx  | 16 ++++++++--------
 frontend/src/components/v2/Input/Input.tsx       |  6 +++---
 frontend/src/components/v2/Modal/Modal.tsx       |  4 ++--
 frontend/src/components/v2/Table/Table.tsx       |  6 +++---
 .../ProjectSettingsPage/ProjectSettingsPage.tsx  | 11 ++++++-----
 .../EnvironmentSection/EnvironmentSection.tsx    |  9 +++++----
 .../ProjectNameChangeSection.tsx                 |  4 ++--
 .../ServiceTokenSection/ServiceTokenSection.tsx  |  5 ++---
 11 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/frontend/src/components/basic/table/EnvironmentsTable.tsx b/frontend/src/components/basic/table/EnvironmentsTable.tsx
index 0583976dbb..37411c366e 100644
--- a/frontend/src/components/basic/table/EnvironmentsTable.tsx
+++ b/frontend/src/components/basic/table/EnvironmentsTable.tsx
@@ -148,7 +148,7 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
             ) : (
               <tr>
                 <td colSpan={4} className="pt-7 pb-4 text-center text-bunker-400">
-                  No environmants found
+                  No environments found
                 </td>
               </tr>
             )}
diff --git a/frontend/src/components/v2/Button/Button.tsx b/frontend/src/components/v2/Button/Button.tsx
index 27f34838da..e16e09128f 100644
--- a/frontend/src/components/v2/Button/Button.tsx
+++ b/frontend/src/components/v2/Button/Button.tsx
@@ -26,7 +26,7 @@ const buttonVariants = cva(
       colorSchema: {
         primary: ['bg-primary', 'text-black', 'border-primary hover:bg-opacity-80'],
         secondary: ['bg-mineshaft', 'text-gray-300', 'border-mineshaft hover:bg-opacity-80'],
-        danger: ['bg-red', 'text-white', 'border-red']
+        danger: ['bg-red', 'text-white', 'border-red hover:bg-opacity-90']
       },
       variant: {
         solid: '',
@@ -34,7 +34,7 @@ const buttonVariants = cva(
         plain: ''
       },
       isDisabled: {
-        true: 'bg-opacity-40 cursor-not-allowed',
+        true: 'bg-mineshaft opacity-40 cursor-not-allowed',
         false: ''
       },
       isFullWidth: {
@@ -147,7 +147,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           className={twMerge(
             'shrink-0 cursor-pointer transition-all',
             loadingToggleClass,
-            size === 'xs' ? 'mr-1' : 'mr-2'
+            leftIcon && 'ml-2',
+            size === 'xs' ? 'mr-1' : 'mr-3'
           )}
         >
           {leftIcon}
diff --git a/frontend/src/components/v2/Card/Card.tsx b/frontend/src/components/v2/Card/Card.tsx
index 9ddfb8a424..1f8448a038 100644
--- a/frontend/src/components/v2/Card/Card.tsx
+++ b/frontend/src/components/v2/Card/Card.tsx
@@ -8,7 +8,7 @@ export type CardTitleProps = {
 };
 
 export const CardTitle = ({ children, className, subTitle }: CardTitleProps) => (
-  <div className={twMerge('p-6 pb-4 font-sans text-xl font-medium', className)}>
+  <div className={twMerge('px-6 py-4 font-sans text-xl font-medium', className)}>
     {children}
     {subTitle && <p className="py-1 text-sm font-normal text-gray-400">{subTitle}</p>}
   </div>
@@ -29,7 +29,7 @@ export type CardBodyProps = {
 };
 
 export const CardBody = ({ children, className }: CardBodyProps) => (
-  <div className={twMerge('p-6 pb-4 pt-0', className)}>{children}</div>
+  <div className={twMerge('px-6 pb-6 pt-0', className)}>{children}</div>
 );
 
 export type CardProps = {
diff --git a/frontend/src/components/v2/IconButton/IconButton.tsx b/frontend/src/components/v2/IconButton/IconButton.tsx
index eb49196177..d0500ab80f 100644
--- a/frontend/src/components/v2/IconButton/IconButton.tsx
+++ b/frontend/src/components/v2/IconButton/IconButton.tsx
@@ -22,9 +22,9 @@ const iconButtonVariants = cva(
   {
     variants: {
       colorSchema: {
-        primary: ['bg-primary', 'text-black', 'border-primary hover:bg-opacity-80'],
-        secondary: ['bg-mineshaft', 'text-gray-300', 'border-mineshaft hover:bg-opacity-80'],
-        danger: ['bg-red', 'text-white', 'border-red']
+        primary: ['bg-primary', 'text-black', 'border-primary hover:opacity-80'],
+        secondary: ['bg-mineshaft', 'text-gray-300', 'border-mineshaft hover:bg-bunker-400'],
+        danger: ['bg-[#973939] hover:bg-red', 'text-white', 'border-red']
       },
       variant: {
         solid: '',
@@ -40,10 +40,10 @@ const iconButtonVariants = cva(
         false: ''
       },
       size: {
-        xs: ['text-xs', 'py-1', 'px-2'],
-        sm: ['text-sm', 'py-2', 'px-3'],
-        md: ['text-md', 'py-3', 'px-4'],
-        lg: ['text-lg', 'py-3', 'px-6']
+        xs: ['text-xs', 'py-2', 'px-2'],
+        sm: ['text-sm', 'py-3', 'px-3'],
+        md: ['text-md', 'py-4', 'px-4'],
+        lg: ['text-lg', 'py-6', 'px-6']
       }
     },
     compoundVariants: [
@@ -97,7 +97,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
       ariaLabel,
       isDisabled = false,
       className,
-      size = 'md',
+      size = 'sm',
       variant = 'solid',
       isRounded = true,
       colorSchema = 'primary',
diff --git a/frontend/src/components/v2/Input/Input.tsx b/frontend/src/components/v2/Input/Input.tsx
index 8c3685dacd..28524c72d4 100644
--- a/frontend/src/components/v2/Input/Input.tsx
+++ b/frontend/src/components/v2/Input/Input.tsx
@@ -12,7 +12,7 @@ type Props = {
 };
 
 const inputVariants = cva(
-  'input w-full py-2 text-gray-400 placeholder-gray-500 placeholder-opacity-50',
+  'input w-full py-2 text-gray-400 placeholder-gray-500 placeholder-opacity-50 outline-none focus:ring-2',
   {
     variants: {
       size: {
@@ -91,8 +91,8 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           ref={ref}
           disabled={isDisabled}
           className={twMerge(
-            leftIcon ? 'pl-9' : 'pl-4',
-            rightIcon ? 'pr-9' : 'pr-4',
+            leftIcon ? 'pl-9' : 'pl-2.5',
+            rightIcon ? 'pr-9' : 'pr-2.5',
             inputVariants({ className, isError, size, isRounded, variant })
           )}
         />
diff --git a/frontend/src/components/v2/Modal/Modal.tsx b/frontend/src/components/v2/Modal/Modal.tsx
index eea12fbc51..8c979473b1 100644
--- a/frontend/src/components/v2/Modal/Modal.tsx
+++ b/frontend/src/components/v2/Modal/Modal.tsx
@@ -36,9 +36,9 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
             <IconButton
               variant="plain"
               ariaLabel="close"
-              className="absolute top-2.5 right-2.5 rounded text-white hover:bg-gray-600"
+              className="absolute top-3 right-3 rounded text-white hover:bg-gray-600"
             >
-              <FontAwesomeIcon icon={faTimes} size="sm" className="cursor-pointer" />
+              <FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
             </IconButton>
           </DialogPrimitive.Close>
         </Card>
diff --git a/frontend/src/components/v2/Table/Table.tsx b/frontend/src/components/v2/Table/Table.tsx
index 3513bf62b6..d44ba77554 100644
--- a/frontend/src/components/v2/Table/Table.tsx
+++ b/frontend/src/components/v2/Table/Table.tsx
@@ -59,7 +59,7 @@ export type TrProps = {
 } & HTMLAttributes<HTMLTableRowElement>;
 
 export const Tr = ({ children, className, ...props }: TrProps): JSX.Element => (
-  <tr className={twMerge('border border-solid border-mineshaft-700', className)} {...props}>
+  <tr className={twMerge('border border-solid border-mineshaft-700 hover:bg-bunker-700', className)} {...props}>
     {children}
   </tr>
 );
@@ -71,7 +71,7 @@ export type ThProps = {
 };
 
 export const Th = ({ children, className }: ThProps): JSX.Element => (
-  <th className={twMerge('px-6 py-3 font-medium', className)}>{children}</th>
+  <th className={twMerge('px-5 pt-4 pb-3.5 font-medium font-semibold bg-bunker-500', className)}>{children}</th>
 );
 
 // table body
@@ -91,7 +91,7 @@ export type TdProps = {
 } & TdHTMLAttributes<HTMLTableCellElement>;
 
 export const Td = ({ children, className, ...props }: TdProps): JSX.Element => (
-  <td className={twMerge('px-6 py-3 text-left', className)} {...props}>
+  <td className={twMerge('px-5 py-2 text-left', className)} {...props}>
     {children}
   </td>
 );
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx b/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
index 02d49764fb..e6e8f317d2 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
@@ -64,6 +64,7 @@ export const ProjectSettingsPage = () => {
   const host = window.location.origin;
   const isEnvServiceAllowed =
     subscriptionPlan !== plans.starter || host !== 'https://app.infisical.com';
+  
 
   const onRenameWorkspace = async (name: string) => {
     try {
@@ -188,14 +189,14 @@ export const ProjectSettingsPage = () => {
       });
       console.log(res);
       createNotification({
-        text: 'Successfully created API token',
+        text: 'Successfully created a service token',
         type: 'success'
       });
       return res.serviceToken;
     } catch (error) {
       console.error(error);
       createNotification({
-        text: 'Failed to create API token',
+        text: 'Failed to create a service token',
         type: 'error'
       });
     }
@@ -251,13 +252,13 @@ export const ProjectSettingsPage = () => {
         workspaceName={currentWorkspace?.name || ''}
         onCreateToken={onCreateServiceToken}
       />
-      <div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md border-l border-red bg-white/5 px-6 pl-6 pb-4 pt-2">
+      <div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md border-l border-red bg-white/5 px-6 pl-6 pb-4 pt-4">
         <p className="text-xl font-bold text-red">{t('settings-project:danger-zone')}</p>
         <p className="text-md mt-2 text-gray-400">{t('settings-project:danger-zone-note')}</p>
         <div className="mr-auto mt-4 max-h-28 w-full max-w-md">
           <FormControl
             label={
-              <div className="mb-2 text-sm font-normal text-gray-400">
+              <div className="mb-0.5 text-sm font-normal text-gray-400">
                 Type <span className="font-bold">{currentWorkspace?.name}</span> to delete the
                 workspace
               </div>
@@ -278,7 +279,7 @@ export const ProjectSettingsPage = () => {
         >
           {t('settings-project:delete-project')}
         </Button>
-        <p className="mt-0.5 ml-1 text-xs text-gray-500">
+        <p className="mt-3 ml-0.5 text-xs text-gray-500">
           {t('settings-project:delete-project-note')}
         </p>
       </div>
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx
index bb7a0a87e4..521394f9f6 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx
@@ -1,5 +1,5 @@
 import { Controller, useForm } from 'react-hook-form';
-import { faPencil, faTrashCan } from '@fortawesome/free-solid-svg-icons';
+import { faPencil, faPlus, faTrashCan } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { yupResolver } from '@hookform/resolvers/yup';
 import * as yup from 'yup';
@@ -100,6 +100,7 @@ export const EnvironmentSection = ({
               }
             }}
             colorSchema="primary"
+            leftIcon={<FontAwesomeIcon icon={faPlus} />}
           >
             Add New Env
           </Button>
@@ -122,7 +123,7 @@ export const EnvironmentSection = ({
                   <Td>{slug}</Td>
                   <Td className="flex items-center justify-end">
                     <IconButton
-                      className="mr-4"
+                      className="mr-3"
                       onClick={() => {
                         if (isEnvServiceAllowed) {
                           handlePopUpOpen('createUpdateEnv', { name, slug });
@@ -154,8 +155,8 @@ export const EnvironmentSection = ({
               ))
             ) : (
               <Tr>
-                <Td colSpan={4} className="pt-7 pb-4 text-center text-bunker-400">
-                  No environmants found
+                <Td colSpan={4} className="pt-7 pb-5 text-center text-bunker-400">
+                  No environments found
                 </Td>
               </Tr>
             )}
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
index 876564e1f5..02b488b555 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
@@ -41,9 +41,9 @@ export const ProjectNameChangeSection = ({
 
   return (
     <form onSubmit={handleSubmit(onFormSubmit)}>
-      <div className="mb-6 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pb-4 pt-2">
+      <div className="mb-6 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pb-6 pt-3">
         <p className="mb-4 mt-2 text-xl font-semibold">{t('common:display-name')}</p>
-        <div className="mb-4 w-full max-w-lg">
+        <div className="mb-2 w-full max-w-lg">
           <Controller
             defaultValue=""
             render={({ field, fieldState: { error } }) => (
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/ServiceTokenSection.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/ServiceTokenSection.tsx
index bf83b0b4f0..052fdc6788 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/ServiceTokenSection.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/ServiceTokenSection.tsx
@@ -277,7 +277,6 @@ export const ServiceTokenSection = ({
                   <Td>{new Date(row.expiresAt).toUTCString()}</Td>
                   <Td className="flex items-center justify-end">
                     <IconButton
-                      className="mr-4"
                       onClick={() =>
                         handlePopUpOpen('deleteAPITokenConfirmation', {
                           name: row.name,
@@ -294,8 +293,8 @@ export const ServiceTokenSection = ({
               ))
             ) : (
               <Tr>
-                <Td colSpan={4} className="pt-7 pb-4 text-center text-bunker-400">
-                  No environmants found
+                <Td colSpan={4} className="py-6 text-center text-bunker-400">
+                  No service tokens found
                 </Td>
               </Tr>
             )}