Ott 308 adaptive player page (#148)

5 years ago · 264a7acab7
parent 3f63e2fc80
commit 264a7acab7
36 changed files with 183 additions and 137 deletions
--- a/src/features/Burger/styled.tsx
+++ b/src/features/Burger/styled.tsx
@ -11,7 +11,7 @@ const BurgerRow = styled.div`
  transform-origin: 1px;
  background: #666666;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    display: none;
  }
 `
@ -46,7 +46,7 @@ export const StyledBurger = styled.div<{open: boolean}>`
    transform: ${({ open }) => (open ? 'rotate(-45deg)' : 'rotate(0)')};
  }

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    background-size: 100%;
    background-image: url(/images/userAccount.svg);
  }
--- a/src/features/Combobox/styled.tsx
+++ b/src/features/Combobox/styled.tsx
@ -21,7 +21,7 @@ export const ComboboxStyled = styled(Combobox)`
  ${wrapperStyles}
  position: relative;

-  @media${devices.laptop} {
+  @media ${devices.laptop} {
    margin-top: 12px;

    ${Label} {
@ -33,7 +33,7 @@ export const ComboboxStyled = styled(Combobox)`
    }
  }

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    margin-top: -8px;
  }
 `
@ -46,7 +46,7 @@ export const ComboboxInputStyled = styled(ComboboxInput)`
    opacity: 0;
  }

-  @media${devices.laptop} {
+  @media ${devices.laptop} {

    margin-left: -105px;
    padding-right: 4px;
@ -63,7 +63,7 @@ export const ComboboxInputStyled = styled(ComboboxInput)`
    }
  }

-  @media${devices.mobile} {
+  @media ${devices.mobile} {
    text-align: center;
    font-size: 14px;
  }
@ -88,7 +88,7 @@ export const ComboboxListStyled = styled(ComboboxList)`
 ${customScrollbar}
 ${customStylesMixin}

- @media${devices.laptop} {
+ @media ${devices.laptop} {
   left: -33px;
   min-width: calc(100% + 58px);
 }
--- a/src/features/Common/Button/styled.tsx
+++ b/src/features/Common/Button/styled.tsx
@ -35,7 +35,7 @@ export const solidButtonStyles = css`
  border-color: transparent;
  background: ${({ theme: { colors } }) => colors.primary};

-  @media${devices.mobile} {
+  @media ${devices.mobile} {
    width: 335px;
    height: 40px;
  }
--- a/src/features/Common/Checkbox/styled.tsx
+++ b/src/features/Common/Checkbox/styled.tsx
@ -3,7 +3,7 @@ import styled from 'styled-components/macro'
 import { devices } from 'config/devices'

 export const Wrapper = styled.div`
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    position: absolute;
    left: 0;
    top: 0;
@ -47,7 +47,7 @@ export const Input = styled.input`
    background-image: url(/images/checkboxChecked.svg);
  }

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    &+${Label}::before {
      width: 288px;
      height: 100px;
--- a/src/features/Common/Input/styled.tsx
+++ b/src/features/Common/Input/styled.tsx
@ -43,7 +43,7 @@ export const Label = styled.label<LabelProps>`
  color: ${({ theme: { colors } }) => colors.secondary};
  width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}px` : '')};

- @media${devices.laptop} {
+ @media ${devices.laptop} {
    display: none;
  }
 `
@ -81,7 +81,7 @@ export const inputStyles = css<InputProps>`
    -webkit-text-fill-color: ${({ theme: { colors } }) => colors.text};
  }

-  @media${devices.laptop} {
+  @media ${devices.laptop} {
    margin-left: 5px;
    width: 100%;
    font-size: 20px;
@ -95,7 +95,7 @@ export const InputStyled = styled.input<InputProps>`
    opacity: 0;
  }

-  @media${devices.laptop} {
+  @media ${devices.laptop} {
    ::placeholder {
      opacity: 1;
      font-style: normal;
@ -108,7 +108,7 @@ export const InputStyled = styled.input<InputProps>`
    }
  }

-  @media${devices.mobile} {
+  @media ${devices.mobile} {
    font-size: 14px;

    ::placeholder {
@ -122,7 +122,7 @@ export const InputWrapper = styled.div<WrapperProps>`
  ${wrapperStyles}
  

-  @media${devices.mobile} {
+  @media ${devices.mobile} {
    height: 40px;
    margin-top: 0;
    position: relative;
@ -135,11 +135,11 @@ export const Column = styled.div`
  display: flex;
  flex-direction: column;

-  @media${devices.laptop} {
+  @media ${devices.laptop} {
    max-width: 415px;
  }

-  @media${devices.mobile} {
+  @media ${devices.mobile} {
    width: 335px;
    position: relative;
  }
@ -165,7 +165,7 @@ export const Error = styled(T9n)<ErrorProps>`
      : ''
  )}

-  @media${devices.mobile} {
+  @media ${devices.mobile} {
    margin-top: 0;
  }
 `
--- a/src/features/Common/Radio/styled.tsx
+++ b/src/features/Common/Radio/styled.tsx
@ -4,7 +4,7 @@ import { devices } from 'config/devices'

 export const Wrapper = styled.div`

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    position: absolute;
    left: 0;
    top: 0;
@ -50,7 +50,7 @@ export const Input = styled.input`
    background-image: url(/images/radioChecked.svg);
  }

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    &+${Label}::before {
      width: 163px;
      height: 100px;
--- a/src/features/Common/SportName/index.tsx
+++ b/src/features/Common/SportName/index.tsx
@ -10,7 +10,7 @@ export const SportName = styled(T9n)<{ color: string }>`
  letter-spacing: 0.02em;
  text-transform: uppercase;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    font-size: 10px;
    margin-right: 5px;
  }
--- a/src/features/Common/customScrollbar/index.tsx
+++ b/src/features/Common/customScrollbar/index.tsx
@ -12,7 +12,7 @@ export const customScrollbar = css`
    border-radius: 6px;
    background: #3F3F3F;

-    @media${devices.tablet} {
+    @media ${devices.tablet} {
      background-color: rgba(255, 255, 255, 0.5);
    }
  }
@ -26,7 +26,7 @@ export const customScrollbar = css`
    background: transparent;
  }

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    background-color: #3F3F3F;
  }
 `
--- a/src/features/Header/index.tsx
+++ b/src/features/Header/index.tsx
@ -56,6 +56,12 @@ export const Header = () => (
        <SearchWrapper>
          <Search />
        </SearchWrapper>
+        <FilterWrapper>
+          <DateFilter />
+        </FilterWrapper>
+        <FilterWrapper>
+          <MatchStatusFilter />
+        </FilterWrapper>
      </Fragment>
    </Switch>
  </Wrapper>
--- a/src/features/Header/styled.tsx
+++ b/src/features/Header/styled.tsx
@ -20,7 +20,7 @@ export const Wrapper = styled.header`
  padding-top: 16px;
  margin-bottom: 30px;

-  @media${devices.laptop} {
+  @media ${devices.laptop} {
    padding-top: 11px;
    margin-bottom: 0;
  }
@ -39,7 +39,7 @@ export const SearchWrapper = styled(FilterWrapper)`
  margin-right: 16px;
  display: flex;

-  @media${devices.desktop} {
+  @media ${devices.desktop} {
    width: 51px;
    margin-right: 9px;

@ -56,14 +56,14 @@ export const SearchWrapper = styled(FilterWrapper)`
 export const SportFilterWrapper = styled(FilterWrapper)`
  width: 400px;

-  @media${devices.desktop} {
+  @media ${devices.desktop} {
    width: 350px;
  }

-  @media${devices.laptop} {
+  @media ${devices.laptop} {
    width: 234px;
  }
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    position: fixed;
    bottom: 0;
    width: 100%;
@ -75,7 +75,7 @@ export const MenuWrapper = styled.div`
  display: flex;
  margin-right: 57px;

-  @media${devices.laptop} {
+  @media ${devices.laptop} {
    margin-right: 14px;
  }
 `
--- a/src/features/HeaderFilters/components/DateFilter/styled.tsx
+++ b/src/features/HeaderFilters/components/DateFilter/styled.tsx
@ -13,7 +13,7 @@ export const Wrapper = styled.div<Props>`
  display: flex;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    width: auto;
  }

@ -44,7 +44,7 @@ export const DateButton = styled.button`
  background-color: #3F3F3F;
  color: #999999;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    background-color: transparent;
    color: #fff;
  }
@ -64,7 +64,7 @@ export const Day = styled.span`
  font-size: 38px;
  letter-spacing: -0.03em;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    font-weight: 600;
    font-size: 14px;
 }
@ -74,7 +74,7 @@ export const Month = styled.span`
  font-weight: bold;
  font-size: 14px;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    font-weight: 600;
    margin-right: 4px;
 }
@ -87,7 +87,7 @@ export const MonthYearWrapper = styled.div`
  flex-direction: column;
  justify-content: space-between;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    flex-direction: row;
    align-items: center;
  }
@ -98,7 +98,7 @@ export const Year = styled.span`
  font-weight: 300;
  font-size: 14px;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    font-weight: 600;
  }
 `
@ -109,7 +109,7 @@ const Arrow = styled.div`
  margin: auto;
  background-color: #222222;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    height: 0;
  }

@ -129,7 +129,7 @@ export const ArrowLeft = styled(Arrow)`
    top: 19px;
    left: 17px;

-    @media${devices.tablet} {
+    @media ${devices.tablet} {
      top: 5px;
      left: 8px;
    }
@ -142,7 +142,7 @@ export const ArrowRight = styled(Arrow)`
    top: 19px;
    right: 17px;

-    @media${devices.tablet} {
+    @media ${devices.tablet} {
      top: 5px;
      right: 8px;
    }
@ -163,7 +163,7 @@ export const Button = styled.button<ButtonProps>`
  cursor: pointer;
  background-color: #3F3F3F;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    border-radius: 50%;
    width: 23px;
  }
--- a/src/features/HeaderFilters/components/MatchStatusFilter/styled.tsx
+++ b/src/features/HeaderFilters/components/MatchStatusFilter/styled.tsx
@ -33,7 +33,7 @@ export const RadioButton = styled.button.attrs(({ selected }: RadioButtonProps)
        background-color: #666666;
        color: #ffffff;

-        @media${devices.tablet} {
+        @media ${devices.tablet} {
          :first-child {
            background-color: #CC0000;
          }
@ -66,7 +66,7 @@ export const RadioButton = styled.button.attrs(({ selected }: RadioButtonProps)
    border-right: 1px solid #222222;
  }

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    width: 105px;
    height: 30px;
    font-size: 13px;
--- a/src/features/HeaderFilters/components/SportTypeFilter/styled.tsx
+++ b/src/features/HeaderFilters/components/SportTypeFilter/styled.tsx
@ -8,7 +8,7 @@ export const Wrapper = styled.div`
  position: relative;
  border-right: 1px solid #222222;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    border-right: 0;
  }

@ -29,7 +29,7 @@ export const SportList = styled.ul`
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
  z-index: 1;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    top: -144px;
    width: 100%;
    background-color: #3F3F3F;
--- a/src/features/HeaderFilters/components/TournamentFilter/styled.tsx
+++ b/src/features/HeaderFilters/components/TournamentFilter/styled.tsx
@ -12,13 +12,13 @@ export const ListWrapper = styled.div`
  overflow-y: scroll;
  z-index: 2;

-  @media${devices.laptop} {
+  @media ${devices.laptop} {
    right: 0;
    bottom: -1px;
    left: auto;
  }

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    width: 200%;
    left: -100%;
    top: calc(-92vh + 36px);
@ -49,7 +49,7 @@ export const DropdownButton = styled.button<Props>`
  background-repeat: no-repeat;
  background-position: 113px;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    background: transparent;
    font-weight: 500;
    font-size: 14px;
@ -91,7 +91,7 @@ export const Arrows = styled.span<Props>`
  background-repeat: no-repeat;
  background-position: center;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    display: none;
  }

--- a/src/features/HeaderFilters/components/TournamentList/styled.tsx
+++ b/src/features/HeaderFilters/components/TournamentList/styled.tsx
@ -11,7 +11,7 @@ export const ListItem = styled(Item)`
  background-color: #666;
  cursor: pointer;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    background-color:  #3F3F3F;
  }

--- a/src/features/HomePage/styled.tsx
+++ b/src/features/HomePage/styled.tsx
@ -5,11 +5,11 @@ import { devices } from 'config/devices'
 export const Content = styled.main`
  margin-top: 75px;
  padding: 0 16px;
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    margin-top: 12px;
  }

-  @media${devices.mobile} {
+  @media ${devices.mobile} {
    padding: 0;
  }
 `
--- a/src/features/Login/styled.tsx
+++ b/src/features/Login/styled.tsx
@ -12,11 +12,11 @@ export const CenterBlock = styled.div`
  justify-content: flex-start;
  margin-top: 140px;

-  @media${devices.laptop} {
+  @media ${devices.laptop} {
    margin-top: 177px;
  }

-  @media${devices.mobile} {
+  @media ${devices.mobile} {
    margin-top: 150px;
  }
 `
@ -28,13 +28,13 @@ export const Form = styled.form<{forRegPage?: boolean}>`
  flex-direction: column;
  align-items: center;

-  @media${devices.laptop} {
+  @media ${devices.laptop} {
    margin: ${({ forRegPage }) => (forRegPage ? '75px 0 140px 0' : '80px 0 140px 0')};
  }
  
  

-  @media${devices.mobile} {
+  @media ${devices.mobile} {
    width: auto;
    margin: 50px 0 140px 0;
  }
@ -50,12 +50,12 @@ export const BlockTitle = styled.span`
  margin-bottom: 20px;
  transition: color 0.3s ease-in-out;

-  @media${devices.laptop} {
+  @media ${devices.laptop} {
    max-height: 24px;
    margin-bottom: 23px;
  }

-  @media${devices.mobile} {
+  @media ${devices.mobile} {
    font-size: 24px;
    margin-bottom: 20px;
  }
@ -69,11 +69,11 @@ export const ButtonsBlock = styled.div<{forSubsPage?: boolean}>`
  margin-bottom: ${({ forSubsPage }) => (forSubsPage ? '96px' : '')};
  position: relative;

-  @media${devices.laptop} {
+  @media ${devices.laptop} {
    margin-top: ${({ forSubsPage }) => (forSubsPage ? '80px' : '32px')};
  }

-  @media${devices.mobile} {
+  @media ${devices.mobile} {
    bottom: ${({ forSubsPage }) => (forSubsPage ? '20px' : '10px')};
    margin-bottom: ${({ forSubsPage }) => (forSubsPage ? '0' : '')};
    position: ${({ forSubsPage }) => (forSubsPage ? 'absolute' : 'relative')};
@ -87,7 +87,7 @@ export const RegisterButton = styled(Link)`
  align-items: center;
  justify-content: center;

-  @media${devices.mobile} {
+  @media ${devices.mobile} {
    width: 335px;
    height: 40px;
    margin-top: 10px;
--- a/src/features/Logo/index.tsx
+++ b/src/features/Logo/index.tsx
@ -15,7 +15,7 @@ export const Logo = styled.div<TLogo>`
  background-repeat: no-repeat;
  background-image: url(/images/logo.svg);

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    width: ${({ width }) => width}px;
    height: ${({ height }) => height}px;
    display: flex;
--- a/src/features/MainWrapper/index.tsx
+++ b/src/features/MainWrapper/index.tsx
@ -6,7 +6,7 @@ export const MainWrapper = styled.div`
  width: 100%;
  padding-left: 80px;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    padding: 0
  }
 `
--- a/src/features/MatchCard/CardSoon/index.tsx
+++ b/src/features/MatchCard/CardSoon/index.tsx
@ -28,7 +28,7 @@ const TeamLogos = styled.div`
  display: flex;
  padding-left: 24px;

-  @media${devices.mobile} {
+  @media ${devices.mobile} {
    justify-content: space-between;
    padding-right: 20px;
  }
@ -41,7 +41,7 @@ const TeamLogo = styled.img`
    margin-left: 8px;
  }

-  @media${devices.mobile} {
+  @media ${devices.mobile} {
    width: 134px;
  }

--- a/src/features/MatchCard/styled.tsx
+++ b/src/features/MatchCard/styled.tsx
@ -20,15 +20,15 @@ export const CardWrapper = styled.li.attrs({
  transition: border 0.5s ease-out;
  margin-right: 16px;

-  @media${devices.laptop} {
+  @media ${devices.laptop} {
    width: 279px;
    height: 279px;
  }

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    height: 299px;
  }
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
    width: 100%;
    margin-bottom: 10px;
  }
@ -43,7 +43,7 @@ export const PreviewWrapper = styled.div`
  flex-direction: column-reverse;
  height: 147px;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    height: 208px;
  }
 `
@ -71,7 +71,7 @@ export const MatchDate = styled.div`
  color: white;
  background: #6D6D6D;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    top: 10px;
    left: 20px;
    width: auto;
@ -89,7 +89,7 @@ export const Info = styled.div`
  overflow: hidden;
  white-space: nowrap;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    padding: 13px 18px 17px 18px;
  }
 `
@ -98,7 +98,7 @@ export const TournamentName = styled.span`
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    margin-top: 10px;
  }
 `
@ -106,7 +106,7 @@ export const TournamentName = styled.span`
 export const Teams = styled.div`
  margin-top: 21px;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    margin-top: 0;
  }
 `
@ -168,9 +168,12 @@ export const CardHoverWrapper = styled(CardWrapper)`
  cursor: pointer;
  height: 288px;

-  @media${devices.laptop} {
+  @media ${devices.laptop} {
    height: 279px;
  }
+  @media ${devices.tablet} {
+    height: 299px;
+  }
 `

 export const CardHoverInner = styled.div`
--- a/src/features/MatchPage/MatchProfileCard/styled.tsx
+++ b/src/features/MatchPage/MatchProfileCard/styled.tsx
@ -12,7 +12,7 @@ export const Wrapper = styled.div`
  color: white;
  min-height: 28px;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    order: 2;
    font-size: 16px;
    padding: 15px 20px 0 20px;
@ -41,7 +41,7 @@ export const Dash = styled.span`
  height: fit-content;
  align-self: center;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    width: 16px;
    border-bottom: 1px solid white;
    margin: 0 4px;
@ -52,7 +52,7 @@ export const Score = styled.div`
  display: flex;
  margin: 0 20px;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    margin: 0 10px;
    color: #EACB6F;
  }
@ -67,7 +67,7 @@ export const Tournament = styled.div`
  margin-left: 48px;
  color: #666666;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    width: 100%;
    margin-left: 0;
    margin-top: 4px;
--- a/src/features/MatchPage/styled.tsx
+++ b/src/features/MatchPage/styled.tsx
@ -4,11 +4,11 @@ import { devices } from 'config/devices'
 export const MainWrapper = styled.div`
  margin: 63px 16px 0 16px;

-  @media${devices.laptop} {
+  @media ${devices.laptop} {
    margin: 0px 16px;
  }

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    display: flex;
    flex-direction: column;
    margin: 0 0 16px 0;
@ -22,7 +22,7 @@ export const Container = styled.div`
  display: flex;
  flex-direction: column;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    order: 1;
    margin-top: 0;
  }
--- a/src/features/Matches/styled.tsx
+++ b/src/features/Matches/styled.tsx
@ -5,7 +5,7 @@ import { devices } from 'config/devices'
 export const Section = styled.section`
  margin-bottom: 30px;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    width: 100%;
  }
 `
@ -18,7 +18,7 @@ export const Title = styled.h2`
  letter-spacing: -0.02em;
  color: #fff;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    display: none;
  }
 `
--- a/src/features/MatchesGrid/styled.tsx
+++ b/src/features/MatchesGrid/styled.tsx
@ -7,14 +7,14 @@ export const Wrapper = styled.ul`
  grid-template-columns: repeat(6, 288px);
  grid-gap: 13px;
 
-  @media${devices.large} {
+  @media ${devices.large} {
    grid-template-columns: repeat(auto-fit, minmax(270px, 280px ));
  }

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    justify-content: center;
  }
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
    grid-template-columns: repeat(auto-fit, minmax(279px, 1fr ));
  }
 `
--- a/src/features/MatchesSlider/styled.tsx
+++ b/src/features/MatchesSlider/styled.tsx
@ -16,7 +16,7 @@ export const Slides = styled.ul`
    display: none;
  }

-  @media${devices.mobile} {
+  @media ${devices.mobile} {
    flex-direction: column;
  }
 `
--- a/src/features/Menu/styled.tsx
+++ b/src/features/Menu/styled.tsx
@ -14,7 +14,7 @@ export const Wrapper = styled.nav`
  margin-left: 90px;
  margin-right: 14px;

-  @media${devices.desktop} {
+  @media ${devices.desktop} {
    margin-left: 23px;
    margin-right: 10px;
  }
@ -30,13 +30,13 @@ export const MenuList = styled.ul`
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  z-index: 1;

-  @media${devices.laptop} {
+  @media ${devices.laptop} {
    top: 55px;
    left: 0;
    width: 288px;
  }

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    right: 0;
    left: auto;
    z-index: 3;
@ -52,11 +52,11 @@ export const MenuList = styled.ul`
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: #666;

-    @media${devices.laptop} {
+    @media ${devices.laptop} {
      left: 4%;
    }

-    @media${devices.tablet} {
+    @media ${devices.tablet} {
      left: 97%;
    }
  }
--- a/src/features/ProfileCard/styled.tsx
+++ b/src/features/ProfileCard/styled.tsx
@ -1,11 +1,24 @@
 import styled from 'styled-components/macro'

+import { devices } from 'config/devices'
+
 import { ProfileTypes } from 'config'

 export const Wrapper = styled.div`
  display: flex;
  margin-left: 70px;
  margin-bottom: 50px;
+
+  @media ${devices.laptop} {
+    margin-top: 30px;
+    margin-left: 23px;
+  }
+
+  @media ${devices.laptop} {
+    margin-top: 14px;
+    margin-left: 20px;
+    margin-bottom: 20px;
+  }
 `

 export const Name = styled.h1`
@ -15,6 +28,11 @@ export const Name = styled.h1`
  font-weight: bold;
  letter-spacing: 0.02em;
  color: #fff;
+
+  @media ${devices.tablet} {
+    font-size: 22px;
+    line-height: 21px;
+  }
 `

 export const Logo = styled.img<{ profileType: number }>`
@ -58,6 +76,14 @@ export const AddToFavButton = styled.button`
    width: 18px;
    height: 18px;
  }
+
+  @media ${devices.tablet} {
+    line-height: 13px;
+
+    svg {
+      display: none;
+    }
+  }
 `

 export const InFavorites = styled(AddToFavButton)`
@ -70,6 +96,15 @@ export const InfoItems = styled.div`
  margin-left: 20px;
  display: flex;
  align-items: center;
+  
+  @media ${devices.laptop} {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  @media ${devices.tablet} {
+    margin-left: 10px;
+  }
 `

 export const InfoItem = styled.div`
@ -77,4 +112,10 @@ export const InfoItem = styled.div`
  font-size: 16px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.5);
+  margin-right: 5px;
+
+  @media ${devices.tablet} {
+    font-size: 11px;
+    line-height: 10px;
+  }
 `
--- a/src/features/Register/components/AdditionalSubscription/styled.tsx
+++ b/src/features/Register/components/AdditionalSubscription/styled.tsx
@ -14,7 +14,7 @@ export const PriceItem = styled.div`
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  border-radius: 2px;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    width: 162px;
    height: 100px;
    padding: 12px 5px;
@ -31,7 +31,7 @@ export const PriceItemTitle = styled.span`
  color: ${({ theme: { colors } }) => colors.text};
  margin: 3px 5px 0 0;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
   text-align: center;
   line-height: 18px;
  }
--- a/src/features/Register/components/Price/styled.tsx
+++ b/src/features/Register/components/Price/styled.tsx
@ -6,7 +6,7 @@ export const PriceWrapper = styled.div`
  display: flex;
  align-items: flex-start;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    justify-content: center;
   }
 `
@ -18,7 +18,7 @@ export const PriceAmount = styled.span`
  line-height: 40px;
  color: ${({ theme: { colors } }) => colors.text};

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    font-size: 36px;
  }
 `
@ -32,7 +32,7 @@ export const PriceDetails = styled.span`
  color: ${({ theme: { colors } }) => colors.text};
  text-transform: uppercase;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    font-size: 11px;
  }
 `
--- a/src/features/Register/components/RegistrationSuccessful/styled.tsx
+++ b/src/features/Register/components/RegistrationSuccessful/styled.tsx
@ -12,14 +12,14 @@ export const Container = styled.div`
  align-items: center;
  margin-top: 80px;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {

    ${BlockTitle} {
      text-align: center;
    }
  }
  
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
    margin-top: 20px;
  }
 `
@ -32,7 +32,7 @@ export const GreenTick = styled.div`
  background-position-y: -98px;
  background-position-x: center;

-  @media${devices.mobile} {
+  @media ${devices.mobile} {
   margin: 30px 0 100px 0 ;
  }
 `
--- a/src/features/Register/components/SubscriptionsStep/index.tsx
+++ b/src/features/Register/components/SubscriptionsStep/index.tsx
@ -54,15 +54,15 @@ export const SubscriptionStep = () => {
        </PricesBlock>
      </SubscriptionsBlock>
      <ButtonsBlock forSubsPage>
-        <ButtonSolid>
-          <T9n t='subscription_done' />
-        </ButtonSolid>
        <TotalInfoBlock>
          <TotalInfoText>Базовая + 2 дополнительно <T9n t='subscription_for' />
            <TotalPriceAmmount>6997</TotalPriceAmmount>
            <TotalPriceDetails>₽ / МЕС</TotalPriceDetails>
          </TotalInfoText>
        </TotalInfoBlock>
+        <ButtonSolid>
+          <T9n t='subscription_done' />
+        </ButtonSolid>
      </ButtonsBlock>
    </Fragment>
  )
--- a/src/features/Register/components/SubscriptionsStep/styled.tsx
+++ b/src/features/Register/components/SubscriptionsStep/styled.tsx
@ -11,11 +11,11 @@ export const SubscriptionList = styled.ul`
  display: flex;
  margin-top: 40px;

-  @media${devices.laptop} {
+  @media ${devices.laptop} {
    margin-top: 27px;
  }

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    margin-top: 30px;
  }
 `
@ -26,7 +26,7 @@ export const SubscriptionsBlock = styled.div<SubscriptionsBlockProps>`
  align-items: center;
  margin-top: ${({ forAdditionalTitle }) => (forAdditionalTitle ? '75px' : '80px')};

-  @media${devices.laptop} {
+  @media ${devices.laptop} {
    margin-top: ${({ forAdditionalTitle, isSubsStep }) => {
    if (forAdditionalTitle) return '42px'
    if (isSubsStep) return '84px'
@ -34,7 +34,7 @@ export const SubscriptionsBlock = styled.div<SubscriptionsBlockProps>`
  }};
  }

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    margin-top: ${({ forAdditionalTitle, isSubsStep }) => {
    if (forAdditionalTitle) return '42px'
    if (isSubsStep) return '50px'
@ -54,7 +54,7 @@ export const BlockTitle = styled.span`
  color: ${({ theme: { colors } }) => colors.text};
  transition: color 0.3s ease-in-out;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    font-size: 24px;
    font-weight: 600px;
  }
@ -64,11 +64,11 @@ export const AdditionalBlockTitle = styled(BlockTitle)`
  font-size: 32px;
  margin-bottom: 40px;

-  @media${devices.laptop} {
+  @media ${devices.laptop} {
    margin-bottom: 30px;
  }

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    font-size: 24px;
    font-weight: 600px;
  }
@ -88,7 +88,7 @@ export const SubscriptionWrapper = styled.div`
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  border-radius: 2px;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    padding: 0;
    align-items: center;
    justify-content: center;
@ -116,7 +116,7 @@ export const Row = styled.div<RowProps>`
  left: ${({ isPriceRow }) => (isPriceRow ? '70px' : '')};
  bottom: ${({ isPriceRow }) => (isPriceRow ? '100px' : '')};

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    position: static;
    margin-top: ${({ isPriceRow }) => (isPriceRow ? '9px' : '')};
  }
@ -128,7 +128,7 @@ export const PricesBlock = styled.div`
  justify-content: space-between;
  position: relative;

-  @media${devices.mobile} {
+  @media ${devices.mobile} {
    max-width: 370px;
    overflow-x: auto;

@ -143,9 +143,8 @@ export const TotalInfoBlock = styled.div`
  top: 4px;
  left: 294px;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    position: static;
-    order: -1;
    margin-bottom: 10px;
    width: 100%;
  }
--- a/src/features/Register/styled.tsx
+++ b/src/features/Register/styled.tsx
@ -60,7 +60,7 @@ export const Card = styled.div`
  }

  
-  @media${devices.laptop} {
+  @media ${devices.laptop} {
    margin-top: 17px;
    margin-bottom: 61px;
    width: 482px;
@ -100,7 +100,7 @@ export const Card = styled.div`
     }
  }

-  @media${devices.mobile} {
+  @media ${devices.mobile} {
    width: 375px;
    height: auto;
    border: 0;
@ -140,7 +140,7 @@ type CustomCenterBlockProps = {

 export const CustomCenterBlock = styled(CenterBlock)<CustomCenterBlockProps>`

-  @media${devices.laptop} {
+  @media ${devices.laptop} {
    margin-top: ${({ isCardStep, isSubsStep }) => {
    if (isCardStep) return '154px'
    if (isSubsStep) return '89px'
@ -170,14 +170,14 @@ export const CustomCenterBlock = styled(CenterBlock)<CustomCenterBlockProps>`
      transform: translateY(-50%);
      width: 328px;

-      @media${devices.tablet} {
+      @media ${devices.tablet} {
        position: static;
        margin-top: 5px;
      }
    }
  }

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    margin-top: ${({ isCardStep, isSubsStep }) => {
    if (isCardStep) return '154px'
    if (isSubsStep) return '69px'
@ -189,7 +189,7 @@ export const CustomCenterBlock = styled(CenterBlock)<CustomCenterBlockProps>`
    }  
  }

-  @media${devices.mobile} {
+  @media ${devices.mobile} {
    ${InputStyled} {
      text-align: center;
    }
--- a/src/features/Search/styled.tsx
+++ b/src/features/Search/styled.tsx
@ -21,22 +21,19 @@ export const Form = styled.form<{isMatch: boolean}>`
    margin: 0;
    padding-bottom: 13px;

-     @media${devices.desktop} {
+    @media ${devices.desktop} {
        padding-left: 12px;
      }

-      @media${devices.tablet} {
+      @media ${devices.tablet} {
        padding-left: 6px;
        height: 12px;
        margin-top: 25px;
        background-color: transparent;
      }
-      @media${devices.mobile} {
-        margin-top: 20px;
-      }
  }
  
-  @media${devices.desktop} {
+  @media ${devices.desktop} {
    width: ${({ isMatch }) => (isMatch ? '244px' : '51px')};

    :focus-within {
@ -46,7 +43,7 @@ export const Form = styled.form<{isMatch: boolean}>`
      }
  }

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    width: 12px;
    :focus-within {
      width: 252px;
@ -65,14 +62,14 @@ export const Form = styled.form<{isMatch: boolean}>`
      display: none; 
    }

-    @media${devices.tablet} {
+    @media ${devices.tablet} {
      font-size: 14px;
    }
  }

  ${Label} {

-    @media${devices.laptop} {
+    @media ${devices.laptop} {
      display: block;
    }
    ::before {
@ -83,11 +80,11 @@ export const Form = styled.form<{isMatch: boolean}>`
      background-image: url(/images/search.svg);
      background-repeat: no-repeat;

-      @media${devices.desktop} {
+      @media ${devices.desktop} {
        margin-right: 0;
      }
-      @media${devices.tablet} {
-        margin-right: 0;
+      @media ${devices.tablet} {
+        margin-bottom: 2px;
        background-image: url(/images/search-mob.svg);
      }
    }
@ -97,7 +94,7 @@ export const Form = styled.form<{isMatch: boolean}>`
    ${InputWrapper} {
      padding-left: 0;

-      @media${devices.tablet} {
+      @media ${devices.tablet} {
        background-color: #3F3F3F;
      }
    }
@ -109,7 +106,7 @@ export const Form = styled.form<{isMatch: boolean}>`
    }
  }

-  @media${devices.mobile} {
+  @media ${devices.mobile} {
    ${Column} {
      width: auto;
      max-width: 335px;
@ -126,13 +123,13 @@ export const Results = styled.div`
  overflow-y: auto;
  z-index: 1;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    position: fixed;
    top: 40px;
    left: 40%;
    width: 50vw;
  }
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
    left: 0;
    width: 100vw;
  }
--- a/src/features/ToggleScore/styled.tsx
+++ b/src/features/ToggleScore/styled.tsx
@ -11,7 +11,7 @@ export const Switch = styled.div`
  align-items: center;
  cursor: pointer;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    position: static;
  }
 `
@ -24,7 +24,7 @@ export const Title = styled(T9n)`
  color: #999999;
  margin-right: 5px;

-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    order: 2;
    margin-right: 0;
    margin-left: 5px;