Ott 312 card page (#139)

* style(#312): responsive card page

* style(#438): match slider fixed

* style(#312): bottom menu for main page added

src/features/App/AuthenticatedApp.tsx

@@ -18,10 +18,14 @@ import { LanguageSelect } from 'features/LanguageSelect'
 import { UserAccount } from 'features/UserAccount'
 import { ScoreStore, ToggleScore } from 'features/ToggleScore'
 import { Header } from 'features/Header'
+import { SportFilterWrapper } from 'features/Header/styled'
 import { MainWrapper } from 'features/MainWrapper'
 import {
   HeaderFiltersStore,
+  TournamentFilter,
+  SportTypeFilter,
 } from 'features/HeaderFilters'
+
 import { UserFavorites } from 'features/UserFavorites'
 import { UserFavoritesStore } from 'features/UserFavorites/store'
 import { useMediaQuery } from 'features/MediaQuery'
@@ -78,6 +82,16 @@ export const AuthenticatedApp = () => {
               <Route path={`/:sportName${PAGES.match}/:pageId`}>
                 <MatchPage />
               </Route>
+              {
+                isMobile
+                  ? (
+                    <SportFilterWrapper>
+                      <SportTypeFilter />
+                      <TournamentFilter />
+                    </SportFilterWrapper>
+                  )
+                  : null
+              }
             </MainWrapper>
           </UserFavoritesStore>
         </HeaderFiltersStore>

src/features/Header/styled.tsx

@@ -63,6 +63,12 @@ export const SportFilterWrapper = styled(FilterWrapper)`
   @media${devices.laptop} {
     width: 234px;
   }
+  @media${devices.tablet} {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background: radial-gradient( 49.07% 49.07% at 50% 29.54%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 100% ), rgba(0,0,0,0.95);
+  }
 `
 
 export const MenuWrapper = styled.div`

src/features/HeaderFilters/components/MatchStatusFilter/styled.tsx

@@ -27,14 +27,6 @@ export const RadioButton = styled.button.attrs(({ selected }: RadioButtonProps)
   font-size: 18px;
   cursor: pointer;
 
-  @media${devices.tablet} {
-    width: 105px;
-    height: 30px;
-    font-size: 13px;
-    color: #fff;
-    background-color: rgba(153, 153, 153, 0.5);
-  }
-
   ${({ selected }) => (
     selected
       ? `
@@ -75,11 +67,16 @@ export const RadioButton = styled.button.attrs(({ selected }: RadioButtonProps)
   }
 
   @media${devices.tablet} {
+    width: 105px;
+    height: 30px;
+    font-size: 13px;
+    color: #fff;
+    background-color: rgba(153, 153, 153, 0.5);
     border-right: 0;
     margin-right: 10px;
 
     :last-child {
-      margin-right: 0px;
+      margin-right: 0;
     }
   }
 `

src/features/HomePage/styled.tsx

@@ -6,7 +6,7 @@ export const Content = styled.main`
   margin-top: 75px;
   padding: 0 16px;
   @media${devices.tablet} {
-    margin-top: 9px;
+    margin-top: 12px;
   }
 
   @media${devices.mobile} {

src/features/MatchCard/CardSoon/index.tsx

@@ -3,6 +3,7 @@ import React, { useCallback } from 'react'
 
 import styled from 'styled-components/macro'
 import format from 'date-fns/format'
+import { devices } from 'config/devices'
 
 import type { Match } from 'features/Matches'
 import { getSportColor, handleImageError } from 'helpers'
@@ -21,6 +22,7 @@ import {
 } from '../styled'
 
 const MatchStatus = styled(CommonMatchStatus)`
+  top: 20px;
   color: rgba(255, 255, 255, 0.3);
   border: 1px solid currentColor;
 `
@@ -32,6 +34,11 @@ const CardWrapper = styled(CommonCardWrapper)`
 const TeamLogos = styled.div`
   display: flex;
   padding-left: 24px;
+
+  @media${devices.mobile} {
+    justify-content: space-between;
+    padding-right: 20px;
+  }
 `
 
 const TeamLogo = styled.img`
@@ -40,6 +47,11 @@ const TeamLogo = styled.img`
   :last-child {
     margin-left: 8px;
   }
+
+  @media${devices.mobile} {
+    width: 134px;
+  }
+
 `
 
 const TeamName = styled(CommonTeamName)`

src/features/MatchCard/styled.tsx

@@ -9,7 +9,7 @@ export const CardWrapper = styled.li.attrs({
 })`
   position: relative;
   flex: 0 0 auto;
-  min-width: ${MATCH_CARD_WIDTH}px;
+  width: ${MATCH_CARD_WIDTH}px;
   height: 100%;
   padding-bottom: 18px;
   border-radius: 2px;
@@ -18,18 +18,20 @@ export const CardWrapper = styled.li.attrs({
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
   cursor: pointer;
   transition: border 0.5s ease-out;
+  margin-right: 16px;
 
 
   @media${devices.laptop} {
-    min-width: 279px;
+    width: 279px;
     height: 279px;
-    margin: 0;
   }
 
   @media${devices.tablet} {
-    width: 100%;
     height: 299px;
-    margin: 0;
+  }
+  @media${devices.mobile} {
+    width: 100%;
+    margin-bottom: 10px;
   }
 
   &:hover {

src/features/MatchesSlider/styled.tsx

@@ -1,5 +1,7 @@
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
 export const Wrapper = styled.div`
   position: relative;
   margin-bottom: 16px;
@@ -13,6 +15,10 @@ export const Slides = styled.ul`
   &::-webkit-scrollbar {
     display: none;
   }
+
+  @media${devices.mobile} {
+    flex-direction: column;
+  }
 `
 
 export const Arrow = styled.div<{ type: 'arrowLeft' | 'arrowRight' }>`

src/features/Register/components/CardStep/index.tsx

@@ -32,18 +32,12 @@ export const CardStep = () => {
           <Input
             id='expiration'
             labelLexic='form_card_expiration'
-            wrapperWidth={280}
-            inputWidth={85}
-            paddingX={21}
             title={defaultMessage}
           />
           <Input
             id='code'
             labelLexic='form_card_code'
-            wrapperWidth={184}
-            inputWidth={30}
             maxLength={3}
-            paddingX={18.6}
             title={defaultMessage}
           />
         </Row>

src/features/Register/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Route } from 'react-router'
+import { useRouteMatch } from 'react-router-dom'
 
 import { PAGES } from 'config'
 
@@ -11,20 +12,23 @@ import { CardStep } from './components/CardStep'
 import { SubscriptionStep } from './components/SubscriptionsStep'
 import { RegistrationSuccessful } from './components/RegistrationSuccessful'
 
-export const Register = () => (
-  <CustomCenterBlock>
-    <Logo />
-    <Route exact path={`${PAGES.register}`}>
-      <RegistrationStep />
-    </Route>
-    <Route exact path={`${PAGES.register}/card`}>
-      <CardStep />
-    </Route>
-    <Route exact path={`${PAGES.register}/subscriptions`}>
-      <SubscriptionStep />
-    </Route>
-    <Route exact path={`${PAGES.register}/successful`}>
-      <RegistrationSuccessful />
-    </Route>
-  </CustomCenterBlock>
-)
+export const Register = () => {
+  const isCardStep = useRouteMatch(`${PAGES.register}/card`)?.isExact || false
+  return (
+    <CustomCenterBlock isCardStep={isCardStep}>
+      <Logo />
+      <Route exact path={`${PAGES.register}`}>
+        <RegistrationStep />
+      </Route>
+      <Route exact path={`${PAGES.register}/card`}>
+        <CardStep />
+      </Route>
+      <Route exact path={`${PAGES.register}/subscriptions`}>
+        <SubscriptionStep />
+      </Route>
+      <Route exact path={`${PAGES.register}/successful`}>
+        <RegistrationSuccessful />
+      </Route>
+    </CustomCenterBlock>
+  )
+}

src/features/Register/styled.tsx

@@ -15,6 +15,15 @@ import {
   BlockTitle,
 } from 'features/Login/styled'
 
+export const Row = styled.div`
+  width: 100%;
+  display: flex;
+
+  & div:last-child {
+    margin-left: 16px;
+  }
+`
+
 export const Card = styled.div`
   width: 546px;
   height: 340px;
@@ -27,20 +36,108 @@ export const Card = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-`
 
-export const Row = styled.div`
-  width: 100%;
-  display: flex;
+  ${Row} {
+   ${Column} {
+     :first-of-type {
+       ${InputWrapper} {
+         width: 280px;
+       }
+       ${InputStyled} {
+         width: 85px;
+       }
+     }
+
+     :last-of-type {
+      ${InputWrapper} {
+        width: 184px;
+      }
+      ${InputStyled} {
+        width: 30px;
+      }
+     }
+   }
+  }
 
-  & div:last-child {
-    margin-left: 16px;
+  
+  @media${devices.laptop} {
+    margin-top: 17px;
+    margin-bottom: 61px;
+    width: 482px;
+    height: 294px;
+    padding: 0 30px;
+
+    ${InputStyled} {
+        text-align: center;
+    }
+
+    ${Column} {
+      margin-bottom: 8px;
+    }
+
+    ${Row} {
+      ${Column} {
+        :first-of-type {
+          max-width: 242px;
+          ${InputWrapper} {
+            width: 242px;
+          }
+          ${InputStyled} {
+            width: 85px;
+          }
+        }
+   
+        :last-of-type {
+          max-width: 160px;
+         ${InputWrapper} {
+           width: 160px;
+         }
+         ${InputStyled} {
+           width: 30px;
+         }
+        }
+      }
+     }
+  }
+
+  @media${devices.mobile} {
+    width: 375px;
+    height: auto;
+    border: 0;
+    margin-top: 0;
+
+    ${Row} {
+      width: 335px;
+      ${Column} {
+        :first-of-type {
+          max-width: 163px;
+          ${InputWrapper} {
+            width: 163px;
+          }
+          ${InputStyled} {
+            width: 85px;
+          }
+        }
+   
+        :last-of-type {
+          max-width: 162px;
+          margin-left: 10px;
+         ${InputWrapper} {
+           width: 162px;
+         }
+         ${InputStyled} {
+           width: 30px;
+         }
+        }
+      }
+     }
   }
 `
-export const CustomCenterBlock = styled(CenterBlock)`
+
+export const CustomCenterBlock = styled(CenterBlock)<{isCardStep: boolean}>`
 
   @media${devices.laptop} {
-    margin-top: 53px;
+    margin-top: ${({ isCardStep }) => (isCardStep ? '154px' : '53px')};
 
     ${InputWrapper} {
       margin-top: 12px;