fix: responsiveness

public/locales/fa/profileSetting.json

@@ -37,6 +37,7 @@
     "uploadPicture": "بارگذاری تصویر",
     "phoneNumberText": "شماره تماس جدید شما جایگزین شماره تماس قبلی",
     "verb": "خواهد شد",
-    "notDetermined": "تعیین نشده"
+    "notDetermined": "تعیین نشده",
+    "successfulChangePhone": "شماره تماس با موفقیت تغییر کرد"
   }
 }

src/App.tsx

@@ -19,12 +19,12 @@ function App() {
       <CssBaseline />
       <LanguageManager />
       <UserForm />
+      <ThemeToggleButton />
       {/* <div style={{ padding: '16px' }}>
         <Typography variant="h3">{t('helloWorld')}</Typography>
         <Box
           sx={{ display: 'flex', flexDirection: 'column', gap: '10px', mt: 5 }}
         >
-          <ThemeToggleButton />
           <Button color="secondary" variant="contained">
             secondary button
           </Button>
@@ -49,17 +49,17 @@ function App() {
 
 export default App;
 
-// import { Button } from '@mui/material';
+import { Button } from '@mui/material';
 
-// export const ThemeToggleButton = () => {
+export const ThemeToggleButton = () => {
-//   const { mode, setMode } = useColorScheme();
+  const { mode, setMode } = useColorScheme();
 
-//   return (
+  return (
-//     <Button
+    <Button
-//       variant="contained"
+      variant="contained"
-//       onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}
+      onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}
-//     >
+    >
-//       Switch to {mode === 'light' ? 'Dark' : 'Light'} Mode
+      Switch to {mode === 'light' ? 'Dark' : 'Light'} Mode
-//     </Button>
+    </Button>
-//   );
+  );
-// };
+};

src/components/CardContainer.tsx

@@ -17,46 +17,59 @@ export function CardContainer({
     <Box
       sx={{
         width: '100%',
-        maxWidth: {
-          xs: '100%',
-          sm: '500px',
-          md: '818px',
-        },
         display: 'flex',
-        flexDirection: 'column',
+        justifyContent: 'center',
-        gap: 2,
         px: { xs: 2, sm: 3, md: 4 },
-        // py: 2,
       }}
     >
       <Box
         sx={{
+          width: '100%',
+          maxWidth: {
+            xs: '100%',
+            sm: '500px',
+            md: '818px',
+          },
           display: 'flex',
-          justifyContent: 'space-between',
+          flexDirection: 'column',
-          alignItems: 'center',
+          gap: 2,
-          backgroundColor: highlighted ? 'primary.light' : 'background.default',
+          mx: 'auto',
-          p: 2,
+          px: { xs: 2, sm: 3, md: 4 },
-          borderRadius: 1,
         }}
       >
-        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+        <Box
-          <Typography
+          sx={{
-            variant="h6"
+            display: 'flex',
-            color={highlighted ? 'primary.main' : 'text.primary'}
+            justifyContent: 'space-between',
-          >
+            alignItems: { xs: 'flex-start', sm: 'center' },
-            {title}
+            flexDirection: { xs: 'column', sm: 'row' },
-          </Typography>
+            backgroundColor: highlighted
-          <Typography
+              ? 'primary.light'
-            color={highlighted ? 'primary.main' : 'text.secondary'}
+              : 'background.default',
-            variant="body2"
+            p: 2,
-          >
+            borderRadius: 1,
-            {subtitle}
+            gap: { xs: 1, sm: 0 },
-          </Typography>
+          }}
+        >
+          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+            <Typography
+              variant="h6"
+              color={highlighted ? 'primary.main' : 'text.primary'}
+            >
+              {title}
+            </Typography>
+            <Typography
+              color={highlighted ? 'primary.main' : 'text.secondary'}
+              variant="body2"
+            >
+              {subtitle}
+            </Typography>
+          </Box>
+          {action}
         </Box>
-        {action}
-      </Box>
 
-      {children}
+        {children}
+      </Box>
     </Box>
   );
 }

src/components/CustomAlert.tsx

@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Alert, IconButton, type AlertColor } from '@mui/material';
+import {
+  TickCircle,
+  CloseSquare,
+  Warning2,
+  InfoCircle,
+  CloseCircle,
+} from 'iconsax-react';
+
+type AlertType = AlertColor;
+
+interface CustomAlertProps {
+  message: string;
+  onClose: () => void;
+  severity?: AlertType;
+  open: boolean;
+  duration?: number;
+  delayOnClose?: number;
+  rtl?: boolean;
+  icon?: React.ReactNode;
+}
+
+const defaultIcons: Record<AlertType, React.ReactNode> = {
+  success: <TickCircle size="20" color="#fff" />,
+  error: <CloseSquare size="20" color="#fff" />,
+  warning: <Warning2 size="20" color="#fff" />,
+  info: <InfoCircle size="20" color="#fff" />,
+};
+
+export const CustomAlert: React.FC<CustomAlertProps> = ({
+  message,
+  severity,
+  open,
+  onClose,
+  duration = 4000,
+  delayOnClose = 2000,
+  rtl = false,
+  icon,
+}) => {
+  const [visible, setVisible] = useState(open);
+
+  useEffect(() => {
+    setVisible(open);
+  }, [open]);
+
+  useEffect(() => {
+    if (visible && duration > 0) {
+      const timer = setTimeout(() => {
+        setVisible(false);
+        onClose();
+      }, duration);
+      return () => clearTimeout(timer);
+    }
+  }, [visible, duration, onClose]);
+
+  const handleClose = () => {
+    setTimeout(() => {
+      setVisible(false);
+      onClose();
+    }, delayOnClose);
+  };
+
+  if (!visible) return null;
+
+  return (
+    <Box
+      sx={{
+        position: 'fixed',
+        bottom: 20,
+        left: 20,
+        zIndex: 9999,
+      }}
+    >
+      <Alert
+        severity={severity}
+        variant="filled"
+        icon={icon ?? defaultIcons[severity ?? 'success']}
+        action={
+          <IconButton onClick={handleClose} sx={{ color: 'black', p: 0.5 }}>
+            <CloseCircle size="20" />
+          </IconButton>
+        }
+        sx={{
+          width: '396px',
+          flexDirection: 'row-reverse',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          textAlign: rtl ? 'right' : 'left',
+          direction: rtl ? 'rtl' : 'ltr',
+        }}
+      >
+        {message}
+      </Alert>
+    </Box>
+  );
+};

src/features/profile/components/PersonalInformation.tsx

@@ -42,6 +42,8 @@ export function PersonalInformation() {
       sx={{
         display: 'flex',
         justifyContent: 'center',
+        width: '100%',
+        px: { xs: 1, sm: 2 },
         backgroundColor: 'background.paper',
       }}
     >
@@ -50,7 +52,7 @@ export function PersonalInformation() {
         subtitle={t('settingForm.descriptionPersonalInfo')}
         highlighted={isEditing}
         action={
-          <Box sx={{ display: 'flex', gap: 1 }}>
+          <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
             {isEditing && (
               <Button
                 variant="text"
@@ -58,8 +60,12 @@ export function PersonalInformation() {
                 size="large"
                 sx={{
                   color: 'primary.main',
-                  width: '43px',
                   textTransform: 'none',
+                  width: {
+                    xs: '100%',
+                    sm: 'auto',
+                  },
+                  fontSize: { xs: '0.85rem', sm: '1rem' },
                 }}
               >
                 {t('settingForm.rejectButton')}
@@ -78,9 +84,13 @@ export function PersonalInformation() {
                   ? 'primary.main'
                   : 'background.paper',
                 color: isEditing ? 'primary.contrastText' : 'primary.main',
-                px: '22px',
+                px: { xs: 2, sm: '22px' },
-                py: '8px',
+                py: { xs: '6px', sm: '8px' },
-                width: isEditing ? '85px' : '93px',
+                width: {
+                  xs: '100%',
+                  sm: isEditing ? '85px' : '93px',
+                },
+                fontSize: { xs: '0.9rem', sm: '1rem' },
               }}
             >
               {isEditing

src/features/profile/components/PhoneNumber.tsx

@@ -4,21 +4,35 @@ import { useState, type ChangeEvent } from 'react';
 import { CardContainer } from '@/components/CardContainer';
 import { CountDownTimer } from '@/components/CountDownTimer';
 import { useTranslation } from 'react-i18next';
+import { CustomAlert } from '@/components/CustomAlert';
 
 export function PhoneNumber() {
   const { t } = useTranslation('profileSetting');
   const [isEditing, setIsEditing] = useState(false);
   const [phoneNumber, setPhoneNumber] = useState('');
   const [verificationCode, setVerificationCode] = useState('');
+  const [showEmailAlert, setShowEmailAlert] = useState(false);
   const [buttonState, setButtonState] = useState<'default' | 'counting'>(
     'default',
   );
   const [isVerifying, setIsVerifying] = useState(false);
   const [isVerified, setIsVerified] = useState(false);
 
-  const phones = [
+  const handleVerifyClick = () => {
-    { phone: '09123456789', time: '۱ ماه پیش', withCode: '+989123456789' },
+    if (!verificationCode || isVerifying) return;
-  ];
+    handleVerifyCode();
+    setTimeout(() => {
+      setShowEmailAlert(true);
+    }, 1600);
+  };
+
+  const [phones, setPhone] = useState([
+    {
+      phone: '09123456789',
+      time: '۱ ماه پیش',
+      withCode: '+989123456789',
+    },
+  ]);
 
   const handleSendCode = () => {
     setButtonState('counting');
@@ -30,14 +44,27 @@ export function PhoneNumber() {
     setTimeout(() => {
       setIsVerifying(false);
       setIsVerified(true);
+      setShowEmailAlert(true);
+
+      const newPhone = '+98' + phoneNumber.slice(1);
+      setPhone([
+        { phone: phoneNumber, time: 'چند ثانیه پیش', withCode: newPhone },
+      ]);
     }, 1500);
   };
 
   const toggleEdit = () => {
-    setIsEditing((prev) => !prev);
+    setIsEditing((prev) => {
-    setButtonState('default');
+      const enteringEditMode = !prev;
-    setIsVerified(false);
+      if (enteringEditMode) {
-    setVerificationCode('');
+        setPhoneNumber('');
+        setVerificationCode('');
+        setIsVerified(false);
+        setButtonState('default');
+        setShowEmailAlert(false);
+      }
+      return enteringEditMode;
+    });
   };
 
   const handlePhoneNumberChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -55,7 +82,7 @@ export function PhoneNumber() {
       sx={{
         display: 'flex',
         justifyContent: 'center',
-        alignItems: 'center',
+        width: '100%',
         px: 2,
         backgroundColor: 'background.paper',
       }}
@@ -165,7 +192,7 @@ export function PhoneNumber() {
                 >
                   <TickCircle
                     size="24"
-                    style={{ color: 'black' }}
+                    style={{ color: '#43A047' }}
                     variant="Bold"
                   />
                   <Typography sx={{ color: 'success.main' }}>
@@ -177,7 +204,9 @@ export function PhoneNumber() {
                   <Button
                     variant="text"
                     onClick={handleSendCode}
-                    disabled={buttonState === 'counting'}
+                    disabled={
+                      buttonState === 'counting' || phoneNumber.length === 0
+                    }
                     sx={{
                       textTransform: 'none',
                       minWidth: '170px',
@@ -221,9 +250,10 @@ export function PhoneNumber() {
                     style: { textAlign: 'right' },
                   }}
                 />
+
                 <Button
                   variant="contained"
-                  onClick={handleVerifyCode}
+                  onClick={handleVerifyClick}
                   disabled={isVerifying || verificationCode.length === 0}
                   sx={{
                     textTransform: 'none',
@@ -252,6 +282,15 @@ export function PhoneNumber() {
                 </Button>
               </Box>
             )}
+            <CustomAlert
+              message={t('settingForm.successfulChangePhone')}
+              rtl
+              open={showEmailAlert}
+              onClose={() => setShowEmailAlert(false)}
+              severity="success"
+              duration={4000}
+              delayOnClose={2000}
+            />
           </Box>
         ) : (
           <Box sx={{ px: { xs: 2, sm: 4 } }}>

src/features/profile/components/SocialMedia.tsx

@@ -56,7 +56,7 @@ export function SocialMedia() {
       sx={{
         display: 'flex',
         justifyContent: 'center',
-        alignItems: 'center',
+        width: '100%',
         px: 2,
         backgroundColor: 'background.paper',
       }}