fix: styles

src/features/authentication/components/EmailSection.tsx

@@ -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>
     </>
   );
 }

src/features/authentication/components/UserCompletionForm.tsx

@@ -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%',