Fixed the modal pop up and some other visual stuff

src/containers/edit-profile/common.styles.ts

@@ -5,7 +5,6 @@ export const rootContainer = {
   display: 'flex',
   flexDirection: 'column',
   boxSizing: 'border-box',
-  rowGap: '10px',
   maxWidth: '768px',
   width: '100%',
   p: '20px 40px',

src/containers/edit-profile/password-security-tab/PasswordSecurityTab.styles.ts

@@ -13,22 +13,25 @@ export const styles = {
   },
   subtitle: {
     typography: TypographyVariantEnum.Body1,
-    mb: '15px'
+    mb: '24px'
   },
-  form: { display: 'flex', flexDirection: 'column', gap: '8px' },
+  form: { display: 'flex', flexDirection: 'column', gap: '24px' },
 
   passwordButtonsContainer: {
     display: 'flex',
     justifyContent: 'flex-end',
     alignItems: 'flex-end',
-    gap: '10px'
+    gap: '10px',
+    marginTop: '24px'
   },
 
   saveButton: {
-    gridColumn: { sm: 'span 3', md: 'span 3', lg: 'span 3' }
+    gridColumn: { sm: 'span 3', md: 'span 3', lg: 'span 3' },
+    width: '193px'
   },
   discardButton: {
-    gridColumn: { sm: 'span 1', md: 'span 2', lg: 'span 2' }
+    gridColumn: { sm: 'span 1', md: 'span 2', lg: 'span 2' },
+    width: '101px'
   },
   modalContainer: {
     display: 'flex',

src/containers/edit-profile/password-security-tab/change-password-modal/ChangePasswordModal.tsx

@@ -108,10 +108,9 @@ const ChangePasswordModal = () => {
     validations: validations
   })
 
-  const {
-    inputVisibility: currentPasswordVisibility,
-    showInputText: showCurrentPassword
-  } = useInputVisibility(errors.currentPassword)
+  const { showInputText: showCurrentPassword } = useInputVisibility(
+    errors.currentPassword
+  )
 
   const { inputVisibility: passwordVisibility, showInputText: showPassword } =
     useInputVisibility(errors.password)
@@ -150,7 +149,6 @@ const ChangePasswordModal = () => {
         <Box component={ComponentEnum.Form} onSubmit={handleSubmit}>
           <Box sx={styles.form}>
             <AppTextField
-              InputProps={currentPasswordVisibility}
               errorMsg={t(errors.currentPassword)}
               fullWidth
               label={t(

src/containers/edit-profile/password-security-tab/password-security-item/PasswordSecurityItem.styles.ts

@@ -18,6 +18,8 @@ export const styles = {
     p: '20px 0'
   },
   appButton: {
-    mt: '20px'
+    mt: '20px',
+    width: '192px',
+    height: '40px'
   }
 }