82 lines
2.1 KiB
JavaScript
Executable File
82 lines
2.1 KiB
JavaScript
Executable File
import React from "react";
|
|
// Chakra imports
|
|
import {
|
|
Button,
|
|
Flex,
|
|
FormControl,
|
|
FormLabel,
|
|
Input,
|
|
Text,
|
|
useColorModeValue,
|
|
LightMode,
|
|
} from "@chakra-ui/react";
|
|
// Assets
|
|
import illustration from "assets/img/illustration-auth.png";
|
|
import AuthIllustration from "layouts/AuthIllustration";
|
|
|
|
function ResetIllustration() {
|
|
// Chakra color mode
|
|
const textColor = useColorModeValue("blue.500", "blue.500");
|
|
return (
|
|
<AuthIllustration
|
|
illustrationBackground='linear-gradient(180deg, #3182CE 0%, #63B3ED 100%)'
|
|
image={illustration}>
|
|
<Flex
|
|
w='100%'
|
|
h='100%'
|
|
alignItems='start'
|
|
justifyContent='start'
|
|
mb={{ base: "0px", md: "60px" }}
|
|
mt={{ base: "60px", md: "34vh" }}>
|
|
<Flex
|
|
zIndex='2'
|
|
direction='column'
|
|
w='445px'
|
|
background='transparent'
|
|
borderRadius='15px'
|
|
pe={{ base: "0px", md: "80px" }}
|
|
mx={{ base: "20px", md: "0px" }}
|
|
mb={{ base: "20px", md: "auto" }}>
|
|
<Text
|
|
fontWeight='bold'
|
|
color={textColor}
|
|
mb='10px'
|
|
fontSize={{ base: "3xl", md: "4xl" }}>
|
|
Reset password
|
|
</Text>
|
|
<Text fontWeight='regular' color='gray.400' mb='35px'>
|
|
You will receive an e-mail in maximum 60 seconds.
|
|
</Text>
|
|
<FormControl>
|
|
<FormLabel ms='4px' fontSize='sm' fontWeight='normal'>
|
|
Email
|
|
</FormLabel>
|
|
<Input
|
|
variant='main'
|
|
fontSize='sm'
|
|
ms='4px'
|
|
type='text'
|
|
placeholder='Your email address'
|
|
mb='24px'
|
|
size='lg'
|
|
/>
|
|
<LightMode>
|
|
<Button
|
|
fontSize='10px'
|
|
colorScheme='blue'
|
|
fontWeight='bold'
|
|
w='100%'
|
|
h='45'
|
|
mb='24px'>
|
|
SEND
|
|
</Button>
|
|
</LightMode>
|
|
</FormControl>
|
|
</Flex>
|
|
</Flex>
|
|
</AuthIllustration>
|
|
);
|
|
}
|
|
|
|
export default ResetIllustration;
|