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 React from 'react' |
||||||
|
|
||||||
import { Theme } from 'features/Theme' |
import { Theme } from 'features/Theme' |
||||||
|
import { Login } from 'features/Login' |
||||||
|
import { GlobalStyles } from 'features/GlobalStyles' |
||||||
|
|
||||||
export const App = () => ( |
export const App = () => ( |
||||||
<Theme> |
<Theme> |
||||||
Instat TV |
<GlobalStyles /> |
||||||
|
<Login /> |
||||||
</Theme> |
</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 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 = () => ( |
export const Login = () => ( |
||||||
<div> |
<Background> |
||||||
Login page |
<CenterBlock> |
||||||
</div> |
<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