fix(Form, MenuMobile): Ajusta o tamanho dos inputs e ajusta o overlay do menu mobile

src/components/Modal.scss

@@ -4,10 +4,11 @@
   left: 0;
   right: 3.52%;
   background: #ffffff;
-  bottom: 55.61%;
+
   opacity: 0;
   pointer-events: none;
   transition: all 0.4s ease-in-out;
+  bottom: 33.6%;
 
   .modal-content {
     z-index: 8;
@@ -15,7 +16,8 @@
     position: fixed;
     left: 0;
     right: 3.5%;
-    bottom: 44%;
+    bottom: 33.6%;
+    background: white;
 
     &__wrapper {
       position: relative;
@@ -55,7 +57,7 @@
 
   .modal-overlay {
     position: fixed;
-    top: 0%;
+    top: 0;
     left: 0;
     right: 0;
     bottom: 0;
@@ -68,3 +70,13 @@
   pointer-events: all;
   z-index: 8;
 }
+
+@media screen and (max-width: 375px) {
+  .modal_wrapper {
+    right: 9.5%;
+
+    .modal-content {
+      right: 9.5%;
+    }
+  }
+}

src/components/Routes/Contato.tsx

@@ -171,6 +171,11 @@ const Contato = () => {
 
           <div>
             <label htmlFor="instagram">Instagram</label>
+            <ErrorMessage
+              component="span"
+              name="instagram"
+              className={styles["form-invalid-feedback"]}
+            />
             <Field id="instagram" name="instagram" placeholder="@seuuser" />
           </div>
 

src/schema/FormSchema.ts

@@ -20,8 +20,6 @@ export default Yup.object().shape({
   tel: Yup.string()
     .required("*Campo Obrigatório")
     .phone("BR", true, "Telefone Inválido"),
-  instagram: Yup.string()
-    .min(3, "Instagram Inválido")
-    .required("*Campo Obrigatório"),
+  instagram: Yup.string().min(3, "Instagram Inválido"),
   check: Yup.bool().oneOf([true], "*"),
 });

src/styles/partials/MainContent.module.scss

@@ -114,6 +114,7 @@
             border-radius: 25px;
             padding: 15px 0 15px 20px;
             outline: none;
+            height: 14px;
             &::placeholder {
               font-size: 14px;
               line-height: 16px;
@@ -418,6 +419,7 @@
           }
 
           input {
+            height: 31px;
             &::placeholder {
               font-size: 28px !important;
               line-height: 33px !important;