Merge pull request #58 from J-Pster/pster-responsividade

[Responsividade] Ajustando a responsividade do site para telas com <500 px

src/components/Footer/Footer.scss

@@ -28,6 +28,15 @@
       }
     }
   }
+
+  @media screen and (max-width: 500px) {
+    flex-direction: column;
+
+    p {
+      margin-bottom: 1.5rem;
+      text-align: center;
+    }
+  }
 }
 
 .app__footer-links {
@@ -72,4 +81,17 @@
       }
     }
   }
+
+  @media screen and (max-width: 500px) {
+    flex-direction: column;
+
+    .privacy-and-terms {
+      margin-right: 0;
+      margin-bottom: 1rem;
+    }
+
+    a {
+      margin-bottom: 0.5rem;
+    }
+  }
 }

src/components/Header/Header.scss

@@ -63,18 +63,10 @@
         color: $white-black;
         margin-right: 1rem;
       }
-    }
-  }
 
-  @media screen and (min-width: 2000px) {
-    padding-top: 8rem;
-  }
-
-  @media screen and (max-width: 1200px) {
-    flex-direction: row;
-  }
-
-  @media screen and (max-width: 450px) {
-    padding: 6rem 1rem 2rem;
+      @media screen and (max-width: 500px) {
+        display: none;
+      }
+    }
   }
 }

src/components/SelectTime/SelectTime.jsx

@@ -29,7 +29,6 @@ export default function SelectTime() {
     <FormControl
       variant="filled"
       className="select-time"
-      sx={ { minWidth: 250 } }
       color="primary"
     >
       <InputLabel>Notificar antecipadamente</InputLabel>

src/pages/Login/Login.scss

@@ -30,6 +30,10 @@
       font-weight: 700;
     }
   }
+
+  @media screen and (max-width: 500px) {
+    width: 80%;
+  }
 }
 
 .login__logo {
@@ -46,4 +50,14 @@
     margin-left: 1rem;
     color: $white-color;
   }
+
+  @media screen and (max-width: 500px) {
+    img {
+      width: 50px;
+    }
+
+    h1 {
+      font-size: 1.5rem;
+    }
+  }
 }

src/pages/Scheduler/Scheduler.scss

@@ -9,6 +9,13 @@
   padding: 0 2rem;
 
   width: 100%;
+
+  @media screen and (max-width: 500px) {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 0 0;
+  }
 }
 
 .home-page {
@@ -134,4 +141,14 @@
 
     gap: 2rem;
   }
+
+  @media screen and (max-width: 500px) {
+    flex-direction: column;
+    max-width: fit-content;
+    justify-content: center;
+    align-items: center;
+
+    padding: 1rem 1rem;
+    margin: 0;
+  }
 }