From 3bf7c7055f35704f51ba597ea17529cb97dd97ce Mon Sep 17 00:00:00 2001
From: DominMFD <mfdmatheus@hotmail.com>
Date: Tue, 10 Sep 2024 22:23:43 -0300
Subject: [PATCH] fix: media query day composer fixed

---
 .../DayComposer/components/DayButton/index.scss       |  6 +++---
 .../Calendar/components/DayComposer/index.scss        | 11 ++++++++++-
 .../WeekDayComposer/components/WeekDay/index.scss     |  2 +-
 src/layouts/components/SideMenu/index.scss            |  2 +-
 src/styles/colors.scss                                |  1 -
 5 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/Calendar/components/DayComposer/components/DayButton/index.scss b/src/components/Calendar/components/DayComposer/components/DayButton/index.scss
index 26e153e3..5f290191 100644
--- a/src/components/Calendar/components/DayComposer/components/DayButton/index.scss
+++ b/src/components/Calendar/components/DayComposer/components/DayButton/index.scss
@@ -4,8 +4,8 @@
 @use '~styles/breakpoints.scss' as breakpoints;
 
 .day {
-  width: 4rem;
-  height: 4rem;
+  width: 3.2rem;
+  height: 3.2rem;
 
   justify-self: center;
 
@@ -16,7 +16,7 @@
     font-family: fonts.$primaryFont;
     color: colors.$gray500;
     text-align: center;
-    font-size: fonts.$sm;
+    font-size: fonts.$xxs;
     font-weight: fonts.$medium;
 
     border: 0.1rem solid colors.$gray150;
diff --git a/src/components/Calendar/components/DayComposer/index.scss b/src/components/Calendar/components/DayComposer/index.scss
index dcb6072c..f6bab690 100644
--- a/src/components/Calendar/components/DayComposer/index.scss
+++ b/src/components/Calendar/components/DayComposer/index.scss
@@ -1,7 +1,16 @@
+@use '~styles/base.scss';
+@use '~styles/colors.scss' as colors;
+@use '~styles/fonts.scss' as fonts;
+@use '~styles/breakpoints.scss' as breakpoints;
+
 .day-composer {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  gap: 0.8rem;
+  gap: 0.2rem;
 
   list-style: none;
+
+  @include breakpoints.from360 {
+    gap: 0.8rem;
+  }
 }
diff --git a/src/components/Calendar/components/WeekDayComposer/components/WeekDay/index.scss b/src/components/Calendar/components/WeekDayComposer/components/WeekDay/index.scss
index 0cf72fef..85a5b178 100644
--- a/src/components/Calendar/components/WeekDayComposer/components/WeekDay/index.scss
+++ b/src/components/Calendar/components/WeekDayComposer/components/WeekDay/index.scss
@@ -7,7 +7,7 @@
   font-family: fonts.$fourthFont;
   color: rgb(160, 174, 192);
   text-align: center;
-  font-size: 1.2rem;
+  font-size: 1rem;
   font-weight: fonts.$regular;
 
   &--active {
diff --git a/src/layouts/components/SideMenu/index.scss b/src/layouts/components/SideMenu/index.scss
index 0953bb8f..959ae2de 100644
--- a/src/layouts/components/SideMenu/index.scss
+++ b/src/layouts/components/SideMenu/index.scss
@@ -134,7 +134,7 @@
   }
 
   .side-menu-content {
-    width: 70%;
+    width: 80%;
 
     &__menuitens {
       transition: 0.3s;
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index af10b9a0..b522f0ea 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -25,7 +25,6 @@ $error100: rgb(179, 38, 30);
 
 $white: rgb(255, 255, 255);
 
-// neutrals (Gray)
 // neutrals (Grey)
 $gray100: rgb(247, 250, 252);
 $gray150: rgb(236, 239, 242);