From c84cd54f71652307fa3cd61d2f511c2901d07278 Mon Sep 17 00:00:00 2001
From: Sabrina Miranda <sabrina.miranda1@bol.com.br>
Date: Thu, 12 Jan 2023 23:23:06 -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

---
 .../HeaderNavBar/HeaderNavBar.module.scss     | 28 ++++++
 src/components/HeaderNavBar/HeaderNavBar.tsx  | 36 +++++---
 .../HeaderTop/HeaderTop.module.scss           | 24 ++++-
 src/components/HeaderTop/HeaderTop.tsx        | 91 ++++++++++---------
 .../Newsletter/Newsletter.module.scss         |  2 +-
 5 files changed, 121 insertions(+), 60 deletions(-)

diff --git a/src/components/HeaderNavBar/HeaderNavBar.module.scss b/src/components/HeaderNavBar/HeaderNavBar.module.scss
index 6361cc0..08f642d 100644
--- a/src/components/HeaderNavBar/HeaderNavBar.module.scss
+++ b/src/components/HeaderNavBar/HeaderNavBar.module.scss
@@ -40,4 +40,32 @@
             gap: 0;
         }
     }
+
+    &__item {
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 16px;
+        text-transform: uppercase;
+        color: variables.$white;
+        cursor: pointer;
+    
+        @media (min-width: 3600px) {
+            font-size: 32px;
+            line-height: 38px;
+        }
+    
+        @media ((min-width: 2500px) and (max-width: 3599px)) {
+            font-size: 28px;
+            line-height: 33px;
+        }
+    
+        @media (max-width: 1024px) {
+            color: variables.$gray-400;
+            margin-bottom: 12px;
+        }
+    
+        &:hover {
+            filter: brightness(80%);
+        }
+    }
 }
diff --git a/src/components/HeaderNavBar/HeaderNavBar.tsx b/src/components/HeaderNavBar/HeaderNavBar.tsx
index 54811a7..8d29ce0 100644
--- a/src/components/HeaderNavBar/HeaderNavBar.tsx
+++ b/src/components/HeaderNavBar/HeaderNavBar.tsx
@@ -1,20 +1,28 @@
-import React from 'react';
+import React from "react";
 
 import styles from "./HeaderNavBar.module.scss";
 
-import { ItemNavBar } from '../ItemNavBar/ItemNavBar';
+import { ItemList } from "../ItemList/ItemList";
 
 const HeaderNavBar = () => {
+  return (
+    <nav className={styles["header-nav-bar"]}>
+      <ul className={styles["header-nav-bar__ul"]}>
+        <ItemList
+          textClassName={styles["header-nav-bar__item"]}
+          text="cursos"
+        />
+        <ItemList
+          textClassName={styles["header-nav-bar__item"]}
+          text="Saiba mais"
+        />
+        <ItemList
+          textClassName={styles["header-nav-bar__item"]}
+          text="Institucionais"
+        />
+      </ul>
+    </nav>
+  );
+};
 
-    return (
-        <nav className={styles["header-nav-bar"]}>
-            <ul className={styles["header-nav-bar__ul"]}>
-               <ItemNavBar text="cursos" />
-               <ItemNavBar text="Saiba mais" />
-               <ItemNavBar text="Institucionais" />
-            </ul>
-        </nav>
-    );
-}
-
-export {HeaderNavBar};
+export { HeaderNavBar };
diff --git a/src/components/HeaderTop/HeaderTop.module.scss b/src/components/HeaderTop/HeaderTop.module.scss
index 6489ff8..6fa0c16 100644
--- a/src/components/HeaderTop/HeaderTop.module.scss
+++ b/src/components/HeaderTop/HeaderTop.module.scss
@@ -52,12 +52,16 @@
             &:hover {
                 filter: brightness(80%);
             }
