نسخ من RaghadAlkhous/RestaurantDash
133 أسطر
4.1 KiB
JavaScript
133 أسطر
4.1 KiB
JavaScript
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;
|
|
|