From ab5cc06ed8ddf63a0b83968f6f6dcbe08e4e6cf1 Mon Sep 17 00:00:00 2001
From: Patrick <patrickconservatorio@gmail.com>
Date: Mon, 16 Jan 2023 22:19:43 -0300
Subject: [PATCH] feat: adiciona todas responsividades

---
 .../floating-buttons.module.scss              |  22 ++++
 .../header-route/header-route.module.scss     |   4 +
 .../main/form/custom-form.module.scss         | 107 +++++++++++++++++-
 src/components/main/form/custom-form.tsx      |  12 +-
 src/components/main/main-content.module.scss  |  30 ++++-
 src/components/main/main-content.tsx          |   2 -
 src/components/main/text/text.module.scss     |  26 ++++-
 7 files changed, 193 insertions(+), 10 deletions(-)

diff --git a/src/components/floating-buttons/floating-buttons.module.scss b/src/components/floating-buttons/floating-buttons.module.scss
index 8861bb3..e85c2f7 100644
--- a/src/components/floating-buttons/floating-buttons.module.scss
+++ b/src/components/floating-buttons/floating-buttons.module.scss
@@ -6,12 +6,28 @@
   right: 16px;
   gap: 5px;
 
+  @media (max-width: 375px) {
+    bottom: 29px;
+  }
+
+  @media (max-width: 1024px) {
+    bottom: 51px;
+  }
+
+  @media (min-width: 2500px) {
+    bottom: 229px;
+  }
+
   .wppLink {
     cursor: pointer;
     height: 34px;
     & img {
       height: 100%;
     }
+
+    @media (min-width: 2500px) {
+      height: 66px;
+    }
   }
   .topButton {
     background: none;
@@ -19,5 +35,11 @@
     padding: 0;
     outline: 0;
     cursor: pointer;
+
+    & img {
+      @media (min-width: 2500px) {
+        height: 66px;
+      }
+    }
   }
 }
diff --git a/src/components/header/header-route/header-route.module.scss b/src/components/header/header-route/header-route.module.scss
index 63c0e10..7d44927 100644
--- a/src/components/header/header-route/header-route.module.scss
+++ b/src/components/header/header-route/header-route.module.scss
@@ -7,6 +7,10 @@
     margin: 30px 100px;
     gap: 10px;
 
