mirlan.maksitaliev
6 years ago
parent
556669f303
commit
8fbcefcf10
|
After Width: | Height: | Size: 284 B |
|
After Width: | Height: | Size: 8.7 KiB |
@ -1,9 +1,12 @@ |
||||
import React from 'react' |
||||
|
||||
import { Theme } from 'features/Theme' |
||||
import { Login } from 'features/Login' |
||||
import { GlobalStyles } from 'features/GlobalStyles' |
||||
|
||||
export const App = () => ( |
||||
<Theme> |
||||
Instat TV |
||||
<GlobalStyles /> |
||||
<Login /> |
||||
</Theme> |
||||
) |
||||
|
||||
@ -0,0 +1,15 @@ |
||||
import React, { ReactNode } from 'react' |
||||
|
||||
import { GradientBackground, ImageBackground } from './styled' |
||||
|
||||
type TBackground = { |
||||
children: ReactNode, |
||||
} |
||||
|
||||
export const Background = ({ children }: TBackground) => ( |
||||
<ImageBackground> |
||||
<GradientBackground> |
||||
{children} |
||||
</GradientBackground> |
||||
</ImageBackground> |
||||
) |
||||
@ -0,0 +1,25 @@ |
||||
import styled from 'styled-components/macro' |
||||
|
||||
const Container = styled.div` |
||||
width: 100vw; |
||||
height: 100vh; |
||||
` |
||||
|
||||
export const ImageBackground = styled(Container)` |
||||
background-image: url(/images/Checker.png); |
||||
background-size: 12px; |
||||
` |
||||
|
||||
export const GradientBackground = styled(Container)` |
||||
position: relative; |
||||
display: flex; |
||||
justify-content: center; |
||||
background: ${({ theme: { colors } }) => colors.background}; |
||||
` |
||||
|
||||
export const CenterBlock = styled.div` |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
margin-top: 140px; |
||||
` |
||||
@ -1,7 +1,51 @@ |
||||
import React from 'react' |
||||
|
||||
import { Background } from 'features/Background' |
||||
import { Logo } from 'features/Logo' |
||||
import { |
||||
Input, |
||||
ButtonSolid, |
||||
ButtonOutline, |
||||
} from 'features/Common' |
||||
|
||||
import { |
||||
BlockTitle, |
||||
CenterBlock, |
||||
ButtonsBlock, |
||||
Form, |
||||
} from './styled' |
||||
|
||||
const labelWidth = 60 |
||||
|
||||
export const Login = () => ( |
||||
<div> |
||||
Login page |
||||
</div> |
||||
<Background> |
||||
<CenterBlock> |
||||
<Logo /> |
||||
<Form> |
||||
<BlockTitle>Авторизация</BlockTitle> |
||||
|
||||
<Input |
||||
required |
||||
id='email' |
||||
type='email' |
||||
label='Логин' |
||||
labelWidth={labelWidth} |
||||
/> |
||||
<Input |
||||
required |
||||
id='password' |
||||
type='password' |
||||
label='Пароль' |
||||
labelWidth={labelWidth} |
||||
/> |
||||
|
||||
<ButtonsBlock> |
||||
<ButtonSolid>Войти</ButtonSolid> |
||||
<ButtonOutline type='button'> |
||||
Зарегистрироваться |
||||
</ButtonOutline> |
||||
</ButtonsBlock> |
||||
</Form> |
||||
</CenterBlock> |
||||
</Background> |
||||
) |
||||
|
||||
@ -0,0 +1,37 @@ |
||||
import styled from 'styled-components/macro' |
||||
|
||||
export const CenterBlock = styled.div` |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
margin-top: 140px; |
||||
` |
||||
|
||||
export const Form = styled.form` |
||||
width: 544px; |
||||
margin-top: 80px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
` |
||||
|
||||
export const BlockTitle = styled.span` |
||||
display: block; |
||||
font-style: normal; |
||||
font-weight: bold; |
||||
font-size: 36px; |
||||
line-height: 24px; |
||||
color: ${({ theme: { colors } }) => colors.text}; |
||||
margin-bottom: 20px; |
||||
transition: color 0.3s ease-in-out; |
||||
` |
||||
|
||||
export const ButtonsBlock = styled.div` |
||||
display: flex; |
||||
flex-direction: column; |
||||
margin-top: 60px; |
||||
|
||||
& > * { |
||||
margin-bottom: 40px; |
||||
} |
||||
` |
||||
@ -0,0 +1,15 @@ |
||||
import styled from 'styled-components/macro' |
||||
|
||||
type TLogo = { |
||||
height?: number, |
||||
width?: number, |
||||
} |
||||
|
||||
export const Logo = styled.div<TLogo>` |
||||
display: block; |
||||
width: ${({ width = 174 }) => width}px; |
||||
height: ${({ height = 40 }) => height}px; |
||||
background-size: contain; |
||||
background-repeat: no-repeat; |
||||
background-image: url(/images/logo.svg); |
||||
` |
||||
Loading…
Reference in new issue