amir/Account
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: styles

Browse Source
This commit is contained in:
Koosha Lahouti
2025-08-12 02:49:57 +03:30
parent 8bb36da8d6
commit 437245f54f
8 changed files with 95 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
public/locales/fa/completionForm.json
View File

@@ -30,6 +30,7 @@
"country": "کشور",
"dateOfBirth": "تاریخ تولد(اختیاری)",
"invalidCountry": "کشور انتخاب شده صحیح نیست",
"rules": "قوانین و مقررات"
"rules": "قوانین و مقررات",
"alertSuccess": "ایمیل با موفقیت تایید شد"
}
}

11
src/App.tsx
View File

@@ -9,6 +9,7 @@ import {
import './App.css';
import { useTranslation } from 'react-i18next';
import { LanguageManager } from './components/LanguageManager';
import { UserCompletionForm } from './features/authentication/components/UserCompletionForm';
function App() {
const { t } = useTranslation();
@@ -18,12 +19,13 @@ function App() {
<>
<CssBaseline />
<LanguageManager />
<div style={{ padding: '16px' }}>
<UserCompletionForm />
<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>
@@ -41,10 +43,7 @@ function App() {
error
</Alert>
</Box>
</div>
<Button onClick={() => showToast({ message: 'info toast' })}>
toast
</Button>
</div> */}
</>
);
}

30
src/assets/logo.svg Normal file
View File

@@ -0,0 +1,30 @@
<svg width="120" height="24" viewBox="0 0 120 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3210_10487)">
<path d="M36.0547 18.7496V6.1499H38.3582V16.5897H43.9427V18.7496H36.0547Z" fill="#2979FF"/>
<path d="M48.9163 19.0016C48.0553 19.0016 47.2816 18.8216 46.5952 18.4616C45.9088 18.1017 45.3678 17.5797 44.9722 16.8957C44.5767 16.2117 44.3789 15.3897 44.3789 14.4297V14.1417C44.3789 13.1817 44.5767 12.3598 44.9722 11.6758C45.3678 10.9918 45.9088 10.4698 46.5952 10.1098C47.2816 9.74983 48.0553 9.56982 48.9163 9.56982C49.7772 9.56982 50.5509 9.74983 51.2373 10.1098C51.9237 10.4698 52.4647 10.9918 52.8603 11.6758C53.2558 12.3598 53.4536 13.1817 53.4536 14.1417V14.4297C53.4536 15.3897 53.2558 16.2117 52.8603 16.8957C52.4647 17.5797 51.9237 18.1017 51.2373 18.4616C50.5509 18.8216 49.7772 19.0016 48.9163 19.0016ZM48.9163 16.9857C49.591 16.9857 50.1495 16.7636 50.5916 16.3197C51.0337 15.8637 51.2548 15.2157 51.2548 14.3757V14.1957C51.2548 13.3557 51.0337 12.7137 50.5916 12.2697C50.1611 11.8138 49.6027 11.5857 48.9163 11.5857C48.2415 11.5857 47.683 11.8138 47.2409 12.2697C46.7988 12.7137 46.5778 13.3557 46.5778 14.1957V14.3757C46.5778 15.2157 46.7988 15.8637 47.2409 16.3197C47.683 16.7636 48.2415 16.9857 48.9163 16.9857Z" fill="black"/>
<path d="M54.2793 14.3217V14.0337C54.2793 13.0977 54.4596 12.2997 54.8203 11.6397C55.1809 10.9678 55.6579 10.4578 56.2513 10.1098C56.8563 9.74983 57.5136 9.56982 58.2233 9.56982C59.0144 9.56982 59.6136 9.71378 60.0208 10.0018C60.428 10.2898 60.7246 10.5898 60.9108 10.9017H61.225V9.82177H63.3889V20.3336C63.3889 20.9456 63.2144 21.4315 62.8654 21.7916C62.5163 22.1636 62.051 22.3495 61.4692 22.3495H55.6754V20.3696H60.7014C61.0272 20.3696 61.19 20.1896 61.19 19.8296V17.5077H60.8759C60.7596 17.6997 60.5967 17.8976 60.3873 18.1017C60.1779 18.2936 59.8987 18.4557 59.5496 18.5876C59.2006 18.7196 58.7585 18.7857 58.2233 18.7857C57.5136 18.7857 56.8563 18.6116 56.2513 18.2637C55.6579 17.9036 55.1809 17.3936 54.8203 16.7336C54.4596 16.0617 54.2793 15.2577 54.2793 14.3217ZM58.8516 16.8056C59.5264 16.8056 60.0906 16.5836 60.5443 16.1397C60.9981 15.6957 61.225 15.0717 61.225 14.2677V14.0877C61.225 13.2717 60.9981 12.6477 60.5443 12.2157C60.1022 11.7718 59.538 11.5498 58.8516 11.5498C58.1767 11.5498 57.6125 11.7718 57.1588 12.2157C56.705 12.6477 56.4781 13.2717 56.4781 14.0877V14.2677C56.4781 15.0717 56.705 15.6957 57.1588 16.1397C57.6125 16.5836 58.1767 16.8056 58.8516 16.8056Z" fill="black"/>
<path d="M69.1605 19.0016C68.2995 19.0016 67.5258 18.8216 66.8394 18.4616C66.153 18.1017 65.612 17.5797 65.2164 16.8957C64.8209 16.2117 64.623 15.3897 64.623 14.4297V14.1417C64.623 13.1817 64.8209 12.3598 65.2164 11.6758C65.612 10.9918 66.153 10.4698 66.8394 10.1098C67.5258 9.74983 68.2995 9.56982 69.1605 9.56982C70.0214 9.56982 70.795 9.74983 71.4815 10.1098C72.1679 10.4698 72.7089 10.9918 73.1045 11.6758C73.5 12.3598 73.6978 13.1817 73.6978 14.1417V14.4297C73.6978 15.3897 73.5 16.2117 73.1045 16.8957C72.7089 17.5797 72.1679 18.1017 71.4815 18.4616C70.795 18.8216 70.0214 19.0016 69.1605 19.0016ZM69.1605 16.9857C69.8352 16.9857 70.3937 16.7636 70.8357 16.3197C71.2779 15.8637 71.4989 15.2157 71.4989 14.3757V14.1957C71.4989 13.3557 71.2779 12.7137 70.8357 12.2697C70.4053 11.8138 69.8469 11.5857 69.1605 11.5857C68.4856 11.5857 67.9272 11.8138 67.4851 12.2697C67.043 12.7137 66.822 13.3557 66.822 14.1957V14.3757C66.822 15.2157 67.043 15.8637 67.4851 16.3197C67.9272 16.7636 68.4856 16.9857 69.1605 16.9857Z" fill="black"/>
<path d="M74.9411 18.7497V9.82185H77.1401V18.7497H74.9411ZM76.0406 8.77793C75.6446 8.77793 75.3079 8.64588 75.0281 8.38186C74.7608 8.11792 74.627 7.7699 74.627 7.33792C74.627 6.90593 74.7608 6.55794 75.0281 6.29394C75.3079 6.02995 75.6446 5.89795 76.0406 5.89795C76.4479 5.89795 76.7854 6.02995 77.0524 6.29394C77.3201 6.55794 77.4544 6.90593 77.4544 7.33792C77.4544 7.7699 77.3201 8.11792 77.0524 8.38186C76.7854 8.64588 76.4479 8.77793 76.0406 8.77793Z" fill="black"/>
<path d="M78.793 22.3495V9.82177H80.9567V10.9017H81.271C81.4682 10.5538 81.7765 10.2478 82.1957 9.98376C82.6142 9.70783 83.2135 9.56982 83.9935 9.56982C84.691 9.56982 85.3367 9.74983 85.93 10.1098C86.524 10.4578 87.001 10.9738 87.361 11.6577C87.7217 12.3417 87.9025 13.1697 87.9025 14.1417V14.4297C87.9025 15.4017 87.7217 16.2297 87.361 16.9136C87.001 17.5976 86.524 18.1196 85.93 18.4796C85.3367 18.8276 84.691 19.0016 83.9935 19.0016C83.47 19.0016 83.0275 18.9356 82.6667 18.8036C82.318 18.6836 82.033 18.5276 81.8117 18.3356C81.6025 18.1316 81.4337 17.9276 81.3055 17.7236H80.9912V22.3495H78.793ZM83.3297 17.0216C84.0167 17.0216 84.5807 16.7997 85.0225 16.3557C85.4762 15.8996 85.7035 15.2397 85.7035 14.3757V14.1957C85.7035 13.3317 85.4762 12.6778 85.0225 12.2337C84.5687 11.7777 84.0047 11.5498 83.3297 11.5498C82.6555 11.5498 82.0907 11.7777 81.637 12.2337C81.1832 12.6778 80.9567 13.3317 80.9567 14.1957V14.3757C80.9567 15.2397 81.1832 15.8996 81.637 16.3557C82.0907 16.7997 82.6555 17.0216 83.3297 17.0216Z" fill="black"/>
<path d="M92.7302 19.0016C91.6015 19.0016 90.6767 18.7496 89.9552 18.2456C89.2345 17.7417 88.798 17.0216 88.6465 16.0857L90.6707 15.5457C90.7525 15.9657 90.886 16.2956 91.0727 16.5357C91.27 16.7756 91.5085 16.9497 91.7882 17.0577C92.0785 17.1537 92.3927 17.2016 92.7302 17.2016C93.2425 17.2016 93.6205 17.1117 93.8642 16.9317C94.1087 16.7397 94.231 16.5057 94.231 16.2297C94.231 15.9536 94.1147 15.7437 93.8822 15.5997C93.649 15.4437 93.277 15.3177 92.7655 15.2217L92.2765 15.1317C91.6712 15.0117 91.1192 14.8497 90.619 14.6457C90.118 14.4297 89.7167 14.1357 89.4145 13.7637C89.1122 13.3918 88.9607 12.9118 88.9607 12.3238C88.9607 11.4357 89.275 10.7578 89.9035 10.2898C90.5312 9.80978 91.3577 9.56982 92.3815 9.56982C93.3467 9.56982 94.15 9.79176 94.7897 10.2358C95.4295 10.6798 95.848 11.2618 96.046 11.9818L94.0045 12.6297C93.9115 12.1738 93.7195 11.8497 93.4285 11.6577C93.1487 11.4657 92.8 11.3697 92.3815 11.3697C91.9622 11.3697 91.6427 11.4478 91.4215 11.6038C91.2002 11.7478 91.09 11.9518 91.09 12.2157C91.09 12.5037 91.2062 12.7198 91.4387 12.8637C91.6712 12.9957 91.9855 13.0977 92.3815 13.1697L92.8697 13.2597C93.5215 13.3797 94.1087 13.5418 94.6322 13.7457C95.1677 13.9377 95.5862 14.2197 95.8892 14.5917C96.2027 14.9517 96.3602 15.4437 96.3602 16.0677C96.3602 17.0037 96.0287 17.7297 95.3657 18.2456C94.714 18.7496 93.8357 19.0016 92.7302 19.0016Z" fill="black"/>
<path d="M100.8 18.8936C100.125 18.8936 99.5316 18.7376 99.0194 18.4256C98.5191 18.1017 98.1299 17.6577 97.8501 17.0936C97.5711 16.5296 97.4316 15.8817 97.4316 15.1497V9.82178H99.6306V14.9697C99.6306 15.6417 99.7874 16.1456 100.102 16.4817C100.427 16.8176 100.887 16.9857 101.48 16.9857C102.155 16.9857 102.679 16.7577 103.051 16.3017C103.423 15.8337 103.609 15.1857 103.609 14.3577V9.82178H105.808V18.7496H103.644V17.5797H103.33C103.191 17.8797 102.928 18.1736 102.545 18.4616C102.161 18.7496 101.579 18.8936 100.8 18.8936Z" fill="black"/>
<path d="M107.469 18.7495V9.82169H109.632V10.7937H109.947C110.098 10.4937 110.349 10.2357 110.698 10.0197C111.046 9.79168 111.506 9.67773 112.076 9.67773C112.693 9.67773 113.188 9.80375 113.56 10.0557C113.932 10.2957 114.217 10.6137 114.415 11.0097H114.729C114.927 10.6257 115.206 10.3077 115.566 10.0557C115.927 9.80375 116.439 9.67773 117.102 9.67773C117.637 9.67773 118.12 9.79771 118.551 10.0377C118.993 10.2657 119.342 10.6197 119.598 11.0997C119.865 11.5677 119.999 12.1616 119.999 12.8817V18.7495H117.8V13.0437C117.8 12.5517 117.678 12.1857 117.434 11.9457C117.19 11.6937 116.846 11.5677 116.404 11.5677C115.904 11.5677 115.514 11.7356 115.235 12.0717C114.967 12.3956 114.834 12.8636 114.834 13.4756V18.7495H112.635V13.0437C112.635 12.5517 112.513 12.1857 112.268 11.9457C112.024 11.6937 111.681 11.5677 111.238 11.5677C110.738 11.5677 110.348 11.7356 110.069 12.0717C109.801 12.3956 109.668 12.8636 109.668 13.4756V18.7495H107.469Z" fill="black"/>
<path d="M29.0854 12C29.0854 8.81744 27.8596 5.76516 25.6777 3.51472C23.4958 1.26429 20.5366 4.17348e-07 17.4509 0C14.3653 -4.17347e-07 11.406 1.26429 9.22409 3.51472C7.04218 5.76516 5.81641 8.81744 5.81641 12H9.45224C10.657 12 11.5966 10.9587 12.0379 9.80234C12.3277 9.04317 12.7673 8.3455 13.3375 7.75736C14.4284 6.63215 15.9081 6.00001 17.4509 6.00001C18.9937 6.00001 20.4734 6.63215 21.5644 7.75736C22.6553 8.88258 23.2681 10.4087 23.2681 12H29.0854Z" fill="url(#paint0_linear_3210_10487)"/>
<path d="M22.3833 16.5922C22.968 15.1363 23.269 13.5758 23.269 12H29.0856C29.0856 18.6274 23.8766 24 17.4511 24C16.4448 24 15.4683 23.8682 14.5371 23.6205C15.064 23.4805 15.5819 23.3022 16.0868 23.0865C17.4983 22.4835 18.7809 21.5996 19.8613 20.4853C20.9417 19.371 21.7987 18.0481 22.3833 16.5922Z" fill="#FBCF8E"/>
<path d="M0 12C-2.18575e-07 13.5759 0.300935 15.1363 0.885623 16.5923C1.47031 18.0482 2.3273 19.371 3.40767 20.4854C4.48803 21.5996 5.77061 22.4835 7.18217 23.0866C8.59373 23.6897 10.1066 24 11.6345 24C13.1623 24 14.6753 23.6897 16.0868 23.0866C17.4984 22.4835 18.781 21.5996 19.8614 20.4854C20.9417 19.371 21.7987 18.0482 22.3834 16.5923C22.9681 15.1363 23.2691 13.5759 23.2691 12H19.6332C18.4284 12 17.4888 13.0414 17.0475 14.1976C17.035 14.2306 17.0221 14.2634 17.0089 14.2962C16.7166 15.0241 16.2881 15.6856 15.7479 16.2427C15.2078 16.7998 14.5664 17.2418 13.8607 17.5433C13.1549 17.8449 12.3985 18.0001 11.6345 18.0001C10.8706 18.0001 10.1141 17.8449 9.40837 17.5433C8.70255 17.2418 8.0613 16.7998 7.52108 16.2427C6.9809 15.6856 6.55241 15.0241 6.26007 14.2962C5.96772 13.5682 5.81726 12.788 5.81726 12H0Z" fill="url(#paint1_linear_3210_10487)"/>
<path d="M0.00195312 12C0.00195312 5.37257 5.21089 0 11.6364 0C12.6425 0 13.6187 0.131696 14.5498 0.379295C12.5519 0.91015 10.7088 1.98446 9.22509 3.51473C7.0432 5.76515 5.81744 8.81744 5.81744 12H0.00195312Z" fill="#73E5E2"/>
</g>
<defs>
<linearGradient id="paint0_linear_3210_10487" x1="29.0854" y1="6.00001" x2="5.81641" y2="6.00001" gradientUnits="userSpaceOnUse">
<stop stop-color="#73E5E2"/>
<stop offset="1" stop-color="#394F87"/>
</linearGradient>
<linearGradient id="paint1_linear_3210_10487" x1="7.6284e-07" y1="18.0001" x2="23.2691" y2="18.0001" gradientUnits="userSpaceOnUse">
<stop stop-color="#FBDC8E"/>
<stop offset="1" stop-color="#FB958E"/>
</linearGradient>
<clipPath id="clip0_3210_10487">
<rect width="120" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

97
src/components/CustomAlert.tsx
View File

@@ -1,97 +0,0 @@
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>
);
};

