fix: styles

src/features/authentication/components/UserCompletionForm.tsx

@@ -19,7 +19,7 @@ export function UserCompletionForm() {
   const [verificationCode, setVerificationCode] = useState('');
   const [buttonState, setButtonState] = useState<
     'default' | 'counting' | 'sent'
-  >('default'); // default | counting | sent
+  >('default');
   const [countdown, setCountdown] = useState(60);
   const [emailVerified, setEmailVerified] = useState(false);
   const [isVerifyingCode, setIsVerifyingCode] = useState(false);
@@ -32,7 +32,6 @@ export function UserCompletionForm() {
   const validPassword =
     hasNumber && hasMinLength && hasUpperAndLower && hasSpecialChar;
   const [showPasswordValidations, setShowPasswordValidations] = useState(false);
-
   const correctEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
 
   useEffect(() => {
@@ -40,9 +39,7 @@ export function UserCompletionForm() {
       if (!validPassword) {
         setShowPasswordValidations(true);
       } else {
-        const timer = setTimeout(() => {
-          setShowPasswordValidations(false);
-        }, 1000);
+        const timer = setTimeout(() => setShowPasswordValidations(false), 1000);
         return () => clearTimeout(timer);
       }
     } else {
@@ -71,8 +68,7 @@ export function UserCompletionForm() {
     if (buttonState === 'counting') {
       const minutes = String(Math.floor(countdown / 60)).padStart(2, '0');
       const seconds = String(countdown % 60).padStart(2, '0');
-      const time = `${minutes}:${seconds}`;
-      return toPersianDigits(time);
+      return toPersianDigits(`${minutes}:${seconds}`);
     }
     return t('completion.vericationCodeButton');
   };
@@ -103,41 +99,38 @@ export function UserCompletionForm() {
   return (
     <Box
       sx={{
-        backgroundColor: '#F5F5F5',
+        backgroundColor: 'background.default',
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-        p: 2,
+        p: { xs: 1, sm: 2, md: 3 },
       }}
     >
       <Box
         sx={{
-          width: '730px',
-          backgroundColor: '#FFFFFF',
+          width: '100%',
+          maxWidth: '730px',
+          backgroundColor: 'background.paper',
           border: '1px solid #ccc',
           display: 'flex',
           flexDirection: 'column',
           gap: 2,
+          px: { xs: 2, sm: 4, md: 6 },
+          py: { xs: 3, sm: 4 },
         }}
       >
         <Box
           sx={{
+            display: 'flex',
             flexDirection: 'column',
-            px: 4,
             width: '100%',
-            maxWidth: '666px',
-            height: '92px',
-            mt: '32px',
+            gap: 1,
           }}
         >
-          <Typography
-            variant="h5"
-            color="text.primary"
-            sx={{ mt: '16px', px: 2 }}
-          >
+          <Typography variant="h5" color="text.primary">
             {t('completion.title')}
           </Typography>
-          <Typography variant="body2" color="text.secondary" sx={{ px: 2 }}>
+          <Typography variant="body2" color="text.secondary">
             {t('completion.description')}
           </Typography>
         </Box>