From 10d7a2d6ec19db05a3fbba40afc7633705c3d2b6 Mon Sep 17 00:00:00 2001
From: memeriau <manuel.emeriau@mappy.com>
Date: Mon, 2 May 2022 21:51:18 +0200
Subject: [PATCH] improve mobile ui

---
 src/components/Navigation/styles.module.scss | 30 +++++++++++---------
 src/theme/mixins.scss                        |  8 +++---
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/components/Navigation/styles.module.scss b/src/components/Navigation/styles.module.scss
index 392fb22..2d5a075 100644
--- a/src/components/Navigation/styles.module.scss
+++ b/src/components/Navigation/styles.module.scss
@@ -65,15 +65,7 @@
 
 .mainMenuItem {
     display: inline-block;
-    margin: 0;
-    padding: 7px 6px 6px;
-    border: 1px solid $color-black;
-    border-width: 1px 1px 0;
-    border-radius: 10px 10px 0 0;
-    text-align: center;
-    background-color: $color-grey-light;
-    cursor: pointer;
-    color: $color-grey-dark;
+    margin: 0 6px;
 
     @include mobile {
         display: block;
@@ -89,6 +81,22 @@
         background-color: $color-black;
     }
 
+    @include desktop {
+        margin: 0;
+        padding: 7px 6px 6px;
+        border-radius: 10px 10px 0 0;
+        text-align: center;
+        cursor: pointer;
+        color: $color-grey-dark;
+        border: solid $color-black;
+        border-width: 1px 1px 0;
+        background-color: $color-grey-light;
+
+        &:not(.active) a:hover {
+            color: $color-white;
+        }
+    }
+
     a {
         font-size: 0.9em;
         font-weight: bold;
@@ -100,8 +108,4 @@
             padding: 10px 15px;
         }
     }
-
-    &:not(.active) a:hover {
-        color: $color-white;
-    }
 }
diff --git a/src/theme/mixins.scss b/src/theme/mixins.scss
index 42f2cb1..d76d74c 100644
--- a/src/theme/mixins.scss
+++ b/src/theme/mixins.scss
@@ -1,13 +1,13 @@
 @import "./variables";
 
 @mixin desktop {
-    @media (min-width: 800px) {
+    @media (min-width: 900px) {
         @content;
     }
 }
 
 @mixin mobile {
-    @media (max-width: 799px) {
+    @media (max-width: 899px) {
         @content;
     }
 }
@@ -23,8 +23,8 @@
 }
 
 @mixin page-content-wrapper($desktopWidth: 720px) {
-    margin: 10px 0;
-    padding: 10px;
+    margin: 10px 4px;
+    padding: 6px;
     background-color: $color-white;
     border-radius: 15px;
     border: $border-large;