fix: code styles

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

@@ -1,8 +1,41 @@
-import { Box, Typography, TextField, IconButton, Button } from '@mui/material';
-import { Edit, Refresh, TickCircle } from 'iconsax-react';
+import {
+  Box,
+  Typography,
+  TextField,
+  Button,
+  IconButton,
+  InputAdornment,
+  CircularProgress,
+} from '@mui/material';
+import { Edit2, TickCircle } from 'iconsax-react';
 import { CountDownTimer } from '@/components/CountDownTimer';
 import { Toast } from '@/components/Toast';
 import { CountryCodeSelector } from '../../CountryCodeSelector';
+import { Icon } from '@rkheftan/harmony-ui';
+
+interface PhoneEditFormProps {
+  phoneNumber: string;
+  setPhoneNumber: (v: string) => void;
+  countryCode: string;
+  setCountryCode: (v: string) => void;
+  verificationCode: string;
+  setVerificationCode: (v: string) => void;
+  isVerified: boolean;
+  isVerifying: boolean;
+  buttonState: 'default' | 'counting';
+  setButtonState: (v: 'default' | 'counting') => void;
+  handleSendCode: () => void;
+  handleVerifyClick: () => void;
+  error?: string;
+  inputError: boolean;
+  handleBlur: () => void;
+  textFieldRef: React.RefObject<HTMLDivElement>;
+  inputRef: React.RefObject<HTMLInputElement>;
+  phones: { phone: string; time: string; withCode: string }[];
+  showToast: boolean;
+  setShowToast: (v: boolean) => void;
+  t: (key: string) => string;
+}
 
 export default function PhoneEditForm({
   phoneNumber,
@@ -26,41 +59,34 @@ export default function PhoneEditForm({
   showToast,
   setShowToast,
   t,
-}: {
-  phoneNumber: string;
-  setPhoneNumber: (v: string) => void;
-  countryCode: string;
-  setCountryCode: (v: string) => void;
-  verificationCode: string;
-  setVerificationCode: (v: string) => void;
-  isVerified: boolean;
-  isVerifying: boolean;
-  buttonState: 'default' | 'counting';
-  setButtonState: (v: 'default' | 'counting') => void;
-  handleSendCode: () => void;
-  handleVerifyClick: () => void;
-  error?: string;
-  inputError: boolean;
-  handleBlur: () => void;
-  textFieldRef: React.RefObject<HTMLDivElement>;
-  inputRef: React.RefObject<HTMLInputElement>;
-  phones: { phone: string; time: string; withCode: string }[];
-  showToast: boolean;
-  setShowToast: (v: boolean) => void;
-  t: (key: string) => string;
-}) {
+}: PhoneEditFormProps) {
+  const isValidPhoneNumber = (phone: string) => {
+    const digitsOnly = phone.replace(/\D/g, '');
+    return digitsOnly.length >= 8 && digitsOnly.length <= 15;
+  };
+
   return (
-    <Box sx={{ px: { xs: 2, sm: 4 }, bgcolor: 'background.paper' }}>
-      <Box sx={{ mb: 2 }}>
-        <Typography variant="h6">{t('settingForm.editPhoneNumber')}</Typography>
-        <Typography variant="body2" color="text.secondary">
-          {t('settingForm.phoneNumberText')}({phones.map((p) => p.withCode)})
-          {t('settingForm.verb')}
-        </Typography>
+    <>
+      <Box sx={{ width: '100%' }}>
+        <Box sx={{ mb: 2, mx: 3 }}>
+          <Typography variant="h6">
+            {t('settingForm.editPhoneNumber')}
+          </Typography>
+          <Typography variant="body2" color="text.secondary">
+            {t('settingForm.phoneNumberText')}({phones.map((p) => p.withCode)})
+            {t('settingForm.verb')}
+          </Typography>
+        </Box>
       </Box>
 
       <Box
-        sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, alignItems: 'center' }}
+        sx={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: 2,
+          alignItems: 'center',
+          mx: 3,
+        }}
       >
         <TextField
           name="phoneNumber"
