From 8fbcefcf102512d1d4d17c08a32c59a3a6c9b53a Mon Sep 17 00:00:00 2001 From: "mirlan.maksitaliev" Date: Wed, 3 Jun 2020 22:14:09 +0600 Subject: [PATCH] feat(ott-36): login page --- public/images/Checker.png | Bin 0 -> 284 bytes public/images/logo.svg | 10 ++++++ src/features/App/index.tsx | 5 ++- src/features/Background/index.tsx | 15 +++++++++ src/features/Background/styled.tsx | 25 +++++++++++++++ src/features/Login/index.tsx | 50 +++++++++++++++++++++++++++-- src/features/Login/styled.tsx | 37 +++++++++++++++++++++ src/features/Logo/index.tsx | 15 +++++++++ 8 files changed, 153 insertions(+), 4 deletions(-) create mode 100644 public/images/Checker.png create mode 100644 public/images/logo.svg create mode 100644 src/features/Background/index.tsx create mode 100644 src/features/Background/styled.tsx create mode 100644 src/features/Login/styled.tsx create mode 100644 src/features/Logo/index.tsx diff --git a/public/images/Checker.png b/public/images/Checker.png new file mode 100644 index 0000000000000000000000000000000000000000..63aa6a4d3df52007b2cb4cded0502477256b58fa GIT binary patch literal 284 zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=k3C%+Ln`9l-ge|`ao}(X-0^>5 zHQz_|#D~S}RXFyqax71~*YbLA$?rFL9d?r+dpB@hU|QK(%%8--5!5)T@lI391fEHb zMipF&b`AU*tS?Mv)E?;ex3E9&-nNEiMT6PpOH3QtlNq1QRAOsLSmVfZpdndbKAwT2 zNr9uNDO1IbO}RChy-YhtKLH3QC{)}%Y-z`qz`&N^5P3F*BUV~dfW;AncqA7v + + + + + + + + + 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); +`