fix: media query day composer fixed

devhatt · Sep 11, 2024 · 3bf7c70 · 3bf7c70
1 parent a7a3098
commit 3bf7c70
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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);