7
src/components/Logo.tsx Normal file
View File

@@ -0,0 +1,7 @@
import LogoSvg from '@/assets/logo.svg';
function Logo() {
return <img src={LogoSvg} style={{ width: '150px', height: 'auto' }} />;
}
export default Logo;

23
src/components/Toast.tsx Normal file
View File

@@ -0,0 +1,23 @@
import { Alert, Snackbar, type AlertColor } from '@mui/material';
import React, { type PropsWithChildren } from 'react';
export interface ToastProps extends PropsWithChildren {
color: AlertColor | undefined;
open: boolean;
onClose: () => void;
}
export const Toast = ({ color, open, onClose, children }: ToastProps) => {
return (
<Snackbar sx={{ minWidth: '396px' }} open={open} onClose={onClose}>
<Alert
onClose={onClose}
severity={color}
variant="filled"
sx={{ width: '100%' }}
>
{children}
</Alert>
</Snackbar>
);
};

48
src/features/authentication/components/EmailSection.tsx
View File

@@ -11,7 +11,7 @@ import {
} from '@mui/material';
import { useTranslation } from 'react-i18next';
import { TickCircle, Edit, Refresh } from 'iconsax-react';
import { CustomAlert } from '@/components/CustomAlert';
import { Toast } from '@/components/Toast';
interface EmailSectionProps {
showEmail: boolean;
@@ -49,14 +49,15 @@ export function EmailSection({
handleEditEmail,
}: EmailSectionProps) {
const { t } = useTranslation('completionForm');
const [showSuccessAlert, setShowSuccessAlert] = useState(false);
const [showEmailErrorAlert, setShowEmailErrorAlert] = useState(false);
const [showSuccessToast, setShowSuccessToast] = useState(false);
const [showErrorToast, setShowErrorToast] = useState(false);
const onSendCodeClick = () => {
if (!correctEmail) {
setShowEmailErrorAlert(true);
setShowErrorToast(true);
return;
}
setShowEmailErrorAlert(false);
setShowErrorToast(false);
handleSendCode();
};
@@ -66,7 +67,7 @@ export function EmailSection({
useEffect(() => {
if (emailVerified) {
setShowSuccessAlert(true);
setShowSuccessToast(true);
}
}, [emailVerified]);
@@ -173,17 +174,6 @@ export function EmailSection({
{getButtonLabel()}
</Button>
)}
{showEmailErrorAlert && (
<CustomAlert
open={showEmailErrorAlert}
onClose={() => setShowEmailErrorAlert(false)}
message={t('completion.emailCorrectForm')}
severity="error"
duration={4000}
delayOnClose={2000}
rtl
/>
)}
</Box>
{email && (
@@ -247,15 +237,21 @@ export function EmailSection({
</Box>
)}
<CustomAlert
open={showSuccessAlert}
onClose={() => setShowSuccessAlert(false)}
message="ایمیل با موفقیت تایید شد"
severity="success"
duration={4000}
delayOnClose={2000}
rtl
/>
<Toast
color="success"
open={showSuccessToast}
onClose={() => setShowSuccessToast(false)}
>
{t('completion.alertSuccess')}
</Toast>
<Toast
color="error"
open={showErrorToast}
onClose={() => setShowErrorToast(false)}
>
{t('completion.emailCorrectForm')}
</Toast>
</>
);
}

6
src/features/authentication/components/UserCompletionForm.tsx
View File

@@ -5,6 +5,7 @@ import { PersonalInfoFields } from './PersonalInfoFields';
import { PasswordSection } from './PasswordSection';
import { EmailSection } from './EmailSection';
import { SubmitSection } from './SubmitSection';
import Logo from '@/components/Logo';
export function UserCompletionForm() {
const { t } = useTranslation('completionForm');
@@ -100,12 +101,17 @@ export function UserCompletionForm() {
<Box
sx={{
backgroundColor: 'background.default',
minHeight: '100vh',
flexDirection: 'column',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
p: { xs: 1, sm: 2, md: 3 },
}}
>
<Box sx={{ mb: 2 }}>
<Logo />
</Box>
<Box
sx={{
width: '100%',