From ff7b5ce4acba4481b63c12468f5313eea3796fb2 Mon Sep 17 00:00:00 2001
From: Koosha Lahouti <klahouti81@gmail.com>
Date: Sat, 19 Jul 2025 17:27:39 +0330
Subject: [PATCH] fix: styles

---
 src/App.tsx                                   |   5 +
 src/components/CardContainer.tsx              |  56 +++
 src/components/CountDownTimer.tsx             |  39 ++
 .../components/PersonalInformation.tsx        | 176 +++----
 .../profile/components/PhoneNumber.tsx        | 472 ++++++++----------
 .../profile/components/SocialMedia.tsx        | 423 ++++++++++------
 6 files changed, 658 insertions(+), 513 deletions(-)
 create mode 100644 src/components/CardContainer.tsx
 create mode 100644 src/components/CountDownTimer.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 10a1234..76660a8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,6 +12,7 @@ import { LanguageManager } from './components/LanguageManager';
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 
 =======
 >>>>>>> f1620b6 (fix: issue in user profile)
@@ -23,6 +24,9 @@ import { UserProfileForm } from './features/profile/components/UserProfileForm';
 >>>>>>> f9815fb (fix: issue in user profile)
 =======
 >>>>>>> 2a79376 (fix: merge conflict)
+=======
+import { UserForm } from './features/profile/components/UserForm';
+>>>>>>> 60c6dc1 (fix: styles)
 function App() {
   const { t } = useTranslation();
 
@@ -30,6 +34,7 @@ function App() {
     <>
       <CssBaseline />
       <LanguageManager />
+      <UserForm />
       <div style={{ padding: '16px' }}>
         <Typography variant="h3">{t('helloWorld')}</Typography>
         <Box
diff --git a/src/components/CardContainer.tsx b/src/components/CardContainer.tsx
new file mode 100644
index 0000000..44d8cc4
--- /dev/null
+++ b/src/components/CardContainer.tsx
@@ -0,0 +1,56 @@
+import { Box, Typography } from '@mui/material';
+export function CardContainer({
+  title,
+  subtitle,
+  action,
+  children,
+  highlighted,
+}: {
+  title: string;
+  subtitle: string;
+  action?: React.ReactNode;
+  children?: React.ReactNode;
+  highlighted?: boolean;
+}) {
+  return (
+    <Box
+      sx={{
+        width: '754px',
+        backgroundColor: 'white',
+        // boxShadow: 2,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          backgroundColor: highlighted ? '#E3F2FD' : '#F5F5F5',
+          p: 2,
+          borderRadius: 1,
+        }}
+      >
+        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+          <Typography
+            variant="h6"
+            color={highlighted ? '#2979FF' : 'text.primary'}
+          >
+            {title}
+          </Typography>
+          <Typography
+            color={highlighted ? '#2979FF' : 'text.secondary'}
+            variant="body2"
+          >
+            {subtitle}
+          </Typography>
+        </Box>
+        {action}
+      </Box>
+
+      {children}
+    </Box>
+  );
+}
diff --git a/src/components/CountDownTimer.tsx b/src/components/CountDownTimer.tsx
new file mode 100644
index 0000000..655fa9b
--- /dev/null
+++ b/src/components/CountDownTimer.tsx
@@ -0,0 +1,39 @@
+import { useState, useEffect } from 'react';
+
+interface CountdownTimerProps {
+  initialSeconds: number;
+  onComplete?: () => void;
+}
+
+export function CountDownTimer({
+  initialSeconds,
+  onComplete,
+}: CountdownTimerProps) {
+  const [secondsLeft, setSecondsLeft] = useState(initialSeconds);
+
+  useEffect(() => {
+    setSecondsLeft(initialSeconds);
+  }, [initialSeconds]);
+
+  useEffect(() => {
+    if (secondsLeft <= 0) {
+      onComplete?.();
+      return;
+    }
+    const timer = setInterval(() => {
+      setSecondsLeft((prev) => prev - 1);
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [secondsLeft, onComplete]);
+
+  const toPersianDigits = (str: string) =>
+    str.replace(/\d/g, (d: string) => '۰۱۲۳۴۵۶۷۸۹'[parseInt(d)]);
+
+  const formatTime = (totalSeconds: number) => {
+    const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, '0');
+    const seconds = String(totalSeconds % 60).padStart(2, '0');
+    return toPersianDigits(`${minutes}:${seconds}`);
+  };
+
+  return <span>{formatTime(secondsLeft)}</span>;
+}
diff --git a/src/features/profile/components/PersonalInformation.tsx b/src/features/profile/components/PersonalInformation.tsx
index 21967f1..9975735 100644
--- a/src/features/profile/components/PersonalInformation.tsx
+++ b/src/features/profile/components/PersonalInformation.tsx
@@ -3,13 +3,13 @@ import {
   Typography,
   Button,
   TextField,
-  Grid,
   FormControl,
   Select,
   MenuItem,
   type SelectChangeEvent,
 } from '@mui/material';
 import { useState, type ChangeEvent } from 'react';
+import { CardContainer } from '@/components/CardContainer';
 
 export function PersonalInformation() {
   const [isEditing, setIsEditing] = useState(false);
@@ -51,58 +51,30 @@ export function PersonalInformation() {
   };
 
   return (
-    <div
-      style={{
+    <Box
+      sx={{
         display: 'flex',
         backgroundColor: '#F5F5F5',
         justifyContent: 'center',
         alignItems: 'center',
+        p: 2,
+        overflow: 'hidden',
       }}
     >
-      <Box
-        sx={{
-          width: '600px',
-          backgroundColor: 'white',
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 2,
-        }}
-      >
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            backgroundColor: isEditing ? '#ADD8E6' : '#F5F5F5',
-            p: 2,
-            borderRadius: 1,
-          }}
-        >
-          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-            <Typography
-              variant="h6"
-              sx={{ color: isEditing ? '#1976d2' : 'black' }}
-            >
-              اطلاعات شخصی من
-            </Typography>
-            <Typography
-              variant="subtitle2"
-              sx={{ color: isEditing ? '#1976d2' : 'gray', fontSize: '13px' }}
-            >
-              این اطلاعات شما صرفا برای احراز هویت شما است و نزد هارمونی باقی
-              می‌ماند
-            </Typography>
-          </Box>
-
+      <CardContainer
+        title="اطلاعات شخصی من"
+        subtitle="این اطلاعات شما صرفا برای احراز هویت شما است و نزد هارمونی باقی می‌ماند"
+        highlighted={isEditing}
+        action={
           <Box sx={{ display: 'flex', gap: 1 }}>
             {isEditing && (
               <Button
+                variant="text"
                 onClick={() => setIsEditing(false)}
+                size="large"
                 sx={{
-                  backgroundColor: '#ADD8E6',
-                  color: '#1976d2',
-                  width: '80px',
-                  height: '30px',
+                  color: '#2979FF',
+                  width: '43px',
                 }}
               >
                 لغو
@@ -110,120 +82,150 @@ export function PersonalInformation() {
             )}
             <Button
               onClick={toggleEdit}
+              size="large"
               sx={{
-                border: 0.5,
-                borderColor: '#1976d2',
-                borderRadius: '5px',
-                backgroundColor: isEditing ? '#1976d2' : 'white',
-                color: isEditing ? 'white' : '#1976d2',
-                width: '80px',
-                height: '30px',
+                border: '1px solid',
+                borderColor: '#2979FF',
+                borderRadius: '4px',
+                backgroundColor: isEditing ? '#2979FF' : 'white',
+                color: isEditing ? 'white' : '#2979FF',
+                px: '22px',
+                py: '8px',
+                // minWidth: '93px',
+                width: isEditing ? '85px' : '93px',
               }}
             >
               {isEditing ? 'ذخیره' : 'ویرایش'}
             </Button>
           </Box>
-        </Box>
-
-        <Grid container spacing={4}>
-          <Grid item xs={6}>
+        }
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: 4,
+            p: 2,
+          }}
+        >
+          <Box sx={{ width: 'calc(50% - 16px)' }}>
             {isEditing ? (
               <TextField
                 fullWidth
                 name="firstName"
                 value={data.firstName}
                 onChange={handleChange}
-                inputProps={{ sx: { height: '12px' } }}
                 label="نام"
               />
             ) : (
-              <Box sx={{ width: '250px' }}>
-                <Typography variant="caption" sx={{ color: 'gray' }}>
+              <Box
+                sx={{
+                  height: '48px',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                  px: 4,
+                }}
+              >
+                <Typography variant="caption" color="text.secondary">
                   نام
                 </Typography>
-                <Typography variant="subtitle2">
+                <Typography variant="body1" color="text.primary">
                   {displayValue(data.firstName)}
                 </Typography>
               </Box>
             )}
-          </Grid>
+          </Box>
 
-          <Grid item xs={6}>
+          <Box sx={{ width: 'calc(50% - 16px)' }}>
             {isEditing ? (
               <TextField
                 fullWidth
                 name="lastName"
                 value={data.lastName}
                 onChange={handleChange}
-                inputProps={{ sx: { height: '12px' } }}
                 label="نام خانوادگی"
               />
             ) : (
-              <Box sx={{ width: '200px' }}>
-                <Typography variant="caption" sx={{ color: 'gray' }}>
+              <Box
+                sx={{
+                  height: '48px',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                }}
+              >
+                <Typography variant="caption" color="text.secondary">
                   نام خانوادگی
                 </Typography>
-                <Typography variant="subtitle2">
+                <Typography variant="body1" color="text.primary">
                   {displayValue(data.lastName)}
                 </Typography>
               </Box>
             )}
-          </Grid>
+          </Box>
 
-          <Grid item xs={6}>
+          <Box sx={{ width: 'calc(50% - 16px)' }}>
             {isEditing ? (
               <FormControl fullWidth>
                 <Select
                   value={gender}
                   onChange={handleChangeGender}
-                  sx={{
-                    height: '45px',
-                    width: '210px',
-                    '& .MuiSelect-select': {
-                      paddingY: '10px',
-                    },
-                  }}
-                  label="جنسیت"
+                  displayEmpty
                 >
                   <MenuItem value="female">زن</MenuItem>
                   <MenuItem value="male">مرد</MenuItem>
                 </Select>
               </FormControl>
             ) : (
-              <Box sx={{ width: '250px' }}>
-                <Typography variant="caption" sx={{ color: 'gray' }}>
+              <Box
+                sx={{
+                  height: '48px',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                  px: 4,
+                }}
+              >
+                <Typography variant="caption" color="text.secondary">
                   جنسیت
                 </Typography>
-                <Typography variant="subtitle1">
+                <Typography variant="body1" color="text.primary">
                   {displayValue(data.gender)}
                 </Typography>
               </Box>
             )}
-          </Grid>
+          </Box>
 
-          <Grid item xs={6}>
+          <Box sx={{ width: 'calc(50% - 16px)' }}>
             {isEditing ? (
               <TextField
                 fullWidth
                 name="nationalCode"
                 value={data.nationalCode}
                 onChange={handleChange}
-                inputProps={{ sx: { height: '12px' } }}
-                label="کدملی"
+                label="کد ملی"
               />
             ) : (
-              <Box>
-                <Typography variant="caption" sx={{ color: 'gray' }}>
+              <Box
+                sx={{
+                  height: '48px',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                }}
+              >
+                <Typography variant="caption" color="text.secondary">
                   کد ملی
                 </Typography>
-                <Typography variant="subtitle2">
+                <Typography variant="body1" color="text.primary">
                   {displayValue(data.nationalCode)}
                 </Typography>
               </Box>
             )}
-          </Grid>
-        </Grid>
-      </Box>
-    </div>
+          </Box>
+        </Box>
+      </CardContainer>
+    </Box>
   );
 }
diff --git a/src/features/profile/components/PhoneNumber.tsx b/src/features/profile/components/PhoneNumber.tsx
index ccaff35..8e08d09 100644
--- a/src/features/profile/components/PhoneNumber.tsx
+++ b/src/features/profile/components/PhoneNumber.tsx
@@ -2,305 +2,253 @@ import {
   Box,
   Typography,
   Button,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  IconButton,
   TextField,
+  IconButton,
+  GlobalStyles,
 } from '@mui/material';
-import { Edit, CloseSquare } from 'iconsax-react';
-import { useState, useEffect } from 'react';
+import { Edit, Refresh, TickCircle } from 'iconsax-react';
+import { useState, useEffect, type ChangeEvent } from 'react';
+import { CardContainer } from '@/components/CardContainer';
+import { CountDownTimer } from '@/components/CountDownTimer';
 
 export function PhoneNumber() {
-  const [open, setOpen] = useState(false);
-  const [dialogStep, setDialogStep] = useState<'enterPhone' | 'verifyCode'>(
-    'enterPhone',
+  const [isEditing, setIsEditing] = useState(false);
+  const [phoneNumber, setPhoneNumber] = useState('');
+  const [verificationCode, setVerificationCode] = useState('');
+  const [buttonState, setButtonState] = useState<'default' | 'counting'>(
+    'default',
   );
-  const [buttonState, setButtonState] = useState('default'); // default | counting | sent
-  const [countdown, setCountdown] = useState(120);
+  const [isVerifying, setIsVerifying] = useState(false);
+  const [isVerified, setIsVerified] = useState(false);
 
-  const handleChangePhoneNumber = () => {
-    setOpen(true);
-  };
-  const handleClose = () => {
-    setOpen(false);
-    setDialogStep('enterPhone');
-  };
   const handleSendCode = () => {
-    setDialogStep('verifyCode');
-    setButtonState('sent');
+    setButtonState('counting');
+    setIsVerified(false);
+  };
+
+  const handleVerifyCode = () => {
+    setIsVerifying(true);
     setTimeout(() => {
-      setButtonState('counting');
-      setCountdown(120);
-    }, 1000);
-  };
-  const handleResendCode = () => {
-    setButtonState('sent');
-    setTimeout(() => {
-      setButtonState('counting');
-      setCountdown(120);
-    }, 1000);
+      setIsVerifying(false);
+      setIsVerified(true);
+    }, 1500);
   };
 
-  useEffect(() => {
-    if (buttonState === 'counting' && countdown > 0) {
-      const timer = setInterval(() => {
-        setCountdown((prev) => prev - 1);
-      }, 1000);
-      return () => clearInterval(timer);
-    }
-    if (countdown === 0 && buttonState === 'counting') {
-      setButtonState('default');
-    }
-  }, [buttonState, countdown]);
-
-  const toPersianDigits = (str: string) =>
-    str.replace(/\d/g, (d: string) => '۰۱۲۳۴۵۶۷۸۹'[parseInt(d)]);
-
-  const getButtonLabel = () => {
-    if (buttonState === 'sent') return 'ارسال شد!';
-    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 'ارسال دوباره کد';
+  const toggleEdit = () => {
+    setIsEditing((prev) => !prev);
+    setButtonState('default');
+    setIsVerified(false);
+    setVerificationCode('');
   };
 
-  const handleEdit = () => {
-    setDialogStep('enterPhone');
+  const handlePhoneNumberChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value.replace(/\D/g, '');
+    setPhoneNumber(value);
+  };
+
+  const handleVerificationCodeChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value.replace(/\D/g, '');
+    setVerificationCode(value);
   };
 
   return (
-    <div
-      style={{
-        backgroundColor: '#F5F5F5',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
+    <>
+      <GlobalStyles
+        styles={{
+          '@keyframes spin': {
+            from: { transform: 'rotate(0deg)' },
+            to: { transform: 'rotate(360deg)' },
+          },
+        }}
+      />
       <Box
         sx={{
-          width: '600px',
-          backgroundColor: 'white',
-          boxShadow: 2,
           display: 'flex',
-          flexDirection: 'column',
-          gap: 2,
+          backgroundColor: '#F5F5F5',
+          justifyContent: 'center',
+          alignItems: 'center',
+          p: 2,
         }}
       >
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            backgroundColor: '#F5F5F5',
-            p: 2,
-            borderRadius: 1,
-          }}
-        >
-          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-            <Typography variant="h6">شماره تماس من</Typography>
-            <Typography sx={{ color: 'gray' }} variant="subtitle2">
-              این اطلاعات شما صرفا برای احراز هویت شما است و نزد هارمونی باقی
-              می‌ماند
-            </Typography>
-          </Box>
-          <Button
-            onClick={handleChangePhoneNumber}
-            sx={{
-              border: 0.5,
-              borderColor: '#1976d2',
-              borderRadius: '5px',
-              backgroundColor: 'white',
-              color: '#1976d2',
-              width: '150px',
-              height: '30px',
-            }}
-          >
-            تغییر شماره تماس
-          </Button>
-        </Box>
-
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            p: 2,
-            borderRadius: 1,
-            justifyContent: 'space-between',
-          }}
-        >
-          <Box
-            sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'flex-end',
-            }}
-          >
-            <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
-              09909366045
-            </Typography>
-            <Typography variant="caption" sx={{ color: 'gray' }}>
-              ۱ ماه پیش
-            </Typography>
-          </Box>
-
-          {/* <IconButton
-              sx={{
-                border: '1px solid #1976d2',
-                color: '#1976d2',
-                borderRadius: '12px',
-                width: '40px',
-                height: '40px',
-              }}
-              onClick={handleChangePhoneNumber}
-            ></IconButton> */}
-        </Box>
-      </Box>
-
-      <Dialog open={open} onClose={handleClose} fullWidth maxWidth="xs">
-        <DialogTitle
-          sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            backgroundColor: '#F5F5F5',
-          }}
-        >
-          ویرایش شماره تماس
-          <IconButton onClick={handleClose}>
-            <CloseSquare size="24" color="gray" variant="Outline" />
-          </IconButton>
-        </DialogTitle>
-        <DialogContent>
-          <Box sx={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
-            {dialogStep === 'enterPhone' ? (
-              <>
-                <Typography variant="subtitle1" sx={{ mb: 1 }}>
-                  شماره تماس جدید
-                </Typography>
-                <Typography variant="subtitle2" sx={{ color: 'gray', mb: 2 }}>
-                  شماره تماس جدید جایگزین شماره تماس قبلی شما خواهد شد
-                </Typography>
-                <TextField
-                  fullWidth
-                  label="شماره تماس"
-                  placeholder="09123456789"
-                  sx={{
-                    mb: 2,
-                    '& .MuiOutlinedInput-root': {
-                      '& fieldset': {
-                        borderColor: '#1976d2',
-                      },
-                      '&:hover fieldset': {
-                        borderColor: '#1976d2',
-                      },
-                      '&.Mui-focused fieldset': {
-                        borderColor: '#1976d2',
-                      },
-                    },
-                    '& label.Mui-focused': {
-                      color: '#1976d2',
-                    },
-                  }}
-                />
+        <CardContainer
+          title="شماره تماس من"
+          subtitle="این اطلاعات شما صرفا برای احراز هویت شما است و نزد هارمونی باقی می‌ماند"
+          highlighted={isEditing}
+          action={
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              {isEditing && (
                 <Button
-                  onClick={handleSendCode}
-                  variant="contained"
-                  fullWidth
-                  sx={{
-                    borderRadius: '10px',
-                    backgroundColor: '#1976d2',
-                    '&:hover': { backgroundColor: '#115293' },
-                  }}
+                  variant="text"
+                  onClick={toggleEdit}
+                  size="large"
+                  sx={{ color: '#2979FF', width: '43px' }}
                 >
-                  ارسال کد تایید
+                  لغو
                 </Button>
-              </>
-            ) : (
-              <>
-                <Box sx={{ display: 'flex', gap: 1 }}>
-                  <Box>
-                    <Typography variant="subtitle1" sx={{ mb: 1 }}>
-                      اعتبار سنجی
-                    </Typography>
-                    <Typography
-                      variant="subtitle2"
-                      sx={{ color: 'gray', mb: 2 }}
-                    >
-                      کد تایید 4 رقمی به شماره موبایل شما ارسال شد. لطفا آن را
-                      وارد کنید
-                    </Typography>
-                  </Box>
-                  <Button
-                    sx={{
-                      border: 0.5,
-                      borderColor: '#1976d2',
-                      height: '35px',
-                      color: '#1976d2',
-                      width: '150px',
-                    }}
-                    onClick={handleEdit}
-                  >
-                    <Edit />
-                    09123456789
-                  </Button>
-                </Box>
+              )}
+              <Button
+                onClick={toggleEdit}
+                size="large"
+                variant="outlined"
+                sx={{
+                  border: '1px solid',
+                  borderColor: '#2979FF',
+                  borderRadius: '4px',
+                  backgroundColor: isEditing ? '#2979FF' : 'white',
+                  color: isEditing ? 'white' : '#2979FF',
+                  width: isEditing ? '85px' : '161px',
+                }}
+              >
+                {isEditing ? 'ذخیره' : 'تغییر شماره تماس'}
+              </Button>
+            </Box>
+          }
+        >
+          {isEditing ? (
+            <Box sx={{ px: 4 }}>
+              <Box sx={{ width: '668px', mb: 2 }}>
+                <Typography variant="h6" color="text.primary">
+                  تغییر شماره تماس
+                </Typography>
+                <Typography variant="body2" color="text.secondary">
+                  شماره تماس جدید شما جایگزین شماره تماس قبلی(+989123456789)
+                  خواهد شد.
+                </Typography>
+              </Box>
+
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  width: '700px',
+                  gap: 2,
+                }}
+              >
                 <TextField
-                  fullWidth
-                  label="کد تایید"
-                  placeholder="کد تایید را وارد کنید"
-                  sx={{
-                    mb: 2,
-                    '& .MuiOutlinedInput-root': {
-                      '& fieldset': {
-                        borderColor: '#1976d2',
-                      },
-                      '&:hover fieldset': {
-                        borderColor: '#1976d2',
-                      },
-                      '&.Mui-focused fieldset': {
-                        borderColor: '#1976d2',
-                      },
-                    },
-                    '& label.Mui-focused': {
-                      color: '#1976d2',
-                    },
+                  name="phoneNumber"
+                  placeholder="09123456789"
+                  label="شماره تماس جدید"
+                  type="tel"
+                  value={phoneNumber}
+                  onChange={handlePhoneNumberChange}
+                  sx={{ width: '100%', maxWidth: '474px' }}
+                  InputProps={{
+                    startAdornment:
+                      buttonState === 'counting' ? (
+                        <IconButton
+                          size="small"
+                          onClick={() => setButtonState('default')}
+                        >
+                          <Edit size="20" color="#2979FF" />
+                        </IconButton>
+                      ) : null,
                   }}
                 />
-                <Box sx={{ display: 'flex' }}>
+
+                {isVerified ? (
+                  <Box
+                    sx={{
+                      width: '100%',
+                      maxWidth: '194px',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      color: 'success.main',
+                      gap: 1,
+                    }}
+                  >
+                    <TickCircle size="20" color="#2e7d32" variant="Bold" />
+                    تایید شد
+                  </Box>
+                ) : (
                   <Button
                     variant="text"
-                    onClick={handleResendCode}
-                    sx={{ width: '200px' }}
-                    disabled={
-                      buttonState === 'sent' || buttonState === 'counting'
-                    }
+                    sx={{ width: '100%', maxWidth: '194px', color: '#2979FF' }}
+                    size="large"
+                    onClick={handleSendCode}
+                    disabled={buttonState === 'counting'}
                   >
-                    {getButtonLabel()}
+                    {buttonState === 'counting' ? (
+                      <CountDownTimer
+                        initialSeconds={60}
+                        onComplete={() => setButtonState('default')}
+                      />
+                    ) : (
+                      'ارسال کد تایید'
+                    )}
                   </Button>
+                )}
+              </Box>
 
+              {buttonState === 'counting' && !isVerified && (
+                <Box
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    width: '700px',
+                    gap: 2,
+                    mt: 2,
+                  }}
+                >
+                  <TextField
+                    name="verificationCode"
+                    placeholder="کد تایید"
+                    label="کد تایید"
+                    type="tel"
+                    value={verificationCode}
+                    onChange={handleVerificationCodeChange}
+                    sx={{ width: '100%', maxWidth: '474px' }}
+                  />
                   <Button
-                    onClick={handleClose}
                     variant="contained"
-                    fullWidth
+                    size="large"
+                    onClick={handleVerifyCode}
+                    disabled={isVerifying || verificationCode.length === 0}
                     sx={{
-                      borderRadius: '10px',
-                      backgroundColor: '#1976d2',
-                      '&:hover': { backgroundColor: '#115293' },
+                      width: '100%',
+                      maxWidth: '194px',
+                      display: 'flex',
+                      justifyContent: 'center',
+                      backgroundColor: '#2979FF',
                     }}
                   >
-                    بررسی کد
+                    {isVerifying ? (
+                      <Box
+                        component="span"
+                        sx={{
+                          display: 'flex',
+                          animation: 'spin 1s linear infinite',
+                        }}
+                      >
+                        <Refresh size="20" color="white" />
+                      </Box>
+                    ) : (
+                      'بررسی کد'
+                    )}
                   </Button>
                 </Box>
-              </>
-            )}
-          </Box>
-        </DialogContent>
-      </Dialog>
-    </div>
+              )}
+            </Box>
+          ) : (
+            <Box
+              sx={{
+                height: '48px',
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                px: 4,
+              }}
+            >
+              <Typography variant="h6" color="text.primary">
+                09909366045
+              </Typography>
+              <Typography variant="caption" color="text.secondary">
+                ۱ ماه پیش
+              </Typography>
+            </Box>
+          )}
+        </CardContainer>
+      </Box>
+    </>
   );
 }
