feat: add navigation to forger password page, show password icon, toasts for different situations and changes of some styles

src/features/profile/components/userInformation/phoneNumber/PhoneEditForm.tsx

@@ -45,7 +45,7 @@ export default function PhoneEditForm({
   return (
     <>
       <Box sx={{ width: '100%' }}>
-        <Box sx={{ mb: 2, mx: 3 }}>
+        <Box sx={{ mb: 2, mx: 6 }}>
           <Typography variant="h6">
             {t('settingForm.editPhoneNumber')}
           </Typography>
@@ -59,10 +59,12 @@ export default function PhoneEditForm({
       <Box
         sx={{
           display: 'flex',
-          flexWrap: 'wrap',
+          flexWrap: 'nowrap',
           gap: 2,
           alignItems: 'center',
-          mx: 3,
+          mx: 6,
+          flexDirection: { xs: 'column', sm: 'row' },
+          mb: 1,
         }}
       >
         <TextField
@@ -76,8 +78,8 @@ export default function PhoneEditForm({
           error={inputError}
           helperText={inputError ? error : ''}
           onChange={(e) => setPhoneNumber(e.target.value)}
-          sx={{ flex: '1 1 220px' }}
           placeholder="09123456789"
+          sx={{ width: { xs: '100%', sm: 474 } }}
           InputProps={{
             endAdornment:
               buttonState === 'counting' ? (
@@ -142,9 +144,10 @@ export default function PhoneEditForm({
               !isValidPhoneNumber(phoneNumber)
             }
             sx={{
-              minWidth: { xs: '100%', sm: 220 },
+              whiteSpace: 'nowrap',
               color: 'primary.main',
               textTransform: 'none',
+              width: { xs: '100%', sm: 210 },
             }}
           >
             {isSending ? (
@@ -165,11 +168,12 @@ export default function PhoneEditForm({
         <Box
           sx={{
             display: 'flex',
-            flexWrap: 'wrap',
+            flexWrap: 'nowrap',
             gap: 2,
-            mt: 2,
             alignItems: 'center',
-            mx: 3,
+            mx: 6,
+            flexDirection: { xs: 'column', sm: 'row' },
+            mb: 1,
           }}
         >
           <TextField
@@ -180,7 +184,7 @@ export default function PhoneEditForm({
             onChange={(e) =>
               setVerificationCode(e.target.value.replace(/\D/g, ''))
             }
-            sx={{ flex: '1 1 240px', minWidth: 0 }}
+            sx={{ width: { xs: '100%', sm: 474 } }}
             placeholder={t('settingForm.verificationCode')}
           />
 
@@ -189,7 +193,7 @@ export default function PhoneEditForm({
             onClick={handleVerifyClick}
             disabled={isVerifying || verificationCode.length === 0}
             sx={{
-              minWidth: { xs: '100%', sm: 220 },
+              width: { xs: '100%', sm: 210 },
               bgcolor: 'primary.main',
               textTransform: 'none',
             }}