نسخ من RaghadAlkhous/RestaurantDash
update the dashbord and router
هذا الالتزام موجود في:
raghad
132
src/components/Authentication/ForgetPassword/Congratulations.js
Normal file
132
src/components/Authentication/ForgetPassword/Congratulations.js
Normal file
@@ -0,0 +1,132 @@
|
||||
import React from 'react';
|
||||
import { Box, TextField, Typography, Button, useTheme } from '@mui/material';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const Congratulations = ({ emailOrPhone, setEmailOrPhone }) => {
|
||||
const navigate = useNavigate();
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
overflow: 'auto',
|
||||
scrollbarWidth: 'none',
|
||||
'&::-webkit-scrollbar': {
|
||||
display: 'none',
|
||||
},
|
||||
|
||||
mt: { xs: 4, sm: 8, md: 2 } // هامش علوي متجاوب
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
marginTop: '90px',
|
||||
position: 'relative',
|
||||
width: 132,
|
||||
height: 132,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
width: 139,
|
||||
height: 139,
|
||||
borderRadius: '50%',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
zIndex: 0,
|
||||
backgroundColor: '#FAFAFA'
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
|
||||
width: 120,
|
||||
height: 120,
|
||||
backgroundColor: '#E9EFFF',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/images/hand.png"
|
||||
style={{ width: 60, height: 60, objectFit: 'contain' }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
<Typography
|
||||
variant="h4"
|
||||
fontWeight={700}
|
||||
marginTop={3}
|
||||
marginBottom={2}
|
||||
sx={{
|
||||
fontSize: {
|
||||
xs: '1.8rem',
|
||||
sm: '2rem',
|
||||
md: '2.2rem'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Congratulations!
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
variant="h4"
|
||||
fontWeight={400}
|
||||
width='390px'
|
||||
marginLeft='20px'
|
||||
sx={{
|
||||
color: '#5F6868',
|
||||
fontSize: {
|
||||
xs: '0.8rem',
|
||||
md: '1.1rem'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Your password has been successfully updated. Thank you for choosing our service
|
||||
</Typography>
|
||||
|
||||
|
||||
{/* زر التنقل إلى صفحة تسجيل الدخول */}
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
onClick={() => navigate('/login')}
|
||||
sx={{
|
||||
marginTop: '20px',
|
||||
color: 'white',
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
borderRadius: '30px',
|
||||
textTransform: 'none',
|
||||
fontWeight: 500,
|
||||
fontSize: '16px',
|
||||
height: '52px',
|
||||
padding: '12px',
|
||||
maxWidth: '390px',
|
||||
px: 2,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.hover,
|
||||
transition: 'all 0.4s ease'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Login
|
||||
</Button>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Congratulations;
|
||||
|
||||
المرجع في مشكلة جديدة
حظر مستخدم