From 09ecd956f1dd45166648dfbff5def5d881395592 Mon Sep 17 00:00:00 2001
From: Sergiu <46888793+Serj10GR@users.noreply.github.com>
Date: Tue, 25 Aug 2020 10:41:05 +0300
Subject: [PATCH] Ott 304 responsive main screen fn (#100)

---
 src/config/devices.tsx                              |  2 ++
 src/features/Header/styled.tsx                      |  6 +++++-
 .../components/TournamentFilter/styled.tsx          |  6 ++++++
 src/features/MatchCard/styled.tsx                   |  8 ++++----
 src/features/MatchesGrid/styled.tsx                 | 10 +++-------
 src/features/Menu/styled.tsx                        | 13 ++++++++++++-
 src/features/Search/styled.tsx                      |  6 +++---
 7 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/src/config/devices.tsx b/src/config/devices.tsx
index f854e85b..04ebc94c 100644
--- a/src/config/devices.tsx
+++ b/src/config/devices.tsx
@@ -1,5 +1,7 @@
 export const devices = {
+  desktop: '(max-width: 1784px)',
   laptop: '(max-width: 1280px)',
+  large: '(max-width: 1900px)',
   mobile: '(max-width: 640px)',
   tablet: '(max-width: 1024px)',
 }
diff --git a/src/features/Header/styled.tsx b/src/features/Header/styled.tsx
index dfb0665b..85b6f71f 100644
--- a/src/features/Header/styled.tsx
+++ b/src/features/Header/styled.tsx
@@ -38,7 +38,7 @@ export const SearchWrapper = styled(FilterWrapper)`
   margin-right: 16px;
   display: flex;
 
-  @media${devices.laptop} {
+  @media${devices.desktop} {
     width: 51px;
     margin-right: 9px;
 
@@ -51,6 +51,10 @@ export const SearchWrapper = styled(FilterWrapper)`
 export const SportFilterWrapper = styled(FilterWrapper)`
   width: 400px;
 
+  @media${devices.desktop} {
+    width: 350px;
+  }
+
   @media${devices.laptop} {
     width: 234px;
   }
diff --git a/src/features/HeaderFilters/components/TournamentFilter/styled.tsx b/src/features/HeaderFilters/components/TournamentFilter/styled.tsx
index fc189ff5..a7796954 100644
--- a/src/features/HeaderFilters/components/TournamentFilter/styled.tsx
+++ b/src/features/HeaderFilters/components/TournamentFilter/styled.tsx
@@ -12,6 +12,12 @@ export const ListWrapper = styled.div`
   overflow-y: scroll;
   z-index: 2;
 
+  @media${devices.laptop} {
+    right: 0;
+    bottom: -1px;
+    left: auto;
+  }
+
   @media${devices.tablet} {
     width: 200%;
     left: -100%;
diff --git a/src/features/MatchCard/styled.tsx b/src/features/MatchCard/styled.tsx
index 261b59fc..d44cb4b2 100644
--- a/src/features/MatchCard/styled.tsx
+++ b/src/features/MatchCard/styled.tsx
@@ -2,15 +2,14 @@ import styled from 'styled-components/macro'
 
 import { devices } from 'config/devices'
 import { T9n } from 'features/T9n'
-import { MATCH_CARD_WIDTH, MATCH_CARD_GAP } from './config'
+import { MATCH_CARD_WIDTH } from './config'
 
 export const CardWrapper = styled.li.attrs({
   tabIndex: 0,
 })`
   position: relative;
   flex: 0 0 auto;
-  width: ${MATCH_CARD_WIDTH}px;
-  margin-right: ${MATCH_CARD_GAP}px;
+  min-width: ${MATCH_CARD_WIDTH}px;
   padding-bottom: 18px;
   border-radius: 2px;
   border: 2px solid transparent;
@@ -19,8 +18,9 @@ export const CardWrapper = styled.li.attrs({
   cursor: pointer;
   transition: border 0.5s ease-out;
 
+
   @media${devices.laptop} {
-    width: 279px;
+    min-width: 279px;
     height: 279px;
     margin: 0;
   }
diff --git a/src/features/MatchesGrid/styled.tsx b/src/features/MatchesGrid/styled.tsx
index b69f0d17..78464351 100644
--- a/src/features/MatchesGrid/styled.tsx
+++ b/src/features/MatchesGrid/styled.tsx
@@ -4,14 +4,10 @@ import { devices } from 'config/devices'
 
 export const Wrapper = styled.ul`
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(279px, 288px));
+  grid-template-columns: repeat(6, 288px);
   grid-gap: 13px;
-
-  @media${devices.laptop} {
-    grid-template-columns: repeat(4, 279px);
-  }
-
-  @media${devices.tablet} {
+ 
+  @media${devices.large} {
     grid-template-columns: repeat(auto-fit, minmax(279px, 1fr));
   }
 `
diff --git a/src/features/Menu/styled.tsx b/src/features/Menu/styled.tsx
index 6cf2c04e..6fb96cd8 100644
--- 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.laptop} {
+  @media${devices.desktop} {
     margin-left: 23px;
     margin-right: 0;
   }
@@ -44,6 +44,13 @@ export const MenuList = styled.ul`
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
   z-index: 1;
 
+  @media${devices.laptop} {
+    top: 55px;
+    left: 0;
+    width: 288px;
+  }
+
+
   @media${devices.tablet} {
     right: 0;
     left: auto;
@@ -60,6 +67,10 @@ export const MenuList = styled.ul`
     transform: translate(-50%, -50%) rotate(45deg);
     background-color: #666;
 
+    @media${devices.laptop} {
+      left: 4%;
+    }
+
     @media${devices.tablet} {
       left: 97%;
     }
diff --git a/src/features/Search/styled.tsx b/src/features/Search/styled.tsx
index 1e376dca..da9f1923 100644
--- a/src/features/Search/styled.tsx
+++ b/src/features/Search/styled.tsx
@@ -21,7 +21,7 @@ export const Form = styled.form`
     margin: 0;
     padding-bottom: 13px;
 
-     @media${devices.laptop} {
+     @media${devices.desktop} {
         padding-left: 12px;
       }
 
@@ -33,7 +33,7 @@ export const Form = styled.form`
       }
   }
   
-  @media${devices.laptop} {
+  @media${devices.desktop} {
     width: 51px;
 
     :focus-within {
@@ -76,7 +76,7 @@ export const Form = styled.form`
       background-image: url(/images/search.svg);
       background-repeat: no-repeat;
 
-      @media${devices.laptop} {
+      @media${devices.desktop} {
         margin-right: 0;
       }
       @media${devices.tablet} {