+
+            &:active {
+                filter: brightness(100%);
+            }
         }
     }
 
     &__menu-mobile {
         &__active,
-        &__desactive {
+        &__inactive {
             width: 96.484375%;
             height: 585px;
             position: absolute;
@@ -81,7 +85,7 @@
             transform: translateX(0%);
         }
     
-        &__desactive {
+        &__inactive {
             opacity: 0;
             visibility: hidden;
             transition: all 0.5s ease;
@@ -107,6 +111,10 @@
             &:hover {
                 filter: brightness(80%);
             }
+
+            &:active {
+                filter: brightness(100%);
+            }
         }
 
         &__close-btn {
@@ -121,6 +129,10 @@
             &:hover {
                 filter: brightness(80%);
             }
+
+            &:active {
+                filter: brightness(100%);
+            }
         }
     }
     
@@ -267,6 +279,10 @@
             &:hover {
                 filter: brightness(80%);
             }
+
+            &:active {
+                filter: brightness(100%);
+            }
     
             @media (min-width: 3600px) {
                 font-size: 32px;
@@ -290,6 +306,10 @@
             &:hover {
                 filter: brightness(80%);
             }
+
+            &:active {
+                filter: brightness(100%);
+            }
     
             &__img {
                 width: 100%;
diff --git a/src/components/HeaderTop/HeaderTop.tsx b/src/components/HeaderTop/HeaderTop.tsx
index 5425f0d..d7bde1e 100644
--- a/src/components/HeaderTop/HeaderTop.tsx
+++ b/src/components/HeaderTop/HeaderTop.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from "react";
 
 import styles from "./HeaderTop.module.scss";
 
@@ -8,22 +8,21 @@ import imgSearch from "./assets/search.svg";
 import imgHamburgerBtn from "./assets/hamburger-menu-btn-icon.svg";
 import imgCloseBtn from "./assets/close-menu-btn-icon.svg";
 
-import { HeaderNavBar } from '../HeaderNavBar/HeaderNavBar';
+import { HeaderNavBar } from "../HeaderNavBar/HeaderNavBar";
 
 const HeaderTop = () => {
-
     const [open, setOpen] = useState(false);
 
     const handleOpen = () => setOpen(true);
     const handleClose = () => setOpen(false);
 
-    let menuRef:any= useRef();
+    let menuRef = useRef<any>();
 
     useEffect(() => {
-        let handler = (e:any) => {
-            if (!menuRef.current.contains(e.target)) {
-                setOpen(false)
-            }
+        let handler = (e: MouseEvent) => {
+        if (!menuRef.current.contains(e.target)) {
+            setOpen(false);
+        }
         };
 
         document.addEventListener("mousedown", handler);
@@ -33,75 +32,81 @@ const HeaderTop = () => {
 
     const [search, setSearch] = useState("");
 
-    const handleSearch = (target:any) => {
+    const handleSearch = (target: any) => {
         setSearch(target.value);
-    }
-    
-    const cleanSearch = () => setSearch('');
+    };
+
+    const cleanSearch = () => setSearch("");
 
     return (
         <div className={styles["header-top"]}>
-            <div className={styles["header-top__wrapper"]}> 
-
-                <button className={styles["header-top__btn-hamburger"]} onClick={handleOpen}>
-                    <img className={styles["header-top__btn-hamburger__img"]} src= {imgHamburgerBtn} alt="Ícone Menu Hamburguer" /> 
+            <div className={styles["header-top__wrapper"]}>
+                <button className={styles["header-top__btn-hamburger"]} onClick={handleOpen} >
+                    <img className={styles["header-top__btn-hamburger__img"]} src={imgHamburgerBtn} alt="Ícone Menu Hamburguer" />
                 </button>
 
-                <div className={open === true
+                <div ref={menuRef} className={ open === true
                     ? styles["header-top__menu-mobile__active"]
-                    : styles["header-top__menu-mobile__desactive"]} ref={menuRef}>
+                    : styles["header-top__menu-mobile__inactive"] } >
 
-                    <div className={styles["header-top__menu-mobile__items"]} >
-                        <a href="/" className={styles["header-top__menu-mobile__login"]} >
-                            Entrar
+                    <div className={styles["header-top__menu-mobile__items"]}>
+                        <a href="/" className={styles["header-top__menu-mobile__login"]}>
+                        Entrar
                         </a>
 
-                        <button className={styles["header-top__menu-mobile__close-btn"]} onClick={handleClose}>
-                            <img className={styles["header-top__menu-mobile__close-btn__img"]} src= {imgCloseBtn} alt="Ícone Fechar" />
+                        <button className={styles["header-top__menu-mobile__close-btn"]} onClick={handleClose} >
+                            <img className={styles["header-top__menu-mobile__close-btn__img"]} src={imgCloseBtn} alt="Ícone Fechar" />
                         </button>
-                    </div> 
+                </div>
 
-                    <HeaderNavBar />  
+                <HeaderNavBar />
                 </div>
 
                 <picture className={styles["header-top__logo"]}>
-                    <a href="/">
-                        <img className={styles["header-top__logo__img"]} src= {imgLogo} alt="Logo M3 Academy" />
-                    </a>
+                <a href="/">
+                    <img
+                    className={styles["header-top__logo__img"]}
+                    src={imgLogo}
+                    alt="Logo M3 Academy"
+                    />
+                </a>
                 </picture>
 
                 <div className={styles["header-top__search-bar"]}>
-                    <input className={styles["header-top__search-bar__input"]}
-                        type='search' id='search-bar' name='search' placeholder='Buscar...'
+                    <input
+                        className={styles["header-top__search-bar__input"]}
+                        type="search"
+                        id="search-bar"
+                        name="search"
+                        placeholder="Buscar..."
                         value={search}
                         onChange={handleSearch}
                         onBlur={cleanSearch}
                     />
 
-                    <button className={styles["header-top__search-bar__btn"]} type='submit'>
-                        <img className={styles["header-top__search-bar__btn__img"]} src= {imgSearch} alt="ìcone Lupa" />
+                    <button className={styles["header-top__search-bar__btn"]} type="submit" >
+                        <img className={styles["header-top__search-bar__btn__img"]} src={imgSearch} alt="ìcone Lupa" />
                     </button>
-                </div>
+                    </div>
 
-                <div className={styles["header-top__menu"]}>
-                    <a href='/' className={styles["header-top__menu__login"]}>
+                    <div className={styles["header-top__menu"]}>
+                    <a href="/" className={styles["header-top__menu__login"]}>
                         Entrar
                     </a>
 
                     <button className={styles["header-top__menu__btn-cart"]}>
-                        <img className={styles["header-top__menu__btn-cart__img"]} src={imgCart} alt="Ícone Carrinho" />
+                        <img  className={styles["header-top__menu__btn-cart__img"]} src={imgCart} alt="Ícone Carrinho" />
                     </button>
                 </div>
             </div>
 
-            <div  className={open === false
-                ? styles["header-top__overlay-close"]
-                : styles["header-top__overlay"]}
-                 >
+            <div
+                className={ open === false
+                    ? styles["header-top__overlay-close"]
+                    : styles["header-top__overlay"] } >
             </div>
-
         </div>
     );
-}
+};
 
-export {HeaderTop};
+export { HeaderTop };
diff --git a/src/components/Newsletter/Newsletter.module.scss b/src/components/Newsletter/Newsletter.module.scss
index c436dd7..544feba 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(.8);
+                    filter: opacity(.9);
                 }
 
                 &:active {