fix: responsiveness

2025-07-27 11:59:55 +03:30
parent 8d72880695
commit 594de53486
7 changed files with 220 additions and 60 deletions
--- a/public/locales/fa/profileSetting.json
+++ b/public/locales/fa/profileSetting.json
@@ -37,6 +37,7 @@
    "uploadPicture": "بارگذاری تصویر",
    "phoneNumberText": "شماره تماس جدید شما جایگزین شماره تماس قبلی",
    "verb": "خواهد شد",
-    "notDetermined": "تعیین نشده"
+    "notDetermined": "تعیین نشده",
+    "successfulChangePhone": "شماره تماس با موفقیت تغییر کرد"
  }
 }
--- a/src/App.tsx
+++ b/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 = () => {
-//   const { mode, setMode } = useColorScheme();
+export const ThemeToggleButton = () => {
+  const { mode, setMode } = useColorScheme();

-//   return (
-//     <Button
-//       variant="contained"
-//       onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}
-//     >
-//       Switch to {mode === 'light' ? 'Dark' : 'Light'} Mode
-//     </Button>
-//   );
-// };
+  return (
+    <Button
+      variant="contained"
+      onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}
+    >
+      Switch to {mode === 'light' ? 'Dark' : 'Light'} Mode
+    </Button>
+  );
+};
--- a/src/components/CardContainer.tsx
+++ b/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',
-        gap: 2,
+        justifyContent: 'center',
        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',
-          alignItems: 'center',
-          backgroundColor: highlighted ? 'primary.light' : 'background.default',
-          p: 2,
-          borderRadius: 1,
+          flexDirection: 'column',
+          gap: 2,
+          mx: 'auto',
+          px: { xs: 2, sm: 3, md: 4 },
        }}
      >
-        <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
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: { xs: 'flex-start', sm: 'center' },
+            flexDirection: { xs: 'column', sm: 'row' },
+            backgroundColor: highlighted
+              ? 'primary.light'
+              : 'background.default',
+            p: 2,
+            borderRadius: 1,
+            gap: { xs: 1, sm: 0 },
+          }}
+        >
+          <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>
  );
 }
--- a/src/components/CustomAlert.tsx
+++ b/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>
+  );
+};
--- a/src/features/profile/components/PersonalInformation.tsx
+++ b/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',
-                py: '8px',
-                width: isEditing ? '85px' : '93px',
+                px: { xs: 2, sm: '22px' },
+                py: { xs: '6px', sm: '8px' },
+                width: {
+                  xs: '100%',
+                  sm: isEditing ? '85px' : '93px',
+                },
+                fontSize: { xs: '0.9rem', sm: '1rem' },
              }}
            >
              {isEditing
--- a/src/features/profile/components/PhoneNumber.tsx
+++ b/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 = [
-    { phone: '09123456789', time: '۱ ماه پیش', withCode: '+989123456789' },
-  ];
+  const handleVerifyClick = () => {
+    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);
-    setButtonState('default');
-    setIsVerified(false);
-    setVerificationCode('');
+    setIsEditing((prev) => {
+      const enteringEditMode = !prev;
+      if (enteringEditMode) {
+        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 } }}>
--- a/src/features/profile/components/SocialMedia.tsx
+++ b/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',
      }}