crimson-quirks/crimson-quirks-ui
1
0
Fork 0
mirror of https://github.com/hazemKrimi/crimson-quirks-ui.git synced 2026-05-01 18:20:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add auth pages ui

Browse Source
This commit is contained in:
Hazem Krimi
2021-04-23 18:26:02 +01:00
parent ad9a101d58
commit 848016d0cb
11 changed files with 548 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Auth/AdditionalInfo/index.tsx
+99
View File
@@ -0,0 +1,99 @@
import { Box, Button, Input, Select, Text } from '../../../components';
import { theme } from '../../../themes';
import { Wrapper } from './styles';
const AdditionalInfo = () => {
return (
<Wrapper>
<Box
display='grid'
alignItems='center'
justifyContent='center'
padding='100px 300px'
>
<Box
background={theme.colors.white.main}
padding='80px 175px'
borderRadius='5px'
>
<Box marginBottom='35px' textAlign='center'>
<Text variant='headline' weight='bold'>
Tell us more about yourself
</Text>
</Box>
<Box
display='grid'
gridTemplateColumns='auto'
rowGap='0.5rem'
position='relative'
>
<Input
name='firstName'
label='First Name'
value=''
onChange={() => {}}
/>
<Input
name='lastName'
label='Last Name'
value=''
onChange={() => {}}
/>
<Box
display='grid'
gridTemplateColumns='1fr 1.5fr'
columnGap='10px'
>
<Select
name='coutryConde'
label='Country Code'
options={[{ value: '+216', label: '+216' }]}
onChange={() => {}}
value=''
/>
<Input
name='phone'
type='tel'
label='Phone'
value=''
onChange={() => {}}
/>
</Box>
<Input
name='address'
label='Address'
value=''
onChange={() => {}}
/>
<Input
name='country'
label='Country'
value=''
onChange={() => {}}
/>
<Box display='grid' gridTemplateColumns='2fr 1fr' columnGap='10px'>
<Input name='city' label='City' value='' onChange={() => {}} />
<Input
name='zipCode'
label='Zip Code'
value=''
onChange={() => {}}
/>
</Box>
<Box marginTop='0.5rem'>
<Button
fullWidth
variant='primary-action'
color='client'
text='Done'
onClick={() => {}}
/>
</Box>
</Box>
</Box>
</Box>
</Wrapper>
);
};
export default AdditionalInfo;
src/pages/Auth/AdditionalInfo/styles.ts
+5
View File
@@ -0,0 +1,5 @@
import styled from 'styled-components';
export const Wrapper = styled.div`
background: ${({ theme }) => theme.colors.client.main};
`;
src/pages/Auth/ForgotPassword/index.tsx
+98
View File
@@ -0,0 +1,98 @@
import { Login as LoginIllustration, Logo } from '../../../assets';
import { Box, Button, Input, Link, Text } from '../../../components';
import { theme } from '../../../themes';
import { Wrapper } from './styles';
const ForgotPassword = () => {
return (
<Wrapper>
<Box
display='grid'
gridTemplateColumns='1fr 1.25fr'
height='100vh'
overflow='hidden'
>
<Box padding='3.438rem 4.375rem'>
<Box
display='flex'
flexDirection='row'
alignItems='center'
marginBottom='3.125rem'
>
<Box marginRight='0.625rem'>
<Logo />
</Box>
<Text variant='headline' weight='bold'>
astrobuild
</Text>
</Box>
<Text variant='headline' weight='bold'>
Forgot Password
</Text>
<Box
display='grid'
gridTemplateColumns='auto'
alignItems='center'
rowGap='0.5rem'
padding='1.563rem 0rem'
>
<Input label='Email' name='email' value='' onChange={() => {}} />
<Input label='Code' name='code' value='' onChange={() => {}} />
<Box
display='grid'
gridTemplateColumns='auto'
rowGap='1rem'
marginTop='0.5rem'
>
<Button
variant='primary-action'
fullWidth
color='client'
text='Receive Code'
onClick={() => {}}
/>
</Box>
<Box display='flex' flexDirection='row'>
<Box flexGrow='1'>
<Text variant='body' display='inline'>
Don’t have an account ?{' '}
</Text>
<Link href='/signup'>Signup</Link>
</Box>
<Link href='/' color='gray'>
Build a Project
</Link>
</Box>
</Box>
</Box>
<Box
background={theme.colors.client.main}
display='flex'
flexDirection='column'
alignItems='center'
justifyContent='center'
>
<Box>
<LoginIllustration />
</Box>
<Box marginTop='1.563rem'>
<Text color='white' variant='headline' align='center'>
Make your idea alive
</Text>
</Box>
<Box marginTop='0.938rem'>
<Text
color='rgba(255, 255, 255, 0.6)'
variant='subheader'
align='center'
>
Create your dream software with no coding skills
</Text>
</Box>
</Box>
</Box>
</Wrapper>
);
};
export default ForgotPassword;
src/pages/Auth/ForgotPassword/styles.ts
+3
View File
@@ -0,0 +1,3 @@
import styled from 'styled-components';
export const Wrapper = styled.div``;
src/pages/Auth/Login/index.tsx
+110
View File
@@ -0,0 +1,110 @@
import { Google, Login as LoginIllustration, Logo } from '../../../assets';
import { Box, Button, Input, Link, Text } from '../../../components';
import { theme } from '../../../themes';
import { Wrapper } from './styles';
const Login = () => {
return (
<Wrapper>
<Box
display='grid'
gridTemplateColumns='1fr 1.25fr'
height='100vh'
overflow='hidden'
>
<Box padding='3.438rem 4.375rem'>
<Box
display='flex'
flexDirection='row'
alignItems='center'
marginBottom='3.125rem'
>
<Box marginRight='0.625rem'>
<Logo />
</Box>
<Text variant='headline' weight='bold'>
astrobuild
</Text>
</Box>
<Text variant='headline' weight='bold'>
Login
</Text>
<Box
display='grid'
gridTemplateColumns='auto'
alignItems='center'
rowGap='0.5rem'
padding='1.563rem 0rem'
>
<Input label='Email' name='email' value='' onChange={() => {}} />
<Input
label='Password'
name='password'
type='password'
value=''
onChange={() => {}}
/>
<Box textAlign='right'>
<Link href='/forgot-password'>Forgot Password</Link>
</Box>
<Box display='grid' gridTemplateColumns='auto' rowGap='1rem'>
<Button
variant='primary-action'
fullWidth
color='client'
text='Login'
onClick={() => {}}
/>
<Button
variant='secondary-action'
fullWidth
color='client'
text='Login with Google'
iconLeft={<Google />}
onClick={() => {}}
/>
</Box>
<Box display='flex' flexDirection='row'>
<Box flexGrow='1'>
<Text variant='body' display='inline'>
Don’t have an account ?{' '}
</Text>
<Link href='/signup'>Signup</Link>
</Box>
<Link href='/' color='gray'>
Build a Project
</Link>
</Box>
</Box>
</Box>
<Box
background={theme.colors.client.main}
display='flex'
flexDirection='column'
alignItems='center'
justifyContent='center'
>
<Box>
<LoginIllustration />
</Box>
<Box marginTop='1.563rem'>
<Text color='white' variant='headline' align='center'>
Make your idea alive
</Text>
</Box>
<Box marginTop='0.938rem'>
<Text
color='rgba(255, 255, 255, 0.6)'
variant='subheader'
align='center'
>
Create your dream software with no coding skills
</Text>
</Box>
</Box>
</Box>
</Wrapper>
);
};
export default Login;
src/pages/Auth/Login/styles.ts
+7
View File
@@ -0,0 +1,7 @@
import styled from 'styled-components';
export const Wrapper = styled.div`
button svg path {
stroke: transparent !important;
}
`;
src/pages/Auth/RecoverAccount/index.tsx
+97
View File
@@ -0,0 +1,97 @@
import { Login as LoginIllustration, Logo } from '../../../assets';
import { Box, Button, Input, Text } from '../../../components';
import { theme } from '../../../themes';
import { Wrapper } from './styles';
const RecoverAccount = () => {
return (
<Wrapper>
<Box
display='grid'
gridTemplateColumns='1fr 1.25fr'
height='100vh'
overflow='hidden'
>
<Box padding='3.438rem 4.375rem'>
<Box
display='flex'
flexDirection='row'
alignItems='center'
marginBottom='3.125rem'
>
<Box marginRight='0.625rem'>
<Logo />
</Box>
<Text variant='headline' weight='bold'>
astrobuild
</Text>
</Box>
<Text variant='headline' weight='bold'>
Recover Account
</Text>
<Box
display='grid'
gridTemplateColumns='auto'
alignItems='center'
rowGap='0.5rem'
padding='1.563rem 0rem'
>
<Input
label='New Password'
name='newPassword'
value=''
onChange={() => {}}
/>
<Input
label='Confirm New Password'
name='confirmNewPassword'
value=''
onChange={() => {}}
/>
<Box
display='grid'
gridTemplateColumns='auto'
rowGap='1rem'
marginTop='0.5rem'
>
<Button
variant='primary-action'
fullWidth
color='client'
text='Recover Account'
onClick={() => {}}
/>
</Box>
</Box>
</Box>
<Box
background={theme.colors.client.main}
display='flex'
flexDirection='column'
alignItems='center'
justifyContent='center'
>
<Box>
<LoginIllustration />
</Box>
<Box marginTop='1.563rem'>
<Text color='white' variant='headline' align='center'>
Make your idea alive
</Text>
</Box>
<Box marginTop='0.938rem'>
<Text
color='rgba(255, 255, 255, 0.6)'
variant='subheader'
align='center'
>
Create your dream software with no coding skills
</Text>
</Box>
</Box>
</Box>
</Wrapper>
);
};
export default RecoverAccount;
src/pages/Auth/RecoverAccount/styles.ts
+3
View File
@@ -0,0 +1,3 @@
import styled from 'styled-components';
export const Wrapper = styled.div``;
src/pages/Auth/Signup/index.tsx
+112
View File
@@ -0,0 +1,112 @@
import { Google, Signup as SignupIllustration, Logo } from '../../../assets';
import { Box, Button, Input, Link, Text } from '../../../components';
import { theme } from '../../../themes';
import { Wrapper } from './styles';
const Signup = () => {
return (
<Wrapper>
<Box
display='grid'
gridTemplateColumns='1fr 1.25fr'
height='100vh'
overflow='hidden'
>
<Box padding='3.438rem 4.375rem'>
<Box
display='flex'
flexDirection='row'
alignItems='center'
marginBottom='3.125rem'
>
<Box marginRight='0.625rem'>
<Logo />
</Box>
<Text variant='headline' weight='bold'>
astrobuild
</Text>
</Box>
<Text variant='headline' weight='bold'>
Signup
</Text>
<Box
display='grid'
gridTemplateColumns='auto'
alignItems='center'
rowGap='0.5rem'
padding='1.563rem 0rem'
>
<Input label='Email' name='email' value='' onChange={() => {}} />
<Input
label='Password'
name='password'
type='password'
value=''
onChange={() => {}}
/>
<Box
display='grid'
gridTemplateColumns='auto'
marginTop='0.5rem'
rowGap='1rem'
>
<Button
variant='primary-action'
fullWidth
color='client'
text='Signup'
onClick={() => {}}
/>
<Button
variant='secondary-action'
fullWidth
color='client'
text='Signup with Google'
iconLeft={<Google />}
onClick={() => {}}
/>
</Box>
<Box display='flex' flexDirection='row'>
<Box flexGrow='1'>
<Text variant='body' display='inline'>
Already have an account ?{' '}
</Text>
<Link href='/login'>Login</Link>
</Box>
<Link href='/' color='gray'>
Build a Project
</Link>
</Box>
</Box>
</Box>
<Box
background={theme.colors.client.main}
display='flex'
flexDirection='column'
alignItems='center'
justifyContent='center'
>
<Box>
<SignupIllustration />
</Box>
<Box>
<Text color='white' variant='headline' align='center'>
Make your idea alive
</Text>
</Box>
<Box marginTop='0.938rem'>
<Text
color='rgba(255, 255, 255, 0.6)'
variant='subheader'
align='center'
>
Create your dream software with no coding skills
</Text>
</Box>
</Box>
</Box>
</Wrapper>
);
};
export default Signup;
src/pages/Auth/Signup/styles.ts
+7
View File
@@ -0,0 +1,7 @@
import styled from 'styled-components';
export const Wrapper = styled.div`
button svg path {
stroke: transparent !important;
}
`;
src/pages/index.tsx
+7
View File
@@ -0,0 +1,7 @@
import Login from './Auth/Login';
import Signup from './Auth/Signup';
import AdditionalInfo from './Auth/AdditionalInfo';
import ForgotPassword from './Auth/ForgotPassword';
import RecoverAccount from './Auth/RecoverAccount';
export { Login, Signup, AdditionalInfo, ForgotPassword, RecoverAccount };