@@ -73,31 +99,29 @@ export default function PhoneEditForm({
           error={inputError}
           helperText={inputError ? error : ''}
           onChange={(e) => setPhoneNumber(e.target.value)}
-          sx={{ flex: '1 1 240px', minWidth: 0 }}
+          sx={{ flex: '1 1 220px', minWidth: 0 }}
           placeholder="09123456789"
-          inputProps={{ dir: 'rtl', style: { textAlign: 'right' } }}
           InputProps={{
             endAdornment:
               buttonState === 'counting' ? (
-                <IconButton
-                  size="small"
-                  onClick={() => {
-                    setButtonState('default');
-                    setPhoneNumber('');
-                  }}
-                  sx={{ mr: 1 }}
-                >
-                  <Edit size="24" color="#64B5F6" />
-                </IconButton>
-              ) : null,
-          }}
-          slotProps={{
-            htmlInput: {
-              dir: 'auto',
-              sx: { lineHeight: 1.5, paddingX: 0 },
-            },
-            input: {
-              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton
+                    size="small"
+                    onClick={() => {
+                      setButtonState('default');
+                      setPhoneNumber('');
+                      setVerificationCode('');
+                    }}
+                    edge="end"
+                  >
+                    <Icon
+                      Component={Edit2}
+                      color="primary.main"
+                      variant="Bold"
+                    />
+                  </IconButton>
+                </InputAdornment>
+              ) : (
                 <CountryCodeSelector
                   value={countryCode}
                   onChange={setCountryCode}
@@ -106,27 +130,37 @@ export default function PhoneEditForm({
                   onCloseFocusRef={inputRef}
                 />
               ),
-            },
           }}
         />
 
         {isVerified ? (
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-            <TickCircle size="24" style={{ color: '#43A047' }} variant="Bold" />
-            <Typography sx={{ color: 'success.main' }}>
-              {t('settingForm.successButton')}
-            </Typography>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 1,
+              color: 'success.main',
+            }}
+          >
+            <Icon Component={TickCircle} />
+            <Typography>{t('settingForm.successButton')}</Typography>
           </Box>
         ) : (
           <Button
             variant="text"
-            onClick={handleSendCode}
-            disabled={buttonState === 'counting' || phoneNumber.length === 0}
+            onClick={() => {
+              if (isValidPhoneNumber(phoneNumber)) {
+                handleSendCode();
+              }
+            }}
+            disabled={
+              buttonState === 'counting' ||
+              phoneNumber.length === 0 ||
+              !isValidPhoneNumber(phoneNumber)
+            }
             sx={{
-              textTransform: 'none',
-              minWidth: { xs: '100%', sm: 170 },
+              minWidth: { xs: '100%', sm: 220 },
               color: 'primary.main',
-              height: 56,
             }}
           >
             {buttonState === 'counting' ? (
@@ -149,6 +183,7 @@ export default function PhoneEditForm({
             gap: 2,
             mt: 2,
             alignItems: 'center',
+            mx: 3,
           }}
         >
           <TextField
@@ -161,7 +196,6 @@ export default function PhoneEditForm({
             }
             sx={{ flex: '1 1 240px', minWidth: 0 }}
             placeholder={t('settingForm.verificationCode')}
-            inputProps={{ dir: 'rtl', style: { textAlign: 'right' } }}
           />
 
           <Button
@@ -169,26 +203,12 @@ export default function PhoneEditForm({
             onClick={handleVerifyClick}
             disabled={isVerifying || verificationCode.length === 0}
             sx={{
-              textTransform: 'none',
-              minWidth: { xs: '100%', sm: 170 },
+              minWidth: { xs: '100%', sm: 220 },
               bgcolor: 'primary.main',
-              height: 56,
             }}
           >
             {isVerifying ? (
-              <Box
-                component="span"
-                sx={{
-                  display: 'flex',
-                  animation: 'spin 1s linear infinite',
-                  '@keyframes spin': {
-                    '0%': { transform: 'rotate(0deg)' },
-                    '100%': { transform: 'rotate(360deg)' },
-                  },
-                }}
-              >
-                <Refresh size="20" color="white" />
-              </Box>
+              <CircularProgress size={20} />
             ) : (
               t('settingForm.checkCode')
             )}
@@ -203,6 +223,6 @@ export default function PhoneEditForm({
       >
         {t('settingForm.successfulChangePhone')}
       </Toast>
-    </Box>
+    </>
   );
 }