Minor typos fixed and style changes

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>

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>
             )}

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 } }) => (

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>
             )}