diff --git a/public/images/Checker.png b/public/images/Checker.png new file mode 100644 index 00000000..63aa6a4d Binary files /dev/null and b/public/images/Checker.png differ diff --git a/public/images/logo.svg b/public/images/logo.svg new file mode 100644 index 00000000..b36a5c9c --- /dev/null +++ b/public/images/logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/features/App/index.tsx b/src/features/App/index.tsx index f9857eb4..153f5549 100644 --- a/src/features/App/index.tsx +++ b/src/features/App/index.tsx @@ -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 = () => ( - Instat TV + + ) diff --git a/src/features/Background/index.tsx b/src/features/Background/index.tsx new file mode 100644 index 00000000..39eb4f85 --- /dev/null +++ b/src/features/Background/index.tsx @@ -0,0 +1,15 @@ +import React, { ReactNode } from 'react' + +import { GradientBackground, ImageBackground } from './styled' + +type TBackground = { + children: ReactNode, +} + +export const Background = ({ children }: TBackground) => ( + + + {children} + + +) diff --git a/src/features/Background/styled.tsx b/src/features/Background/styled.tsx new file mode 100644 index 00000000..45fd69af --- /dev/null +++ b/src/features/Background/styled.tsx @@ -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; +` diff --git a/src/features/Login/index.tsx b/src/features/Login/index.tsx index 741eb3d8..4ba48171 100644 --- a/src/features/Login/index.tsx +++ b/src/features/Login/index.tsx @@ -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 = () => ( -
- Login page -
+ + + +
+ Авторизация + + + + + + Войти + + Зарегистрироваться + + +
+ + ) diff --git a/src/features/Login/styled.tsx b/src/features/Login/styled.tsx new file mode 100644 index 00000000..b7f9bffb --- /dev/null +++ b/src/features/Login/styled.tsx @@ -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; + } +` diff --git a/src/features/Logo/index.tsx b/src/features/Logo/index.tsx new file mode 100644 index 00000000..95d16556 --- /dev/null +++ b/src/features/Logo/index.tsx @@ -0,0 +1,15 @@ +import styled from 'styled-components/macro' + +type TLogo = { + height?: number, + width?: number, +} + +export const Logo = styled.div` + 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); +`