From 1bb05c78c7917f088749770e88dec3eef0427081 Mon Sep 17 00:00:00 2001
From: Sabrina Miranda <sabrina.miranda1@bol.com.br>
Date: Mon, 16 Jan 2023 15:27:53 -0300
Subject: [PATCH] =?UTF-8?q?refactor:=20Aplica=20mudan=C3=A7as=20no=20c?=
 =?UTF-8?q?=C3=B3digo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Button/Buttom.tsx              | 19 ------
 src/components/Main/Main.module.scss          | 24 ++++++++
 .../MenuSideBar/MenuSideBar.module.scss       |  6 +-
 .../Newsletter/Newsletter.module.scss         | 60 +++++++++----------
 src/components/Newsletter/Newsletter.tsx      |  9 +--
 .../RedesSociais/RedesSociais.module.scss     |  2 +-
 6 files changed, 64 insertions(+), 56 deletions(-)
 delete mode 100644 src/components/Button/Buttom.tsx

diff --git a/src/components/Button/Buttom.tsx b/src/components/Button/Buttom.tsx
deleted file mode 100644
index 9fcdb9e..0000000
--- a/src/components/Button/Buttom.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-
-interface Btn {
-    text: string;
-    type: "button" | "submit" | "reset";
-    className: string;
-}
-
-const Button = ( props: Btn ) => {
-    const { text, type, className } = props;
-
-    return (
-    <button type={type} className={className}>
-        {text}
-    </button>
-    );
-};
-
-export { Button };
diff --git a/src/components/Main/Main.module.scss b/src/components/Main/Main.module.scss
index c330929..2f41753 100644
--- a/src/components/Main/Main.module.scss
+++ b/src/components/Main/Main.module.scss
@@ -16,6 +16,14 @@
             @media (min-width: 2500px) {
                 width: 31px;
             }
+
+            &:hover {
+                filter: brightness(80%);
+            }
+
+            &:active {
+                filter: brightness(100%);
+            }
         }
 
         &__arrow-icon {
@@ -26,6 +34,14 @@
                 width: 15px;
                 height: 15px;
             }
+
+            &:hover {
+                filter: brightness(80%);
+            }
+
+            &:active {
+                filter: brightness(100%);
+            }
         }
 
         &__text {
@@ -37,6 +53,14 @@
                 font-size: 24px;
                 line-height: 28px;
             }
+
+            &:hover {
+                filter: brightness(80%);
+            }
+
+            &:active {
+                filter: brightness(100%);
+            }
         }
     }
 
diff --git a/src/components/MenuSideBar/MenuSideBar.module.scss b/src/components/MenuSideBar/MenuSideBar.module.scss
index ea7b8bb..3d32f68 100644
--- a/src/components/MenuSideBar/MenuSideBar.module.scss
+++ b/src/components/MenuSideBar/MenuSideBar.module.scss
@@ -2,11 +2,12 @@
 
 .menu-sidebar {
     border-right: 1px solid variables.$black;
-    width: 302px;
+    width: 27.97%;
+    min-width: 302px;
     height: 285px;
 
     @media (min-width: 2500px) {
-        width: 590px;
+        min-width: 590px;
         height: 485px;
     }
 
@@ -14,6 +15,7 @@
         border: none;
         height: 224px;
         width: 100%;
+        min-width: 100%;
     }
 
     &__container {
diff --git a/src/components/Newsletter/Newsletter.module.scss b/src/components/Newsletter/Newsletter.module.scss
index 544feba..69d026a 100644
--- a/src/components/Newsletter/Newsletter.module.scss
+++ b/src/components/Newsletter/Newsletter.module.scss
@@ -136,7 +136,7 @@
                 text-transform: uppercase;
 
                 &:hover {
-                    filter: opacity(.9);
+                    filter: opacity(.85);
                 }
 
                 &:active {
@@ -166,35 +166,35 @@
             }
         }
     }
-}
 
-span {
-    font-size: 12px;
-    line-height: 14px;
-    color: variables.$red;
-    position: absolute;
-    right: 0;
-    top: 14px;
-
-    @media (min-width: 3600px) {
-        font-size: 26px;
-        line-height: 30px;
-        top: 20px;
-    }
-
-    @media  ((min-width: 2500px) and (max-width: 3599px)) {
-        font-size: 24px;
-        line-height: 28px;
-        top: 20px;
-    }
-
-    @media (min-width: 350px) and (max-width: 1024px) {
-        right: 16px;
-    }
-
-    @media (max-width: 349px) {
-        font-size: 11px;
-        top: 18px;
-        right: 16px;
+    &__invalid-feedback {
+        font-size: 12px;
+        line-height: 14px;
+        color: variables.$red;
+        position: absolute;
+        right: 0;
+        top: 14px;
+    
+        @media (min-width: 3600px) {
+            font-size: 26px;
+            line-height: 30px;
+            top: 20px;
+        }
+    
+        @media  ((min-width: 2500px) and (max-width: 3599px)) {
+            font-size: 24px;
+            line-height: 28px;
+            top: 20px;
+        }
+    
+        @media (min-width: 350px) and (max-width: 1024px) {
+            right: 16px;
+        }
+    
+        @media (max-width: 349px) {
+            font-size: 11px;
+            top: 18px;
+            right: 16px;
+        }
     }
 }
diff --git a/src/components/Newsletter/Newsletter.tsx b/src/components/Newsletter/Newsletter.tsx
index 2466510..586216f 100644
--- a/src/components/Newsletter/Newsletter.tsx
+++ b/src/components/Newsletter/Newsletter.tsx
@@ -5,7 +5,6 @@ import { Formik, Form, Field, ErrorMessage, FormikHelpers} from "formik";
 import styles from "./Newsletter.module.scss";
 
 import NewsletterSchema from "./Schema/NewsletterSchema";
-import { Button } from "../Button/Buttom";
 
 interface NewsletterValue {
     email: string;
@@ -40,10 +39,12 @@ const Newsletter = () => {
                             <div className={styles["newsletter__form__items__email"]}>
                                 <Field id="email" name="email" placeholder="E-mail" className={errors.email && touched.email && "invalid"}
                                 />
-                                <ErrorMessage component="span" name="email" className={styles["newsletter-invalid-feedback"]}/>
+                                <ErrorMessage component="span" name="email" className={styles["newsletter__invalid-feedback"]}/>
                             </div>
-                            
-                            <Button type="submit" text="Enviar" className={styles["newsletter__form__items__btn"]} />
+
+                            <button type="submit" className={styles["newsletter__form__items__btn"]}>
+                                Enviar
+                            </button>
                         </div>
                     </Form>
                 )}    
diff --git a/src/components/RedesSociais/RedesSociais.module.scss b/src/components/RedesSociais/RedesSociais.module.scss
index fa52094..d18891e 100644
--- a/src/components/RedesSociais/RedesSociais.module.scss
+++ b/src/components/RedesSociais/RedesSociais.module.scss
@@ -16,7 +16,7 @@
             width: 35px;
 
             &:hover {
-                filter: contrast(30%);
+                filter: contrast(60%);
             }
 
             &:active {