diff --git a/src/features/profile/components/SocialMedia.tsx b/src/features/profile/components/SocialMedia.tsx
index 8e84bf9..cd543b5 100644
--- a/src/features/profile/components/SocialMedia.tsx
+++ b/src/features/profile/components/SocialMedia.tsx
@@ -1,4 +1,12 @@
-import { Google, Apple, Sms, Trash, CloseSquare } from 'iconsax-react';
+import {
+  Google,
+  Apple,
+  Sms,
+  Trash,
+  CloseSquare,
+  Message,
+  ArrowDown3,
+} from 'iconsax-react';
 import {
   Box,
   Button,
@@ -8,13 +16,33 @@ import {
   DialogContent,
   IconButton,
   TextField,
+  Menu,
+  MenuItem,
+  ListItemIcon,
+  ListItemText,
 } from '@mui/material';
-import { useState } from 'react';
+import React, { useState } from 'react';
+import { CardContainer } from '@/components/CardContainer';
 
 export function SocialMedia() {
-  const [open, setOpen] = useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
+  const [openDialog, setOpenDialog] = useState(false);
+  const [emailInput, setEmailInput] = useState('');
+  const [emailError, setEmailError] = useState(false);
+  const [anchor, setAnchor] = useState<null | HTMLElement>(null);
+  const openMenu = Boolean(anchor);
+
+  const handleOpenDialog = () => setOpenDialog(true);
+  const handleCloseDialog = () => setOpenDialog(false);
+
+  const handleClickMenu = (e: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchor(e.currentTarget);
+  };
+  const handleCloseMenu = () => setAnchor(null);
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setEmailInput(value);
+    setEmailError(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value));
+  };
 
   const emailList = [
     { email: 'emailtemp@email.com', provider: 'email' },
@@ -22,189 +50,256 @@ export function SocialMedia() {
   ];
 
   return (
-    <div
-      style={{
+    <Box
+      sx={{
         backgroundColor: '#F5F5F5',
         display: 'flex',
         justifyContent: 'center',
-        alignItems: 'center',
+        p: 2,
       }}
     >
-      <Box
-        sx={{
-          width: '600px',
-          backgroundColor: 'white',
-          boxShadow: 2,
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 2,
-        }}
+      <CardContainer
+        title="ایمیل و شبکه های اجتماعی من"
+        subtitle="این اطلاعات شما صرفاً برای احراز هویت شما است و نزد هارمونی باقی می‌ماند"
+        action={
+          <Box sx={{ display: 'flex', justifyContent: 'flex-start' }}>
+            <Button
+              onClick={handleClickMenu}
+              variant="outlined"
+              size="large"
+              sx={{
+                maxWidth: '187px',
+                height: '42px',
+                border: '1px solid',
+                borderColor: '#2979FF',
+                borderRadius: '8px',
+                color: '#2979FF',
+                fontSize: '14px',
+                display: 'flex',
+                justifyContent: 'space-between',
+                px: 2,
+              }}
+            >
+              افزودن ایمیل / سوشال
+              {openMenu && <ArrowDown3 size="20" color="#2979FF" />}
+            </Button>
+            <Menu
+              anchorEl={anchor}
+              open={openMenu}
+              onClose={handleCloseMenu}
+              PaperProps={{
+                sx: {
+                  width: anchor ? `${anchor.offsetWidth}px` : undefined,
+                },
+              }}
+            >
+              <MenuItem
+                onClick={() => {
+                  handleCloseMenu();
+                  handleOpenDialog();
+                }}
+              >
+                <ListItemIcon>
+                  <Message size={20} color="black" />
+                </ListItemIcon>
+                <ListItemText>ایمیل</ListItemText>
+              </MenuItem>
+              <MenuItem
+                onClick={() => {
+                  handleCloseMenu();
+                  handleOpenDialog();
+                }}
+              >
+                <ListItemIcon>
+                  <Google size={20} color="#4285F4" />
+                </ListItemIcon>
+                <ListItemText>گوگل</ListItemText>
+              </MenuItem>
+              <MenuItem
+                onClick={() => {
+                  handleCloseMenu();
+                  handleOpenDialog();
+                }}
+              >
+                <ListItemIcon>
+                  <Apple size={20} color="black" />
+                </ListItemIcon>
+                <ListItemText>اپل</ListItemText>
+              </MenuItem>
+            </Menu>
+          </Box>
+        }
       >
         <Box
           sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            backgroundColor: '#F5F5F5',
+            width: '100%',
+            backgroundColor: 'white',
+            borderRadius: '8px',
             p: 2,
-            borderRadius: 1,
           }}
         >
-          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-            <Typography variant="h6">ایمیل و شبکه‌های اجتماعی من</Typography>
-            <Typography sx={{ color: 'gray' }} variant="subtitle2">
-              این اطلاعات شما صرفاً برای احراز هویت شما است و نزد هارمونی باقی
-              می‌ماند
-            </Typography>
-          </Box>
-          <Button
-            onClick={handleOpen}
-            sx={{
-              border: 0.5,
-              borderColor: '#1976d2',
-              borderRadius: '5px',
-              backgroundColor: 'white',
-              color: '#1976d2',
-              width: '150px',
-              height: '30px',
-            }}
-          >
-            افزودن ایمیل / سوشال
-          </Button>
-        </Box>
-
-        {emailList.map((item, index) => (
-          <Box
-            key={index}
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              p: 2,
-              borderRadius: 1,
-              mt: 1,
-            }}
-          >
-            <Box sx={{ display: 'flex', alignItems: 'center' }}>
-              {item.provider === 'google' && (
-                <Google
-                  size="20"
-                  variant="Bold"
-                  color="#4285F4"
-                  style={{ marginLeft: 8 }}
-                />
-              )}
-              {item.provider === 'apple' && (
-                <Apple
-                  size="20"
-                  variant="Bold"
-                  color="black"
-                  style={{ marginLeft: 8 }}
-                />
-              )}
-              {item.provider === 'email' && (
-                <Sms
-                  size="20"
-                  variant="Bold"
-                  color="#1976d2"
-                  style={{ marginLeft: 8 }}
-                />
-              )}
-
-              <Box>
-                <Typography sx={{ fontWeight: 'bold' }}>
-                  {item.email}
-                </Typography>
-                <Typography variant="body2">۱ ماه پیش</Typography>
-              </Box>
-            </Box>
-
-            <IconButton>
-              <Trash size="20" color="gray" variant="Outline" />
-            </IconButton>
-          </Box>
-        ))}
-      </Box>
-
-      <Dialog open={open} onClose={handleClose} fullWidth maxWidth="xs">
-        <DialogTitle
-          sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            backgroundColor: '#F5F5F5',
-          }}
-        >
-          افزودن ایمیل / سوشال
-          <IconButton onClick={handleClose}>
-            <CloseSquare size="24" color="gray" />
-          </IconButton>
-        </DialogTitle>
-        <DialogContent>
-          <Box sx={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
-            <TextField
-              fullWidth
-              label="ایمیل"
-              placeholder="abc@email.com"
+          {emailList.map((item, index) => (
+            <Box
+              key={index}
               sx={{
-                mb: 2,
-                '& .MuiOutlinedInput-root': {
-                  '& fieldset': { borderColor: '#1976d2' },
-                  '&:hover fieldset': { borderColor: '#1976d2' },
-                  '&.Mui-focused fieldset': { borderColor: '#1976d2' },
-                },
-                '& label.Mui-focused': { color: '#1976d2' },
-              }}
-            />
-            <Button
-              variant="contained"
-              fullWidth
-              sx={{
-                borderRadius: '10px',
-                backgroundColor: '#1976d2',
-                '&:hover': { backgroundColor: '#115293' },
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                p: 1,
+                borderBottom:
+                  index !== emailList.length - 1 ? '1px solid #eee' : 'none',
               }}
             >
-              ارسال کد تایید
-            </Button>
-
-            <Box sx={{ display: 'flex', alignItems: 'center', my: 2 }}>
-              <Box sx={{ flex: 1, height: '1px', backgroundColor: '#ccc' }} />
-              <Typography sx={{ mx: 1, fontSize: '12px', color: 'gray' }}>
-                یا
-              </Typography>
-              <Box sx={{ flex: 1, height: '1px', backgroundColor: '#ccc' }} />
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                {item.provider === 'google' && (
+                  <Google
+                    size="20"
+                    variant="Bold"
+                    color="#4285F4"
+                    style={{ marginLeft: 8 }}
+                  />
+                )}
+                {item.provider === 'apple' && (
+                  <Apple
+                    size="20"
+                    variant="Bold"
+                    color="black"
+                    style={{ marginLeft: 8 }}
+                  />
+                )}
+                {item.provider === 'email' && (
+                  <Sms
+                    size="20"
+                    variant="Bold"
+                    color="#1976d2"
+                    style={{ marginLeft: 8 }}
+                  />
+                )}
+                <Box>
+                  <Typography sx={{ fontWeight: 'bold', fontSize: '14px' }}>
+                    {item.email}
+                  </Typography>
+                  <Typography variant="caption" color="text.secondary">
+                    ۱ ماه پیش
+                  </Typography>
+                </Box>
+              </Box>
+              <IconButton size="small">
+                <Trash size="20" color="gray" variant="Outline" />
+              </IconButton>
             </Box>
+          ))}
+        </Box>
 
-            <Box sx={{ display: 'flex', gap: 1 }}>
-              <Button
+        <Dialog
+          open={openDialog}
+          onClose={handleCloseDialog}
+          fullWidth
+          maxWidth="xs"
+        >
+          <DialogTitle
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              backgroundColor: '#F5F5F5',
+              fontWeight: 'bold',
+              fontSize: '16px',
+              gap: 1,
+            }}
+          >
+            <IconButton onClick={handleCloseDialog} size="small">
+              <CloseSquare size="24" color="gray" />
+            </IconButton>
+            افزودن ایمیل
+          </DialogTitle>
+          <DialogContent>
+            <Box
+              sx={{
+                width: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 2,
+              }}
+            >
+              <Box>
+                <Typography fontWeight="bold">ایمیل جدید</Typography>
+                <Typography variant="body2" color="text.secondary">
+                  با فعال‌سازی ایمیل می‌توانید در دفعات بعدی ورود برای ورود از
+                  این ایمیل استفاده کنید
+                </Typography>
+              </Box>
+              <TextField
+                fullWidth
+                type="email"
+                value={emailInput}
+                onChange={handleEmailChange}
+                error={emailError}
+                helperText={emailError ? 'لطفا یک ایمیل معتبر وارد کنید' : ''}
+                label="ایمیل"
+                placeholder="abc@email.com"
                 sx={{
-                  width: '50%',
-                  border: 2,
-                  borderColor: '#1976d2',
-                  color: '#1976d2',
-                  borderRadius: '8px',
+                  '& .MuiOutlinedInput-root': {
+                    borderRadius: '8px',
+                  },
                 }}
