From 904be6332a99c5a935a432cea27800f13fc7074e Mon Sep 17 00:00:00 2001
From: Sergiu <46888793+Serj10GR@users.noreply.github.com>
Date: Wed, 30 Sep 2020 11:53:52 +0300
Subject: [PATCH] Ott 306 tournament page adaptive (#160)

* style(#306): adaptive tournament page

* style(#306): usefvar logo adapted

* style(#306): logo margin

* style(#306): minor chanhe to match grid
---
 src/features/MatchCard/styled.tsx      | 1 +
 src/features/MatchesGrid/styled.tsx    | 2 +-
 src/features/MatchesSlider/styled.tsx  | 5 +++++
 src/features/Menu/styled.tsx           | 2 +-
 src/features/ProfileCard/styled.tsx    | 6 +++---
 src/features/TournamentPage/styled.tsx | 6 ++++++
 src/features/UserFavorites/index.tsx   | 2 +-
 src/features/UserFavorites/styled.tsx  | 7 +++++++
 8 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/features/MatchCard/styled.tsx b/src/features/MatchCard/styled.tsx
index e7fd8db9..3bc34a93 100644
--- a/src/features/MatchCard/styled.tsx
+++ b/src/features/MatchCard/styled.tsx
@@ -22,6 +22,7 @@ export const CardWrapper = styled.li.attrs({
 
   @media ${devices.laptop} {
     height: 279px;
+    min-width: 279px;
   }
 
   @media ${devices.tablet} {
diff --git a/src/features/MatchesGrid/styled.tsx b/src/features/MatchesGrid/styled.tsx
index 9d47de50..6e703cd9 100644
--- a/src/features/MatchesGrid/styled.tsx
+++ b/src/features/MatchesGrid/styled.tsx
@@ -8,7 +8,7 @@ export const Wrapper = styled.ul`
   grid-gap: 13px;
  
   @media ${devices.large} {
-    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr ));
+    grid-template-columns: repeat(auto-fit, minmax(279px, 1fr ));
   }
 
   @media ${devices.tablet} {
diff --git a/src/features/MatchesSlider/styled.tsx b/src/features/MatchesSlider/styled.tsx
index fc88c45a..5b72627e 100644
--- a/src/features/MatchesSlider/styled.tsx
+++ b/src/features/MatchesSlider/styled.tsx
@@ -20,6 +20,11 @@ export const Slides = styled.ul`
 
   ${CardWrapper} {
     width: 288px;
+
+    @media ${devices.laptop} {
+      min-width: auto;
+      width: 279px;
+    }
   }
 
   @media ${devices.mobile} {
diff --git a/src/features/Menu/styled.tsx b/src/features/Menu/styled.tsx
index 17fc6cc7..95c83d15 100644
--- a/src/features/Menu/styled.tsx
+++ b/src/features/Menu/styled.tsx
@@ -17,7 +17,7 @@ export const Wrapper = styled.nav`
   margin-right: 14px;
 
   @media ${devices.desktop} {
-    margin-left: 23px;
+    margin-left: 16px;
     margin-right: 10px;
   }
 `
diff --git a/src/features/ProfileCard/styled.tsx b/src/features/ProfileCard/styled.tsx
index ae6f2db2..fb80b890 100644
--- a/src/features/ProfileCard/styled.tsx
+++ b/src/features/ProfileCard/styled.tsx
@@ -15,8 +15,7 @@ export const Wrapper = styled.div`
   }
 
   @media ${devices.laptop} {
-    margin-top: 14px;
-    margin-left: 20px;
+    margin-left: 0;
     margin-bottom: 20px;
   }
 `
@@ -100,7 +99,8 @@ export const InfoItems = styled.div`
   
   @media ${devices.laptop} {
     flex-direction: column;
-    align-items: flex-start;
+    align-items: flex-start; 
+    justify-content: center;
   }
 
   @media ${devices.tablet} {
diff --git a/src/features/TournamentPage/styled.tsx b/src/features/TournamentPage/styled.tsx
index fcd79930..c3055aa7 100644
--- a/src/features/TournamentPage/styled.tsx
+++ b/src/features/TournamentPage/styled.tsx
@@ -1,5 +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;
+  }
 `
diff --git a/src/features/UserFavorites/index.tsx b/src/features/UserFavorites/index.tsx
index f9cfad91..bca0cc94 100644
--- a/src/features/UserFavorites/index.tsx
+++ b/src/features/UserFavorites/index.tsx
@@ -41,7 +41,7 @@ export const UserFavorites = () => {
 
   return (
     <UserSportFavWrapper>
-      <UserSportFavLogoWrapper height={12} width={52} />
+      <UserSportFavLogoWrapper width={52} />
       <UserSportFavStar />
       <ScrollWrapper>
         {
diff --git a/src/features/UserFavorites/styled.tsx b/src/features/UserFavorites/styled.tsx
index 324ddfa2..c7706a7e 100644
--- a/src/features/UserFavorites/styled.tsx
+++ b/src/features/UserFavorites/styled.tsx
@@ -1,5 +1,7 @@
 import { Link } from 'react-router-dom'
 
+import { devices } from 'config/devices'
+
 import styled from 'styled-components/macro'
 
 import { Logo } from 'features/Logo'
@@ -34,6 +36,11 @@ export const ScrollWrapper = styled.div`
 export const UserSportFavLogoWrapper = styled(Logo)`
   margin-top: 35px;
   margin-bottom: 120px;
+
+  @media ${devices.laptop} {
+    margin-top: 30px;
+    margin-bottom: 68px;
+  }
 `
 
 export const UserSportFavXWrapper = styled.span`