Feature/2724/password security fixes (#2737)

* renamed an interface to match the proper syntax

* Fixed the modal pop up and some other visual stuff

* added dynamic update button disabling

* removed unnecessary log

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

src/pages/edit-profile/EditProfile.tsx

@@ -70,6 +70,9 @@ const EditProfile = () => {
   const isTabInvalid =
     errorTooltipHolders.profile || errorTooltipHolders.professionalInfo
 
+  const isPasswordSecurityTab =
+    activeTab === UserProfileTabsEnum.PasswordAndSecurity
+
   const hasChanges = (
     initialData: Partial<EditProfileState>,
     currentData: Partial<EditProfileState>
@@ -211,7 +214,7 @@ const EditProfile = () => {
         </Box>
         <AppButton
           component={Link}
-          disabled={!isChanged || isTabInvalid}
+          disabled={!isChanged || isTabInvalid || isPasswordSecurityTab}
           onClick={() => void handleUpdateUser()}
           size={SizeEnum.Large}
           sx={styles.updateBtn}