Merge pull request #7 from instat/OTT-39-subs-price-blocks

style(#ott-39): price block added

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;
 `

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: 0px;
+  transform: translate(-10px, -50%);
 `
 
 export const ArrowRight = styled(ArrowStyled)`
   background-image: url(/images/arrowRight.svg);
+  top: 50%;
+  right: 0px;
+  transform: translate(10px, -50%);
 `

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`

src/features/Login/styled.tsx

@@ -7,12 +7,13 @@ export const CenterBlock = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   margin-top: 140px;
 `
 
 export const Form = styled.form`
   width: 544px;
-  margin-top: 80px;
+  margin: 80px 0 140px 0;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -29,19 +30,17 @@ 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-bottom: 40px;
-  }
+  margin-top: ${({ forSubsPage }) => (forSubsPage ? '80px' : '60px')};
+  margin-bottom: ${({ forSubsPage }) => (forSubsPage ? '96px' : '')};
+  position: relative;
 `
 
 export const RegisterButton = styled(Link)`
   ${outlineButtonStyles}
-
+  margin-top: 40px;
   display: flex;
   align-items: center;
   justify-content: center;

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'
+
 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 = () => (
         </SubscriptionListItem>
       </SubscriptionList>
     </SubscriptionsBlock>
-
-    <SubscriptionsBlock>
+    <SubscriptionsBlock forAdditionalTitle>
       <AdditionalBlockTitle>Дополнительно</AdditionalBlockTitle>
-
+      <PricesBlock>
+        <ArrowLeft />
+        <PriceItem>
+          <PriceItemCol>
+            <Checkbox />
+          </PriceItemCol>
+          <PriceItemCol>
+            <PriceItemTitle>Российская премьер-лига</PriceItemTitle>
+            <Price />
+          </PriceItemCol>
+        </PriceItem>
+        <PriceItem>
+          <PriceItemCol>
+            <Checkbox />
+          </PriceItemCol>
+          <PriceItemCol>
+            <PriceItemTitle>Primera División</PriceItemTitle>
+            <Price />
+          </PriceItemCol>
+        </PriceItem>
+        <PriceItem>
+          <PriceItemCol>
+            <Checkbox />
+          </PriceItemCol>
+          <PriceItemCol>
+            <PriceItemTitle>Manchester United</PriceItemTitle>
+            <Price />
+          </PriceItemCol>
+        </PriceItem>
+        <PriceItem>
+          <PriceItemCol>
+            <Checkbox />
+          </PriceItemCol>
+          <PriceItemCol>
+            <PriceItemTitle>Василий Березуцкий</PriceItemTitle>
+            <Price />
+          </PriceItemCol>
+        </PriceItem>
+        <ArrowRight />
+      </PricesBlock>
     </SubscriptionsBlock>
-    <ButtonsBlock>
+    <ButtonsBlock forSubsPage>
       <ButtonSolid>Готово</ButtonSolid>
+      <TotalInfoBlock>
+        <TotalInfoText>Базовая + 2 дополнительно за
+          <TotalPriceAmmount>6997</TotalPriceAmmount>
+          <TotalPriceDetails>₽ / МЕС</TotalPriceDetails>
+        </TotalInfoText>
+      </TotalInfoBlock>
     </ButtonsBlock>
   </Fragment>
 )

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;
+`

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;