Ott 307 team profile adaptive (#154)

src/features/Header/index.tsx

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

src/features/Header/styled.tsx

@@ -57,7 +57,7 @@ export const SportFilterWrapper = styled(FilterWrapper)`
   width: 400px;
 
   @media ${devices.desktop} {
-    width: 350px;
+    width: 280px;
   }
 
   @media ${devices.laptop} {
@@ -73,7 +73,7 @@ export const SportFilterWrapper = styled(FilterWrapper)`
 
 export const MenuWrapper = styled.div`
   display: flex;
-  margin-right: 57px;
+  margin-right: 14px;
 
   @media ${devices.laptop} {
     margin-right: 14px;

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

@@ -19,12 +19,17 @@ export const ListWrapper = styled.div`
   }
 
   @media ${devices.tablet} {
-    width: 200%;
-    left: -100%;
+    width: 100%;
+    left: 0;
     top: calc(-92vh + 36px);
     height: calc(92vh - 36px);
   }
 
+  @media ${devices.mobile} {
+    width: 200%;
+    left: -100%;
+  }
+
   ${customScrollbar}
 `
 

src/features/HeaderMobile/styled.tsx

@@ -1,5 +1,7 @@
 import styled from 'styled-components/macro'
 
+import { Wrapper } from 'features/Menu/styled'
+
 export const HeaderMobileWrapper = styled.div`
   width: 100%;
   top: 0;
@@ -42,6 +44,10 @@ export const HeaderIconsWrapper = styled.div`
   align-items: center;
   justify-content: space-around;
   min-width: 100px;
+
+  ${Wrapper} {
+    margin-right: 0;
+  }
 `
 
 export const IconSearchWrapper = styled.div`

src/features/MatchCard/styled.tsx

@@ -9,7 +9,7 @@ export const CardWrapper = styled.li.attrs({
 })`
   position: relative;
   flex: 0 0 auto;
-  width: ${MATCH_CARD_WIDTH}px;
+  min-width: ${MATCH_CARD_WIDTH}px;
   height: 100%;
   padding-bottom: 18px;
   border-radius: 2px;
@@ -21,7 +21,6 @@ export const CardWrapper = styled.li.attrs({
   margin-right: 16px;
 
   @media ${devices.laptop} {
-    width: 279px;
     height: 279px;
   }
 
@@ -128,7 +127,10 @@ export const TeamName = styled.span`
   overflow: hidden;
 `
 
-export const Score = styled.span``
+export const Score = styled.div`
+  text-align: center;
+  width: 10%;
+`
 
 export const Rows = styled.div`
   width: fit-content;

src/features/Matches/styled.tsx

@@ -7,6 +7,11 @@ export const Section = styled.section`
 
   @media ${devices.tablet} {
     width: 100%;
+    padding: 0 16px;
+  }
+
+  @media ${devices.mobile} {
+    padding: 0;
   }
 `
 

src/features/MatchesGrid/styled.tsx

@@ -8,13 +8,10 @@ export const Wrapper = styled.ul`
   grid-gap: 13px;
  
   @media ${devices.large} {
-    grid-template-columns: repeat(auto-fit, minmax(270px, 280px ));
+    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr ));
   }
 
   @media ${devices.tablet} {
     justify-content: center;
   }
-  @media ${devices.mobile} {
-    grid-template-columns: repeat(auto-fit, minmax(279px, 1fr ));
-  }
 `

src/features/MatchesSlider/styled.tsx

@@ -2,6 +2,8 @@ import styled from 'styled-components/macro'
 
 import { devices } from 'config/devices'
 
+import { CardWrapper } from '../MatchCard/styled'
+
 export const Wrapper = styled.div`
   position: relative;
   margin-bottom: 16px;
@@ -16,8 +18,16 @@ export const Slides = styled.ul`
     display: none;
   }
 
+  ${CardWrapper} {
+    width: 288px;
+  }
+
   @media ${devices.mobile} {
     flex-direction: column;
+
+    ${CardWrapper} {
+     width: 100%;
+  }
   }
 `
 

src/features/PlayerPage/index.tsx

@@ -1,8 +1,9 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 
 import { ProfileTypes } from 'config'
 import { ProfileCard } from 'features/ProfileCard'
 import { Matches } from 'features/Matches'
+import { Content } from './styled'
 
 import { usePlayerPage } from './hooks'
 
@@ -14,13 +15,13 @@ export const PlayerPage = () => {
   } = usePlayerPage()
 
   return (
-    <Fragment>
+    <Content>
       <ProfileCard
         profileType={ProfileTypes.PLAYERS}
         name={name}
         infoItems={infoItems}
       />
       <Matches requestArgs={requestArgs} />
-    </Fragment>
+    </Content>
   )
 }

src/features/PlayerPage/styled.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components/macro'
+
+import { devices } from 'config/devices'
+
+export const Content = styled.main`
+  padding: 0 16px;
+
+  @media ${devices.tablet} {
+    padding: 0;
+  }
+`

src/features/ProfileCard/styled.tsx

@@ -57,7 +57,7 @@ export const AddToFavButton = styled.button`
   height: 32px;
   padding: 0 16px;
   border-radius: 2px;
-  font-size: 14px;
+  font-size: 16px;
   color: #fff;
   background:
     linear-gradient(
@@ -79,6 +79,7 @@ export const AddToFavButton = styled.button`
 
   @media ${devices.tablet} {
     line-height: 13px;
+    font-size: 13px;
 
     svg {
       display: none;
@@ -117,5 +118,6 @@ export const InfoItem = styled.div`
   @media ${devices.tablet} {
     font-size: 11px;
     line-height: 10px;
+    font-weight: 500px;
   }
 `

src/features/TeamPage/styled.tsx

@@ -1,5 +1,37 @@
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
+import {
+  Wrapper,
+  InfoItems,
+  Logo,
+} from '../ProfileCard/styled'
+
 export const Content = styled.main`
   padding: 0 16px;
+
+  ${Logo} {
+    background-color: transparent;
+  }
+
+  @media ${devices.laptop}{
+    ${Wrapper} {
+      margin-top: 29px;
+    }
+
+    ${InfoItems} {
+      justify-content: center;
+    }
+  }
+
+  @media ${devices.tablet} {
+    padding: 0;
+    ${Wrapper} {
+      margin-top: 15px;
+    }
+
+  }
+
+
 `

src/features/ToggleScore/styled.tsx

@@ -10,7 +10,7 @@ export const Switch = styled.div`
   display: flex;
   align-items: center;
   cursor: pointer;
-
+  
   @media ${devices.tablet} {
     position: static;
   }