+    @media (max-width: 1024px) and (min-width: 280px) {
+      margin: 30px 16px;
+    }
+
     .home {
       height: 16px;
 
diff --git a/src/components/main/form/custom-form.module.scss b/src/components/main/form/custom-form.module.scss
index 9586fd3..b663e5b 100644
--- a/src/components/main/form/custom-form.module.scss
+++ b/src/components/main/form/custom-form.module.scss
@@ -4,7 +4,11 @@
   .CustomFormContainer {
     margin-left: 30px;
 
-    & h1 {
+    @media (max-width: 1024px) and (min-width: 280px) {
+      margin: 0;
+    }
+
+    & h2 {
       font-family: "Roboto";
       font-style: normal;
       font-weight: 700;
@@ -12,12 +16,21 @@
       line-height: 28px;
       color: #000000;
       margin: 0;
+
+      @media (max-width: 1024px) and (min-width: 280px) {
+        text-align: center;
+        margin-top: 12px;
+      }
+
+      @media (min-width: 2500px) {
+        font-size: 48px;
+        line-height: 56px;
+      }
     }
 
     .FormCol {
       display: flex;
       flex-direction: column;
-      margin-bottom: 12px;
 
       & span {
         font-family: "Roboto";
@@ -26,6 +39,13 @@
         font-size: 12px;
         line-height: 14px;
         color: #ff0000;
+        margin: 0;
+
+        @media (min-width: 2500px) {
+          font-size: 24px;
+          line-height: 28px;
+          margin: 0;
+        }
       }
 
       .FormLabelInsta {
@@ -35,23 +55,43 @@
         font-weight: 400;
         font-size: 14px;
         color: #100d0e;
+
+        @media (min-width: 2500px) {
+          font-size: 28px;
+          line-height: 33px;
+        }
       }
 
       .FormField {
+        font-weight: 400;
+        font-family: "Roboto";
+        font-style: normal;
         height: 46px;
         border: 1px solid #100d0e;
         border-radius: 25px;
         padding: 15px 20px 15px;
         box-sizing: border-box;
+
+        @media (min-width: 2500px) {
+          height: 63px;
+          font-size: 28px;
+          line-height: 33px;
+        }
       }
 
       .FormLabel {
+        line-height: 16px;
         margin: 12px 0 12px 0;
         font-family: "Roboto";
         font-style: normal;
         font-weight: 400;
         font-size: 14px;
         color: #100d0e;
+
+        @media (min-width: 2500px) {
+          font-size: 28px;
+          line-height: 33px;
+        }
       }
     }
   }
@@ -66,6 +106,13 @@
     font-weight: 400;
     font-size: 16px;
     color: white;
+    line-height: 19px;
+
+    @media (min-width: 2500px) {
+      height: 71px;
+      font-size: 32px;
+      line-height: 38px;
+    }
   }
 
   .FormSubmitButton :hover {
@@ -79,3 +126,59 @@
   align-items: flex-end;
   margin: 0 18px 0;
 }
+
+.formInvalidFeedback {
+  display: flex;
+  justify-content: center;
+  margin: 12px 0 12px 0;
+  align-items: center;
+
+  & label {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+    color: #100d0e;
+    text-decoration: underline;
+
+    @media (min-width: 2500px) {
+      font-size: 28px;
+      line-height: 33px;
+    }
+  }
+
+  & span {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+    color: #ff0000;
+
+    @media (min-width: 2500px) {
+      font-size: 28px;
+      line-height: 33px;
+    }
+  }
+
+  & input {
+    width: 18px;
+    height: 18px;
+
+    @media (min-width: 2500px) {
+      width: 36px;
+      height: 35px;
+    }
+  }
+}
+
+.successSubmit {
+  margin-top: 12px;
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  color: #008000;
+}
diff --git a/src/components/main/form/custom-form.tsx b/src/components/main/form/custom-form.tsx
index 4fa4cea..7709296 100644
--- a/src/components/main/form/custom-form.tsx
+++ b/src/components/main/form/custom-form.tsx
@@ -32,7 +32,7 @@ export function CustomForm() {
   return (
     <div className={style.CustomForm}>
       <div className={style.CustomFormContainer}>
-        <h1>Preencha o formulário</h1>
+        <h2>Preencha o formulário</h2>
         <Formik
           validationSchema={Formschema}
           onSubmit={(values, { resetForm }) => {
@@ -145,11 +145,11 @@ export function CustomForm() {
                 name="Instagram"
               />
             </div>
-            <div>
+            <div className={style.formInvalidFeedback}>
               <ErrorMessage
                 component="span"
                 name="Accept"
-                className={style.formInvalidFeedback}
+                className={style.formInvalidSpan}
               />
               <label>Declaro que li e aceito</label>
               <Field id="Accept" name="Accept" type="checkbox" />
@@ -157,7 +157,11 @@ export function CustomForm() {
             <button className={style.FormSubmitButton} type="submit">
               CADASTRE-SE
             </button>
-            {success && <span>* Formulário enviado com sucesso.</span>}
+            {success && (
+              <span className={style.successSubmit}>
+                * Formulário enviado com sucesso.
+              </span>
+            )}
           </Form>
         </Formik>
       </div>
diff --git a/src/components/main/main-content.module.scss b/src/components/main/main-content.module.scss
index 16a89c7..c21c85d 100644
--- a/src/components/main/main-content.module.scss
+++ b/src/components/main/main-content.module.scss
@@ -10,6 +10,12 @@
     font-size: 24px;
     line-height: 28px;
     margin: 0;
+
+    @media (min-width: 2500px) {
+      font-size: 48px;
+      line-height: 56px;
+      letter-spacing: 0.1em;
+    }
   }
 
   .institutionalContainer {
@@ -18,7 +24,12 @@
 
     .institutionalMainContainer {
       display: flex;
-      margin: 80px 100px;
+      margin: 90px 100px;
+
+      @media (max-width: 1024px) and (min-width: 280px) {
+        flex-direction: column;
+        margin: 40px 16px;
+      }
 
       .InstitutionalNavContainer {
         width: 302px;
@@ -27,6 +38,17 @@
         border-right: 1px solid #000000;
         height: 285px;
 
+        @media (max-width: 1024px) and (min-width: 280px) {
+          width: 100%;
+          border: none;
+          height: 234px;
+        }
+
+        @media (min-width: 2500px) {
+          width: 590px;
+          height: 465px;
+        }
+
         .NavSpan {
           padding: 10px 16px;
           font-family: "Roboto";
@@ -34,7 +56,13 @@
           font-weight: 400;
           font-size: 16px;
           color: #7d7d7d;
+          line-height: 19px;
           cursor: pointer;
+
+          @media (min-width: 2500px) {
+            font-size: 32px;
+            line-height: 38px;
+          }
         }
       }
     }
diff --git a/src/components/main/main-content.tsx b/src/components/main/main-content.tsx
index 6a8caf9..929eb63 100644
--- a/src/components/main/main-content.tsx
+++ b/src/components/main/main-content.tsx
@@ -77,8 +77,6 @@ export function MainContent() {
                   <span
                     className={style.NavSpan}
                     style={{
-                      /* position: "fixed",
-                      bottom: "20px", */
                       color: selectedItem === item.name ? "white" : "#7D7D7D",
                       backgroundColor:
                         selectedItem === item.name ? "black" : "white",
diff --git a/src/components/main/text/text.module.scss b/src/components/main/text/text.module.scss
index 69603a7..72653dc 100644
--- a/src/components/main/text/text.module.scss
+++ b/src/components/main/text/text.module.scss
@@ -1,5 +1,10 @@
 .textContainer {
   margin-left: 30px;
+
+  @media (max-width: 1024px) and (min-width: 280px) {
+    margin: 0;
+  }
+
   & h2 {
     margin: 0;
     font-family: "Roboto";
@@ -7,8 +12,16 @@
     font-weight: 700;
     font-size: 24px;
     line-height: 28px;
-
     color: #292929;
+
+    @media (max-width: 1024px) and (min-width: 280px) {
+      text-align: center;
+    }
+
+    @media (min-width: 2500px) {
+      font-size: 48px;
+      line-height: 56px;
+    }
   }
 
   & p {
@@ -18,5 +31,16 @@
     font-size: 13px;
     line-height: 15px;
     color: #7d7d7d;
+    margin: 12px 0;
+    text-align: justify;
+
+    @media (max-width: 1024px) and (min-width: 280px) {
+      font-size: 12px;
+    }
+
+    @media (min-width: 2500px) {
+      font-size: 26px;
+      line-height: 30px;
+    }
   }
 }