Ott 308 adaptive player page (#148)

src/features/Header/index.tsx

@@ -56,6 +56,12 @@ export const Header = () => (
         <SearchWrapper>
           <Search />
         </SearchWrapper>
+        <FilterWrapper>
+          <DateFilter />
+        </FilterWrapper>
+        <FilterWrapper>
+          <MatchStatusFilter />
+        </FilterWrapper>
       </Fragment>
     </Switch>
   </Wrapper>

src/features/MatchCard/styled.tsx

@@ -171,6 +171,9 @@ export const CardHoverWrapper = styled(CardWrapper)`
   @media ${devices.laptop} {
     height: 279px;
   }
+  @media ${devices.tablet} {
+    height: 299px;
+  }
 `
 
 export const CardHoverInner = styled.div`

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

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>
   )

src/features/Register/components/SubscriptionsStep/styled.tsx

@@ -145,7 +145,6 @@ export const TotalInfoBlock = styled.div`
 
   @media ${devices.tablet} {
     position: static;
-    order: -1;
     margin-bottom: 10px;
     width: 100%;
   }

src/features/Search/styled.tsx

@@ -31,9 +31,6 @@ export const Form = styled.form<{isMatch: boolean}>`
         margin-top: 25px;
         background-color: transparent;
       }
-      @media${devices.mobile} {
-        margin-top: 20px;
-      }
   }
   
   @media ${devices.desktop} {
@@ -87,7 +84,7 @@ export const Form = styled.form<{isMatch: boolean}>`
         margin-right: 0;
       }
       @media ${devices.tablet} {
-        margin-right: 0;
+        margin-bottom: 2px;
         background-image: url(/images/search-mob.svg);
       }
     }