From d8776b7e091045bc2de196b1a55762e314f6a608 Mon Sep 17 00:00:00 2001 From: Bombamuerta Date: Thu, 11 Jun 2020 16:55:52 +0300 Subject: [PATCH 1/2] 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 2/2] 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;