From f0d2370d5cdae6b6f9d50747636b0a69580c39f3 Mon Sep 17 00:00:00 2001 From: "mirlan.maksitaliev" Date: Fri, 5 Jun 2020 18:02:10 +0600 Subject: [PATCH 01/13] feat(ott-37): added simple routing --- package.json | 6 ++++++ src/config/pages.tsx | 1 + src/features/App/index.tsx | 31 ++++++++++++++++++++++++++----- src/features/Register/index.tsx | 3 +++ 4 files changed, 36 insertions(+), 5 deletions(-) create mode 100644 src/features/Register/index.tsx diff --git a/package.json b/package.json index a1076adc..a0e041a5 100644 --- a/package.json +++ b/package.json @@ -13,9 +13,12 @@ "build-storybook": "build-storybook -s public" }, "dependencies": { + "history": "^4.10.1", "lodash": "^4.17.15", "react": "^16.13.1", "react-dom": "^16.13.1", + "react-router": "^5.2.0", + "react-router-dom": "^5.2.0", "react-scripts": "3.4.1", "styled-components": "^5.1.1" }, @@ -32,11 +35,14 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", + "@types/history": "^4.7.6", "@types/jest": "^24.0.0", "@types/lodash": "^4.14.154", "@types/node": "^12.0.0", "@types/react": "^16.9.0", "@types/react-dom": "^16.9.0", + "@types/react-router": "^5.1.7", + "@types/react-router-dom": "^5.1.5", "@types/styled-components": "^5.1.0", "commitizen": "^4.1.2", "eslint": "6.8.0", diff --git a/src/config/pages.tsx b/src/config/pages.tsx index f960c655..570ecc08 100644 --- a/src/config/pages.tsx +++ b/src/config/pages.tsx @@ -1,3 +1,4 @@ export const PAGES = { login: '/login', + register: '/register', } diff --git a/src/features/App/index.tsx b/src/features/App/index.tsx index 153f5549..11b966cb 100644 --- a/src/features/App/index.tsx +++ b/src/features/App/index.tsx @@ -1,12 +1,33 @@ import React from 'react' +import { + Router, + Route, + Redirect, +} from 'react-router-dom' +import { createBrowserHistory } from 'history' +import { GlobalStyles } from 'features/GlobalStyles' import { Theme } from 'features/Theme' import { Login } from 'features/Login' -import { GlobalStyles } from 'features/GlobalStyles' +import { Register } from 'features/Register' +import { PAGES } from 'config' + +const history = createBrowserHistory() export const App = () => ( - - - - + + + + + + + + + + + + + + + ) diff --git a/src/features/Register/index.tsx b/src/features/Register/index.tsx new file mode 100644 index 00000000..9adf25ca --- /dev/null +++ b/src/features/Register/index.tsx @@ -0,0 +1,3 @@ +import React from 'react' + +export const Register = () =>
Registration page
From 1727bc8d531733b3587683ab4c24fefdee109698 Mon Sep 17 00:00:00 2001 From: "mirlan.maksitaliev" Date: Fri, 5 Jun 2020 18:07:31 +0600 Subject: [PATCH 02/13] refactor(ott-37): changed register button to link component --- src/features/Login/index.tsx | 8 +++++--- src/features/Login/styled.tsx | 11 +++++++++++ 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/features/Login/index.tsx b/src/features/Login/index.tsx index 4ba48171..972d5af5 100644 --- a/src/features/Login/index.tsx +++ b/src/features/Login/index.tsx @@ -1,11 +1,12 @@ import React from 'react' +import { PAGES } from 'config' + import { Background } from 'features/Background' import { Logo } from 'features/Logo' import { Input, ButtonSolid, - ButtonOutline, } from 'features/Common' import { @@ -13,6 +14,7 @@ import { CenterBlock, ButtonsBlock, Form, + RegisterButton, } from './styled' const labelWidth = 60 @@ -41,9 +43,9 @@ export const Login = () => ( Войти - + Зарегистрироваться - + diff --git a/src/features/Login/styled.tsx b/src/features/Login/styled.tsx index b7f9bffb..a359a517 100644 --- a/src/features/Login/styled.tsx +++ b/src/features/Login/styled.tsx @@ -1,5 +1,8 @@ +import { Link } from 'react-router-dom' import styled from 'styled-components/macro' +import { outlineButtonStyles } from 'features/Common' + export const CenterBlock = styled.div` display: flex; flex-direction: column; @@ -35,3 +38,11 @@ export const ButtonsBlock = styled.div` margin-bottom: 40px; } ` + +export const RegisterButton = styled(Link)` + ${outlineButtonStyles} + + display: flex; + align-items: center; + justify-content: center; +` From 5d019602d1d67a8182f1f2b452b68b73cf1b71ed Mon Sep 17 00:00:00 2001 From: "mirlan.maksitaliev" Date: Wed, 10 Jun 2020 18:12:02 +0600 Subject: [PATCH 03/13] feat(ott-37): registration page --- src/features/App/index.tsx | 19 ++--- .../Register/CheckboxSubscription/index.tsx | 3 + src/features/Register/Price/index.tsx | 14 ++++ src/features/Register/Price/styled.tsx | 23 ++++++ src/features/Register/Steps/Card/index.tsx | 52 ++++++++++++++ .../Register/Steps/Registration/index.tsx | 57 +++++++++++++++ .../Steps/Subscriptions/Subscription.tsx | 21 ++++++ .../Register/Steps/Subscriptions/index.tsx | 37 ++++++++++ .../Register/Steps/Subscriptions/stories.tsx | 15 ++++ .../Register/Steps/Subscriptions/styled.tsx | 71 +++++++++++++++++++ src/features/Register/Steps/index.tsx | 3 + src/features/Register/index.tsx | 30 +++++++- src/features/Register/styled.tsx | 35 +++++++++ 13 files changed, 371 insertions(+), 9 deletions(-) create mode 100644 src/features/Register/CheckboxSubscription/index.tsx create mode 100644 src/features/Register/Price/index.tsx create mode 100644 src/features/Register/Price/styled.tsx create mode 100644 src/features/Register/Steps/Card/index.tsx create mode 100644 src/features/Register/Steps/Registration/index.tsx create mode 100644 src/features/Register/Steps/Subscriptions/Subscription.tsx create mode 100644 src/features/Register/Steps/Subscriptions/index.tsx create mode 100644 src/features/Register/Steps/Subscriptions/stories.tsx create mode 100644 src/features/Register/Steps/Subscriptions/styled.tsx create mode 100644 src/features/Register/Steps/index.tsx create mode 100644 src/features/Register/styled.tsx diff --git a/src/features/App/index.tsx b/src/features/App/index.tsx index 11b966cb..b4eb6673 100644 --- a/src/features/App/index.tsx +++ b/src/features/App/index.tsx @@ -3,14 +3,15 @@ import { Router, Route, Redirect, + Switch, } from 'react-router-dom' import { createBrowserHistory } from 'history' +import { PAGES } from 'config' import { GlobalStyles } from 'features/GlobalStyles' import { Theme } from 'features/Theme' import { Login } from 'features/Login' import { Register } from 'features/Register' -import { PAGES } from 'config' const history = createBrowserHistory() @@ -19,15 +20,17 @@ export const App = () => ( - - - + + + + - - - + + + - + + ) diff --git a/src/features/Register/CheckboxSubscription/index.tsx b/src/features/Register/CheckboxSubscription/index.tsx new file mode 100644 index 00000000..11c64b3a --- /dev/null +++ b/src/features/Register/CheckboxSubscription/index.tsx @@ -0,0 +1,3 @@ +// import React from 'react' + +export {} diff --git a/src/features/Register/Price/index.tsx b/src/features/Register/Price/index.tsx new file mode 100644 index 00000000..23058f4b --- /dev/null +++ b/src/features/Register/Price/index.tsx @@ -0,0 +1,14 @@ +import React from 'react' + +import { + PriceWrapper, + PriceAmount, + PriceDetails, +} from './styled' + +export const Price = () => ( + + 1999 + ₽ / мес + +) diff --git a/src/features/Register/Price/styled.tsx b/src/features/Register/Price/styled.tsx new file mode 100644 index 00000000..fd060f00 --- /dev/null +++ b/src/features/Register/Price/styled.tsx @@ -0,0 +1,23 @@ +import styled from 'styled-components/macro' + +export const PriceWrapper = styled.div` + display: flex; + align-items: flex-start; +` + +export const PriceAmount = styled.span` + font-style: normal; + font-weight: 600; + font-size: 48px; + line-height: 40px; + color: ${({ theme: { colors } }) => colors.text}; +` + +export const PriceDetails = styled.span` + margin-left: 5px; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 21px; + color: ${({ theme: { colors } }) => colors.text}; +` diff --git a/src/features/Register/Steps/Card/index.tsx b/src/features/Register/Steps/Card/index.tsx new file mode 100644 index 00000000..5a8c664a --- /dev/null +++ b/src/features/Register/Steps/Card/index.tsx @@ -0,0 +1,52 @@ +import React from 'react' + +import { Input } from 'features/Common' +import { + BlockTitle, + ButtonsBlock, + Form, +} from 'features/Login/styled' + +import { + NextButton, + Card, + Row, +} from '../../styled' + +const labelWidth = 116 + +export const CardStep = () => ( +
+ Привязка карты + + + + + + + + + + Далее + +
+) diff --git a/src/features/Register/Steps/Registration/index.tsx b/src/features/Register/Steps/Registration/index.tsx new file mode 100644 index 00000000..0292fd7d --- /dev/null +++ b/src/features/Register/Steps/Registration/index.tsx @@ -0,0 +1,57 @@ +import React from 'react' + +import { PAGES } from 'config' + +import { Input } from 'features/Common' +import { + BlockTitle, + ButtonsBlock, + Form, +} from 'features/Login/styled' + +import { NextButton } from '../../styled' + +const labelWidth = 78 + +export const GeneralDataStep = () => ( +
+ Регистрация + + + + + + {/* TODO: it should be Dropdown */} + + + + + Далее + +
+) diff --git a/src/features/Register/Steps/Subscriptions/Subscription.tsx b/src/features/Register/Steps/Subscriptions/Subscription.tsx new file mode 100644 index 00000000..57e522cd --- /dev/null +++ b/src/features/Register/Steps/Subscriptions/Subscription.tsx @@ -0,0 +1,21 @@ +import React from 'react' + +import { Price } from '../../Price' +import { + SubscriptionWrapper, + Radio, + SubscriptionTitle, + Row, +} from './styled' + +export const Subscription = () => ( + + + + Бесплатная + + + + + +) diff --git a/src/features/Register/Steps/Subscriptions/index.tsx b/src/features/Register/Steps/Subscriptions/index.tsx new file mode 100644 index 00000000..ef707f95 --- /dev/null +++ b/src/features/Register/Steps/Subscriptions/index.tsx @@ -0,0 +1,37 @@ +import React, { Fragment } from 'react' + +import { ButtonSolid } from 'features/Common' +import { ButtonsBlock } from 'features/Login/styled' + +import { Subscription } from './Subscription' +import { + SubscriptionsBlock, + AdditionalBlockTitle, + BlockTitle, + SubscriptionList, + SubscriptionListItem, +} from './styled' + +export const SubscriptionStep = () => ( + + + Выбор подписки + + + + + + + + + + + + Дополнительно + + + + Готово + + +) diff --git a/src/features/Register/Steps/Subscriptions/stories.tsx b/src/features/Register/Steps/Subscriptions/stories.tsx new file mode 100644 index 00000000..bd09293a --- /dev/null +++ b/src/features/Register/Steps/Subscriptions/stories.tsx @@ -0,0 +1,15 @@ +import React from 'react' + +import { Subscription as SubscriptionComponent } from './Subscription' + +export default { + title: 'Subscription', +} + +export const Subscription = () => ( + +) + +export const AdditionalSubscription = () => ( + +) diff --git a/src/features/Register/Steps/Subscriptions/styled.tsx b/src/features/Register/Steps/Subscriptions/styled.tsx new file mode 100644 index 00000000..e58ea453 --- /dev/null +++ b/src/features/Register/Steps/Subscriptions/styled.tsx @@ -0,0 +1,71 @@ +import styled from 'styled-components/macro' + +export const SubscriptionsBlock = styled.div` + display: flex; + flex-direction: column; + align-items: center; + margin-top: 80px; +` + +export const BlockTitle = styled.span` + display: block; + font-style: normal; + font-weight: bold; + font-size: 36px; + line-height: 24px; + color: ${({ theme: { colors } }) => colors.text}; + transition: color 0.3s ease-in-out; +` + +export const AdditionalBlockTitle = styled(BlockTitle)` + font-size: 32px; +` + +export const SubscriptionList = styled.ul` + display: flex; + margin-top: 40px; +` + +export const SubscriptionListItem = styled.li`` + +export const SubscriptionWrapper = styled.div` + position: relative; + width: 288px; + height: 216px; + padding: 24px; + margin: 0 8px; + display: flex; + flex-direction: column; + background: #3F3F3F; + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4); + border-radius: 2px; +` + +export const SubscriptionTitle = styled.span` + margin-left: 22px; + font-style: normal; + font-weight: bold; + font-size: 18px; + line-height: 21px; + color: ${({ theme: { colors } }) => colors.text}; +` + +type TRow = { + bottom?: number, + left?: number, +} + +export const Row = styled.div` + position: absolute; + display: flex; + align-items: center; + left: ${({ left }) => left}px; + bottom: ${({ bottom }) => bottom}px; +` + +export const Radio = styled.div` + width: 26px; + height: 26px; + background-image: url(/images/radioChecked.svg); + background-position: center; +` diff --git a/src/features/Register/Steps/index.tsx b/src/features/Register/Steps/index.tsx new file mode 100644 index 00000000..ceb3df99 --- /dev/null +++ b/src/features/Register/Steps/index.tsx @@ -0,0 +1,3 @@ +export * from './Registration' +export * from './Card' +export * from './Subscriptions' diff --git a/src/features/Register/index.tsx b/src/features/Register/index.tsx index 9adf25ca..52c9c6b7 100644 --- a/src/features/Register/index.tsx +++ b/src/features/Register/index.tsx @@ -1,3 +1,31 @@ import React from 'react' +import { Route } from 'react-router' -export const Register = () =>
Registration page
+import { PAGES } from 'config' + +import { Background } from 'features/Background' +import { Logo } from 'features/Logo' +import { CenterBlock } from 'features/Login/styled' + +import { + GeneralDataStep, + CardStep, + SubscriptionStep, +} from './Steps' + +export const Register = () => ( + + + + + + + + + + + + + + +) diff --git a/src/features/Register/styled.tsx b/src/features/Register/styled.tsx new file mode 100644 index 00000000..c4148e52 --- /dev/null +++ b/src/features/Register/styled.tsx @@ -0,0 +1,35 @@ +import { Link } from 'react-router-dom' +import styled from 'styled-components/macro' + +import { solidButtonStyles } from 'features/Common' + +export const NextButton = styled(Link)` + ${solidButtonStyles} + + display: flex; + align-items: center; + justify-content: center; +` + +export const Card = styled.div` + width: 546px; + height: 340px; + margin: 20px 0; + padding: 0 32px; + border: 1px solid rgba(255, 255, 255, 0.1); + box-sizing: border-box; + border-radius: 16px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +` + +export const Row = styled.div` + width: 100%; + display: flex; + + & div:last-child { + margin-left: 16px; + } +` From d8776b7e091045bc2de196b1a55762e314f6a608 Mon Sep 17 00:00:00 2001 From: Bombamuerta Date: Thu, 11 Jun 2020 16:55:52 +0300 Subject: [PATCH 04/13] style(#ott-39): price block added --- src/features/Background/styled.tsx | 5 +- src/features/Common/Arrows/index.tsx | 9 +++ src/features/Common/Checkbox/styled.tsx | 1 - src/features/Login/styled.tsx | 8 ++- .../Register/Steps/Subscriptions/index.tsx | 67 +++++++++++++++++-- .../Register/Steps/Subscriptions/styled.tsx | 57 +++++++++++++++- 6 files changed, 133 insertions(+), 14 deletions(-) diff --git a/src/features/Background/styled.tsx b/src/features/Background/styled.tsx index 45fd69af..3bc49b1b 100644 --- a/src/features/Background/styled.tsx +++ b/src/features/Background/styled.tsx @@ -1,8 +1,8 @@ import styled from 'styled-components/macro' const Container = styled.div` - width: 100vw; - height: 100vh; + width: 100%; + min-height: 100vh; ` export const ImageBackground = styled(Container)` @@ -21,5 +21,4 @@ export const CenterBlock = styled.div` display: flex; flex-direction: column; align-items: center; - margin-top: 140px; ` diff --git a/src/features/Common/Arrows/index.tsx b/src/features/Common/Arrows/index.tsx index 4302a0c0..41deda0e 100644 --- a/src/features/Common/Arrows/index.tsx +++ b/src/features/Common/Arrows/index.tsx @@ -9,6 +9,9 @@ const ArrowStyled = styled.button` background-color: transparent; background-position: center; outline: none; + z-index: 1; + position: absolute; + cursor: pointer; :active { background-color: rgba(117, 117, 117, 1); @@ -21,8 +24,14 @@ const ArrowStyled = styled.button` export const ArrowLeft = styled(ArrowStyled)` background-image: url(/images/arrowLeft.svg); + top: 50%; + left: -10px; + transform: translate(0,-50%); ` export const ArrowRight = styled(ArrowStyled)` background-image: url(/images/arrowRight.svg); + top: 50%; + right: -10px; + transform: translate(0, -50%); ` diff --git a/src/features/Common/Checkbox/styled.tsx b/src/features/Common/Checkbox/styled.tsx index 6c62dff1..4c459eb5 100644 --- a/src/features/Common/Checkbox/styled.tsx +++ b/src/features/Common/Checkbox/styled.tsx @@ -1,7 +1,6 @@ import styled from 'styled-components/macro' export const Wrapper = styled.div` - ` export const Label = styled.label` diff --git a/src/features/Login/styled.tsx b/src/features/Login/styled.tsx index a359a517..94f2a217 100644 --- a/src/features/Login/styled.tsx +++ b/src/features/Login/styled.tsx @@ -7,6 +7,7 @@ export const CenterBlock = styled.div` display: flex; flex-direction: column; align-items: center; + justify-content: center; margin-top: 140px; ` @@ -29,13 +30,14 @@ export const BlockTitle = styled.span` transition: color 0.3s ease-in-out; ` -export const ButtonsBlock = styled.div` +export const ButtonsBlock = styled.div<{forSubsPage?: boolean}>` display: flex; flex-direction: column; - margin-top: 60px; + margin-top: ${({ forSubsPage }) => (forSubsPage ? '80px' : '60px')}; + position: relative; & > * { - margin-bottom: 40px; + margin-bottom: 96px; } ` diff --git a/src/features/Register/Steps/Subscriptions/index.tsx b/src/features/Register/Steps/Subscriptions/index.tsx index ef707f95..7750cfd3 100644 --- a/src/features/Register/Steps/Subscriptions/index.tsx +++ b/src/features/Register/Steps/Subscriptions/index.tsx @@ -1,15 +1,28 @@ import React, { Fragment } from 'react' -import { ButtonSolid } from 'features/Common' +import { Checkbox } from 'features/Common/Checkbox' +import { ButtonSolid } from 'features/Common/Button' +import { ArrowLeft, ArrowRight } from 'features/Common/Arrows' import { ButtonsBlock } from 'features/Login/styled' +import { Price } from 'features/Register/Price/index' + import { Subscription } from './Subscription' + import { SubscriptionsBlock, AdditionalBlockTitle, BlockTitle, SubscriptionList, SubscriptionListItem, + PricesBlock, + PriceItemTitle, + PriceItem, + PriceItemCol, + TotalInfoBlock, + TotalInfoText, + TotalPriceAmmount, + TotalPriceDetails, } from './styled' export const SubscriptionStep = () => ( @@ -25,13 +38,57 @@ export const SubscriptionStep = () => ( - - + Дополнительно - + + + + + + + + Российская премьер-лига + + + + + + + + + Primera División + + + + + + + + + Manchester United + + + + + + + + + Василий Березуцкий + + + + + - + Готово + + Базовая + 2 дополнительно за + 6997 + ₽ / МЕС + + ) diff --git a/src/features/Register/Steps/Subscriptions/styled.tsx b/src/features/Register/Steps/Subscriptions/styled.tsx index e58ea453..6776c5ed 100644 --- a/src/features/Register/Steps/Subscriptions/styled.tsx +++ b/src/features/Register/Steps/Subscriptions/styled.tsx @@ -1,10 +1,10 @@ import styled from 'styled-components/macro' -export const SubscriptionsBlock = styled.div` +export const SubscriptionsBlock = styled.div<{forAdditionalTitle?: boolean}>` display: flex; flex-direction: column; align-items: center; - margin-top: 80px; + margin-top: ${({ forAdditionalTitle }) => (forAdditionalTitle ? '75px' : '80px')}; ` export const BlockTitle = styled.span` @@ -19,6 +19,7 @@ export const BlockTitle = styled.span` export const AdditionalBlockTitle = styled(BlockTitle)` font-size: 32px; + margin-bottom: 40px; ` export const SubscriptionList = styled.ul` @@ -69,3 +70,55 @@ export const Radio = styled.div` background-image: url(/images/radioChecked.svg); background-position: center; ` + +export const PricesBlock = styled.div` + width: 1200px; + display: flex; + justify-content: space-between; + position: relative; +` + +export const PriceItem = styled(SubscriptionWrapper)` + height: 176px; + display: flex; + flex-direction: row; + margin: 0; + padding: 24px 25px 40px; +` + +export const PriceItemTitle = styled(SubscriptionTitle)` + margin: 3px 5px 0 0; + line-height: 24px; +` + +export const PriceItemCol = styled.div` + display: flex; + flex-direction: column; + justify-content: space-between; +` + +export const TotalInfoBlock = styled.div` + width: 201px; + position: absolute; + display: flex; + flex-wrap: wrap; + top: 4px; + left: 294px; +` + +export const TotalInfoText = styled.span` + font-weight: normal; + font-size: 14px; + line-height: 22px; + color: rgba(255, 255, 255, 0.3); +` + +export const TotalPriceAmmount = styled(TotalInfoText)` + font-weight: bold; + margin-left: 6px; +` + +export const TotalPriceDetails = styled(TotalInfoText)` + text-transform: uppercase; + margin-left: 7px; +` From b727a05a1e8521573fb24b4de55d855f193608af Mon Sep 17 00:00:00 2001 From: Bombamuerta Date: Mon, 15 Jun 2020 14:27:08 +0300 Subject: [PATCH 05/13] style(#ott-39): minor fixes --- src/features/Common/Arrows/index.tsx | 8 ++++---- src/features/Login/styled.tsx | 9 +++------ src/features/Register/Steps/Subscriptions/index.tsx | 2 +- src/features/Register/styled.tsx | 1 - 4 files changed, 8 insertions(+), 12 deletions(-) diff --git a/src/features/Common/Arrows/index.tsx b/src/features/Common/Arrows/index.tsx index 41deda0e..c8f1575e 100644 --- a/src/features/Common/Arrows/index.tsx +++ b/src/features/Common/Arrows/index.tsx @@ -25,13 +25,13 @@ const ArrowStyled = styled.button` export const ArrowLeft = styled(ArrowStyled)` background-image: url(/images/arrowLeft.svg); top: 50%; - left: -10px; - transform: translate(0,-50%); + left: 0px; + transform: translate(-10px, -50%); ` export const ArrowRight = styled(ArrowStyled)` background-image: url(/images/arrowRight.svg); top: 50%; - right: -10px; - transform: translate(0, -50%); + right: 0px; + transform: translate(10px, -50%); ` diff --git a/src/features/Login/styled.tsx b/src/features/Login/styled.tsx index 94f2a217..f1701bed 100644 --- a/src/features/Login/styled.tsx +++ b/src/features/Login/styled.tsx @@ -13,7 +13,7 @@ export const CenterBlock = styled.div` export const Form = styled.form` width: 544px; - margin-top: 80px; + margin: 80px 0 140px 0; display: flex; flex-direction: column; align-items: center; @@ -34,16 +34,13 @@ export const ButtonsBlock = styled.div<{forSubsPage?: boolean}>` display: flex; flex-direction: column; margin-top: ${({ forSubsPage }) => (forSubsPage ? '80px' : '60px')}; + margin-bottom: ${({ forSubsPage }) => (forSubsPage ? '96px' : '')}; position: relative; - - & > * { - margin-bottom: 96px; - } ` export const RegisterButton = styled(Link)` ${outlineButtonStyles} - + margin-top: 40px; display: flex; align-items: center; justify-content: center; diff --git a/src/features/Register/Steps/Subscriptions/index.tsx b/src/features/Register/Steps/Subscriptions/index.tsx index 7750cfd3..ea7263d9 100644 --- a/src/features/Register/Steps/Subscriptions/index.tsx +++ b/src/features/Register/Steps/Subscriptions/index.tsx @@ -5,7 +5,7 @@ import { ButtonSolid } from 'features/Common/Button' import { ArrowLeft, ArrowRight } from 'features/Common/Arrows' import { ButtonsBlock } from 'features/Login/styled' -import { Price } from 'features/Register/Price/index' +import { Price } from 'features/Register/Price' import { Subscription } from './Subscription' diff --git a/src/features/Register/styled.tsx b/src/features/Register/styled.tsx index c4148e52..12833bf6 100644 --- a/src/features/Register/styled.tsx +++ b/src/features/Register/styled.tsx @@ -5,7 +5,6 @@ import { solidButtonStyles } from 'features/Common' export const NextButton = styled(Link)` ${solidButtonStyles} - display: flex; align-items: center; justify-content: center; From 7f65a0d869f4baf2b6e0ba598e3833a23f351740 Mon Sep 17 00:00:00 2001 From: "mirlan.maksitaliev" Date: Fri, 12 Jun 2020 13:31:07 +0600 Subject: [PATCH 06/13] refactor(ott-37): added main and additional subs component --- src/features/Common/Radio/index.tsx | 2 +- .../Register/AdditionalSubscription/index.tsx | 27 ++++++++++ .../AdditionalSubscription/styled.tsx | 29 ++++++++++ .../Register/CheckboxSubscription/index.tsx | 3 -- .../Register/MainSubscription/index.tsx | 27 ++++++++++ src/features/Register/Price/index.tsx | 16 ++++-- src/features/Register/Price/styled.tsx | 1 + .../Steps/Subscriptions/Subscription.tsx | 21 -------- .../Register/Steps/Subscriptions/index.tsx | 53 +++---------------- .../Register/Steps/Subscriptions/stories.tsx | 15 ------ .../Register/Steps/Subscriptions/styled.tsx | 27 ---------- 11 files changed, 106 insertions(+), 115 deletions(-) create mode 100644 src/features/Register/AdditionalSubscription/index.tsx create mode 100644 src/features/Register/AdditionalSubscription/styled.tsx delete mode 100644 src/features/Register/CheckboxSubscription/index.tsx create mode 100644 src/features/Register/MainSubscription/index.tsx delete mode 100644 src/features/Register/Steps/Subscriptions/Subscription.tsx delete mode 100644 src/features/Register/Steps/Subscriptions/stories.tsx diff --git a/src/features/Common/Radio/index.tsx b/src/features/Common/Radio/index.tsx index 7ef499cf..cd95ecbc 100644 --- a/src/features/Common/Radio/index.tsx +++ b/src/features/Common/Radio/index.tsx @@ -19,7 +19,7 @@ type TCheckbox = Pick, ( export const Radio = ({ checked, id, - label, + label = '', name, onChange, value, diff --git a/src/features/Register/AdditionalSubscription/index.tsx b/src/features/Register/AdditionalSubscription/index.tsx new file mode 100644 index 00000000..43640193 --- /dev/null +++ b/src/features/Register/AdditionalSubscription/index.tsx @@ -0,0 +1,27 @@ +import React from 'react' + +import { Checkbox } from 'features/Common' + +import { Price } from '../Price' +import { + PriceItemTitle, + PriceItem, + PriceItemCol, +} from './styled' + +type TAdditionalSubscription = { + price: number, + title: string, +} + +export const AdditionalSubscription = ({ price, title }: TAdditionalSubscription) => ( + + + + + + {title} + + + +) diff --git a/src/features/Register/AdditionalSubscription/styled.tsx b/src/features/Register/AdditionalSubscription/styled.tsx new file mode 100644 index 00000000..c73bbb30 --- /dev/null +++ b/src/features/Register/AdditionalSubscription/styled.tsx @@ -0,0 +1,29 @@ +import styled from 'styled-components/macro' + +export const PriceItem = styled.div` + position: relative; + width: 288px; + height: 176px; + padding: 24px 25px 40px; + margin: 0; + display: flex; + flex-direction: row; + background: #3F3F3F; + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4); + border-radius: 2px; +` + +export const PriceItemTitle = styled.span` + font-style: normal; + font-weight: bold; + font-size: 18px; + line-height: 24px; + color: ${({ theme: { colors } }) => colors.text}; + margin: 3px 5px 0 0; +` + +export const PriceItemCol = styled.div` + display: flex; + flex-direction: column; + justify-content: space-between; +` diff --git a/src/features/Register/CheckboxSubscription/index.tsx b/src/features/Register/CheckboxSubscription/index.tsx deleted file mode 100644 index 11c64b3a..00000000 --- a/src/features/Register/CheckboxSubscription/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -// import React from 'react' - -export {} diff --git a/src/features/Register/MainSubscription/index.tsx b/src/features/Register/MainSubscription/index.tsx new file mode 100644 index 00000000..9685a56f --- /dev/null +++ b/src/features/Register/MainSubscription/index.tsx @@ -0,0 +1,27 @@ +import React from 'react' + +import { Radio } from 'features/Common' + +import { Price } from '../Price' +import { + SubscriptionWrapper, + SubscriptionTitle, + Row, +} from '../Steps/Subscriptions/styled' + +type TMainSubscription = { + price: number, + title: string, +} + +export const MainSubscription = ({ price, title }: TMainSubscription) => ( + + + + {title} + + + + + +) diff --git a/src/features/Register/Price/index.tsx b/src/features/Register/Price/index.tsx index 23058f4b..d5f23214 100644 --- a/src/features/Register/Price/index.tsx +++ b/src/features/Register/Price/index.tsx @@ -6,9 +6,19 @@ import { PriceDetails, } from './styled' -export const Price = () => ( +type TPrice = { + amount: number, + currency?: string, + perPeriod?: string, +} + +export const Price = ({ + amount, + currency = '₽', + perPeriod = 'мес', +}: TPrice) => ( - 1999 - ₽ / мес + {amount} + {currency} / {perPeriod} ) diff --git a/src/features/Register/Price/styled.tsx b/src/features/Register/Price/styled.tsx index fd060f00..cdd64c3d 100644 --- a/src/features/Register/Price/styled.tsx +++ b/src/features/Register/Price/styled.tsx @@ -20,4 +20,5 @@ export const PriceDetails = styled.span` font-size: 18px; line-height: 21px; color: ${({ theme: { colors } }) => colors.text}; + text-transform: uppercase; ` diff --git a/src/features/Register/Steps/Subscriptions/Subscription.tsx b/src/features/Register/Steps/Subscriptions/Subscription.tsx deleted file mode 100644 index 57e522cd..00000000 --- a/src/features/Register/Steps/Subscriptions/Subscription.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' - -import { Price } from '../../Price' -import { - SubscriptionWrapper, - Radio, - SubscriptionTitle, - Row, -} from './styled' - -export const Subscription = () => ( - - - - Бесплатная - - - - - -) diff --git a/src/features/Register/Steps/Subscriptions/index.tsx b/src/features/Register/Steps/Subscriptions/index.tsx index ea7263d9..ba620420 100644 --- a/src/features/Register/Steps/Subscriptions/index.tsx +++ b/src/features/Register/Steps/Subscriptions/index.tsx @@ -1,13 +1,11 @@ import React, { Fragment } from 'react' -import { Checkbox } from 'features/Common/Checkbox' import { ButtonSolid } from 'features/Common/Button' import { ArrowLeft, ArrowRight } from 'features/Common/Arrows' import { ButtonsBlock } from 'features/Login/styled' -import { Price } from 'features/Register/Price' - -import { Subscription } from './Subscription' +import { MainSubscription } from 'features/Register/MainSubscription' +import { AdditionalSubscription } from 'features/Register/AdditionalSubscription' import { SubscriptionsBlock, @@ -16,9 +14,6 @@ import { SubscriptionList, SubscriptionListItem, PricesBlock, - PriceItemTitle, - PriceItem, - PriceItemCol, TotalInfoBlock, TotalInfoText, TotalPriceAmmount, @@ -31,10 +26,10 @@ export const SubscriptionStep = () => ( Выбор подписки - + - + @@ -42,42 +37,10 @@ export const SubscriptionStep = () => ( Дополнительно - - - - - - Российская премьер-лига - - - - - - - - - Primera División - - - - - - - - - Manchester United - - - - - - - - - Василий Березуцкий - - - + + + + diff --git a/src/features/Register/Steps/Subscriptions/stories.tsx b/src/features/Register/Steps/Subscriptions/stories.tsx deleted file mode 100644 index bd09293a..00000000 --- a/src/features/Register/Steps/Subscriptions/stories.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react' - -import { Subscription as SubscriptionComponent } from './Subscription' - -export default { - title: 'Subscription', -} - -export const Subscription = () => ( - -) - -export const AdditionalSubscription = () => ( - -) diff --git a/src/features/Register/Steps/Subscriptions/styled.tsx b/src/features/Register/Steps/Subscriptions/styled.tsx index 6776c5ed..ebb1aba6 100644 --- a/src/features/Register/Steps/Subscriptions/styled.tsx +++ b/src/features/Register/Steps/Subscriptions/styled.tsx @@ -43,7 +43,6 @@ export const SubscriptionWrapper = styled.div` ` export const SubscriptionTitle = styled.span` - margin-left: 22px; font-style: normal; font-weight: bold; font-size: 18px; @@ -64,13 +63,6 @@ export const Row = styled.div` bottom: ${({ bottom }) => bottom}px; ` -export const Radio = styled.div` - width: 26px; - height: 26px; - background-image: url(/images/radioChecked.svg); - background-position: center; -` - export const PricesBlock = styled.div` width: 1200px; display: flex; @@ -78,25 +70,6 @@ export const PricesBlock = styled.div` position: relative; ` -export const PriceItem = styled(SubscriptionWrapper)` - height: 176px; - display: flex; - flex-direction: row; - margin: 0; - padding: 24px 25px 40px; -` - -export const PriceItemTitle = styled(SubscriptionTitle)` - margin: 3px 5px 0 0; - line-height: 24px; -` - -export const PriceItemCol = styled.div` - display: flex; - flex-direction: column; - justify-content: space-between; -` - export const TotalInfoBlock = styled.div` width: 201px; position: absolute; From 799ce3209fa7806270921b868abfbb037ce7ef6e Mon Sep 17 00:00:00 2001 From: "mirlan.maksitaliev" Date: Mon, 15 Jun 2020 12:28:12 +0600 Subject: [PATCH 07/13] refactor(ott-36): renamed first step component to Registration --- src/features/Register/Steps/Registration/index.tsx | 2 +- src/features/Register/index.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/features/Register/Steps/Registration/index.tsx b/src/features/Register/Steps/Registration/index.tsx index 0292fd7d..9e5a5fe8 100644 --- a/src/features/Register/Steps/Registration/index.tsx +++ b/src/features/Register/Steps/Registration/index.tsx @@ -13,7 +13,7 @@ import { NextButton } from '../../styled' const labelWidth = 78 -export const GeneralDataStep = () => ( +export const Registration = () => (
Регистрация diff --git a/src/features/Register/index.tsx b/src/features/Register/index.tsx index 52c9c6b7..657a8773 100644 --- a/src/features/Register/index.tsx +++ b/src/features/Register/index.tsx @@ -8,7 +8,7 @@ import { Logo } from 'features/Logo' import { CenterBlock } from 'features/Login/styled' import { - GeneralDataStep, + Registration, CardStep, SubscriptionStep, } from './Steps' @@ -18,7 +18,7 @@ export const Register = () => ( - + From b450fa304ed92f6d1f68f12c79d7466f2ae8750f Mon Sep 17 00:00:00 2001 From: Bombamuerta Date: Tue, 16 Jun 2020 17:22:25 +0300 Subject: [PATCH 08/13] style(#ott-36): fixed container top margin --- src/features/Login/styled.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/Login/styled.tsx b/src/features/Login/styled.tsx index f1701bed..bc2837a3 100644 --- a/src/features/Login/styled.tsx +++ b/src/features/Login/styled.tsx @@ -7,7 +7,7 @@ export const CenterBlock = styled.div` display: flex; flex-direction: column; align-items: center; - justify-content: center; + justify-content: flex-start; margin-top: 140px; ` From ee895dfce56ba2fe83e6e7e86221d008e3006395 Mon Sep 17 00:00:00 2001 From: Bombamuerta Date: Tue, 16 Jun 2020 17:57:39 +0300 Subject: [PATCH 09/13] style(#ott-38): fixed spell error --- src/features/Register/Steps/Card/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/Register/Steps/Card/index.tsx b/src/features/Register/Steps/Card/index.tsx index 5a8c664a..5c0c3aaa 100644 --- a/src/features/Register/Steps/Card/index.tsx +++ b/src/features/Register/Steps/Card/index.tsx @@ -29,7 +29,7 @@ export const CardStep = () => ( Date: Tue, 16 Jun 2020 18:01:21 +0300 Subject: [PATCH 10/13] style(#ott-38): micro fix --- src/features/Register/Steps/Card/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/Register/Steps/Card/index.tsx b/src/features/Register/Steps/Card/index.tsx index 5c0c3aaa..4f6675a3 100644 --- a/src/features/Register/Steps/Card/index.tsx +++ b/src/features/Register/Steps/Card/index.tsx @@ -29,7 +29,7 @@ export const CardStep = () => ( Date: Wed, 17 Jun 2020 12:02:05 +0300 Subject: [PATCH 11/13] style(#ott-36): cursor pointers added --- src/features/Common/Button/styled.tsx | 1 + src/features/Common/Checkbox/styled.tsx | 1 + src/features/Common/Radio/styled.tsx | 1 + 3 files changed, 3 insertions(+) diff --git a/src/features/Common/Button/styled.tsx b/src/features/Common/Button/styled.tsx index 04a2c45a..b3c9d504 100644 --- a/src/features/Common/Button/styled.tsx +++ b/src/features/Common/Button/styled.tsx @@ -31,6 +31,7 @@ export const solidButtonStyles = css` padding-bottom: 13px; color: #FFFFFF; font-weight: bold; + cursor: pointer; border-color: transparent; background: ${({ theme: { colors } }) => colors.primary}; ` diff --git a/src/features/Common/Checkbox/styled.tsx b/src/features/Common/Checkbox/styled.tsx index 4c459eb5..29b41c8c 100644 --- a/src/features/Common/Checkbox/styled.tsx +++ b/src/features/Common/Checkbox/styled.tsx @@ -31,6 +31,7 @@ export const Input = styled.input` background-repeat: no-repeat; background-position: center center; background-image: url(/images/checkboxUnchecked.svg); + cursor: pointer; } &:checked+${Label}::before { diff --git a/src/features/Common/Radio/styled.tsx b/src/features/Common/Radio/styled.tsx index 9a98a8e6..eae7aa32 100644 --- a/src/features/Common/Radio/styled.tsx +++ b/src/features/Common/Radio/styled.tsx @@ -32,6 +32,7 @@ export const Input = styled.input` background-repeat: no-repeat; background-position: center center; background-image: url(/images/radioUnchecked.svg); + cursor: pointer; } &:checked+${Label}::before { From ed3019c5014f91ee373eea66eef7758574d35277 Mon Sep 17 00:00:00 2001 From: Bombamuerta Date: Wed, 17 Jun 2020 12:37:32 +0300 Subject: [PATCH 12/13] style(#ott-36): fixed button text align --- src/features/Common/Button/styled.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/features/Common/Button/styled.tsx b/src/features/Common/Button/styled.tsx index b3c9d504..5669f9f1 100644 --- a/src/features/Common/Button/styled.tsx +++ b/src/features/Common/Button/styled.tsx @@ -27,9 +27,7 @@ export const outlineButtonStyles = css` export const solidButtonStyles = css` ${baseButtonStyles} - padding-top: 18.5px; - padding-bottom: 13px; - color: #FFFFFF; + color: #fff; font-weight: bold; cursor: pointer; border-color: transparent; From b398afe8f408336af4e6bfd8261a8918c4d51c31 Mon Sep 17 00:00:00 2001 From: Bombamuerta Date: Wed, 17 Jun 2020 13:27:02 +0300 Subject: [PATCH 13/13] style(#ott-36): fixed card input text wrap --- src/features/Register/Steps/Card/index.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/features/Register/Steps/Card/index.tsx b/src/features/Register/Steps/Card/index.tsx index 4f6675a3..3da20959 100644 --- a/src/features/Register/Steps/Card/index.tsx +++ b/src/features/Register/Steps/Card/index.tsx @@ -13,8 +13,6 @@ import { Row, } from '../../styled' -const labelWidth = 116 - export const CardStep = () => ( Привязка карты @@ -23,7 +21,6 @@ export const CardStep = () => ( @@ -32,7 +29,6 @@ export const CardStep = () => ( label='Срок действия' wrapperWidth={280} inputWidth={85} - labelWidth={labelWidth} paddingX={21} />