-              >
-                <Google size="20" color="#4285F4" style={{ marginLeft: 8 }} />
-                گوگل
-              </Button>
+              />
               <Button
+                variant="contained"
+                fullWidth
                 sx={{
-                  width: '50%',
-                  border: 2,
-                  borderColor: '#1976d2',
-                  color: '#1976d2',
                   borderRadius: '8px',
+                  backgroundColor: '#1976d2',
                 }}
+                disabled={emailError || emailInput === ''}
               >
-                <Apple size="20" color="black" style={{ marginLeft: 8 }} />
-                اپل
+                ارسال کد تایید
               </Button>
+
+              <Box sx={{ display: 'flex', alignItems: 'center', my: 2 }}>
+                <Box sx={{ flex: 1, height: '1px', backgroundColor: '#ccc' }} />
+                <Typography sx={{ mx: 1, fontSize: '12px', color: 'gray' }}>
+                  یا
+                </Typography>
+                <Box sx={{ flex: 1, height: '1px', backgroundColor: '#ccc' }} />
+              </Box>
+
+              <Box sx={{ display: 'flex', gap: 1 }}>
+                <Button
+                  sx={{
+                    width: '50%',
+                    border: 2,
+                    borderColor: '#1976d2',
+                    color: '#1976d2',
+                    borderRadius: '8px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <Google size="20" color="#4285F4" style={{ marginLeft: 8 }} />
+                  گوگل
+                </Button>
+                <Button
+                  sx={{
+                    width: '50%',
+                    border: 2,
+                    borderColor: '#1976d2',
+                    color: '#1976d2',
+                    borderRadius: '8px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <Apple size="20" color="black" style={{ marginLeft: 8 }} />
+                  اپل
+                </Button>
+              </Box>
             </Box>
-          </Box>
-        </DialogContent>
-      </Dialog>
-    </div>
+          </DialogContent>
+        </Dialog>
+      </CardContainer>
+    </Box>
   );
 }