From e4d73b8f6f3d970a002a5bccadcadb01510d983c Mon Sep 17 00:00:00 2001
From: Andrea Matsunaga <andreamizuno@gmail.com>
Date: Tue, 17 Jan 2023 15:41:16 -0300
Subject: [PATCH 1/2] refactor(header): renomeia HeaderBottom para
 HeaderNavbar, aplica WidthContext no header

---
 src/components/Header/Header.module.scss      | 10 ----------
 src/components/Header/Header.tsx              | 20 ++++++++++++++-----
 .../HeaderDesktop/HeaderDesktop.module.scss   |  4 ++--
 .../Header/HeaderDesktop/HeaderDesktop.tsx    |  7 +++----
 .../Header/HeaderMobile/HeaderMobile.tsx      |  6 +++---
 .../HeaderNavbar.module.scss}                 | 14 +++++++------
 .../HeaderNavbar.tsx}                         | 12 +++++------
 7 files changed, 37 insertions(+), 36 deletions(-)
 rename src/components/Header/{HeaderBottom/HeaderBottom.module.scss => HeaderNavbar/HeaderNavbar.module.scss} (75%)
 rename src/components/Header/{HeaderBottom/HeaderBottom.tsx => HeaderNavbar/HeaderNavbar.tsx} (62%)

diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
index 2db6719..c7a80d1 100644
--- a/src/components/Header/Header.module.scss
+++ b/src/components/Header/Header.module.scss
@@ -6,15 +6,5 @@
     display: flex;
     flex-direction: column;
     gap: 25px;
-    
-    @media screen and (width > 1024px) {
-      display: none;
-    }
-  }
-
-  &.header-desktop {
-    @media screen and (width <= 1024px) {
-      display: none;
-    }
   }
 }
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 15d4cc1..da3de6f 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,15 +1,25 @@
-// import React from "react";
-
-import styles from "./Header.module.scss";
+import React, { useContext } from "react";
 
 import { HeaderDesktop } from "./HeaderDesktop/HeaderDesktop";
 import { HeaderMobile } from "./HeaderMobile/HeaderMobile";
+import { WidthContext } from "../../contexts/WidthContext";
+
+import styles from "./Header.module.scss";
 
 const Header = () => {
+  const { isMobile } = useContext(WidthContext);
+
   return (
     <>
-      <HeaderMobile className={`${styles["container"]} ${styles["header-mobile"]}`} />
-      <HeaderDesktop className={`${styles["container"]} ${styles["header-desktop"]}`} />
+      {isMobile ? (
+        <HeaderMobile
+          className={`${styles["container"]} ${styles["header-mobile"]}`}
+        />
+      ) : (
+        <HeaderDesktop
+          className={`${styles["container"]} ${styles["header-desktop"]}`}
+        />
+      )}
     </>
   );
 };
diff --git a/src/components/Header/HeaderDesktop/HeaderDesktop.module.scss b/src/components/Header/HeaderDesktop/HeaderDesktop.module.scss
index a29ca70..0f656f8 100644
--- a/src/components/Header/HeaderDesktop/HeaderDesktop.module.scss
+++ b/src/components/Header/HeaderDesktop/HeaderDesktop.module.scss
@@ -2,13 +2,13 @@
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     align-items: center;
-    padding: 25px 100px;
+    padding: 22px 100px;
     border-bottom: 1px solid #c4c4c4;
   
     .login-cart-wrapper {
       display: flex;
-      gap: 55px;
       align-items: center;
       justify-content: right;
+      gap: 55px;
     }
   }
\ No newline at end of file
diff --git a/src/components/Header/HeaderDesktop/HeaderDesktop.tsx b/src/components/Header/HeaderDesktop/HeaderDesktop.tsx
index 61443fd..fe7ef7d 100644
--- a/src/components/Header/HeaderDesktop/HeaderDesktop.tsx
+++ b/src/components/Header/HeaderDesktop/HeaderDesktop.tsx
@@ -1,13 +1,12 @@
 import React from "react";
 
-import styles from "./HeaderDesktop.module.scss";
-
-import { HeaderBottom } from "../HeaderBottom/HeaderBottom";
 import { Logo } from "../Logo/Logo";
 import { Searchbox } from "../Searchbox/Searchbox";
 import { LoginButton } from "../LoginButton/LoginButton";
 import { Minicart } from "../Minicart/Minicart";
+import { HeaderNavbar } from "../HeaderNavbar/HeaderNavbar";
 
+import styles from "./HeaderDesktop.module.scss";
 interface HeaderDesktopProps {
   className: string;
 }
@@ -25,7 +24,7 @@ const HeaderDesktop = (props: HeaderDesktopProps) => {
           <Minicart />
         </div>
       </div>
-      <HeaderBottom />
+      <HeaderNavbar />
     </header>
   );
 };
diff --git a/src/components/Header/HeaderMobile/HeaderMobile.tsx b/src/components/Header/HeaderMobile/HeaderMobile.tsx
index 72a0e66..fab167f 100644
--- a/src/components/Header/HeaderMobile/HeaderMobile.tsx
+++ b/src/components/Header/HeaderMobile/HeaderMobile.tsx
@@ -1,11 +1,11 @@
 import React from "react";
-import { Searchbox } from "../Searchbox/Searchbox";
-import { Logo } from "../Logo/Logo";
+
 import { MenuButton } from "../MenuButton/MenuButton";
+import { Logo } from "../Logo/Logo";
 import { Minicart } from "../Minicart/Minicart";
+import { Searchbox } from "../Searchbox/Searchbox";
 
 import styles from "./HeaderMobile.module.scss";
-
 interface HeaderMobileProps {
   className: string;
 }
diff --git a/src/components/Header/HeaderBottom/HeaderBottom.module.scss b/src/components/Header/HeaderNavbar/HeaderNavbar.module.scss
similarity index 75%
rename from src/components/Header/HeaderBottom/HeaderBottom.module.scss
rename to src/components/Header/HeaderNavbar/HeaderNavbar.module.scss
index b9d13e2..6167d93 100644
--- a/src/components/Header/HeaderBottom/HeaderBottom.module.scss
+++ b/src/components/Header/HeaderNavbar/HeaderNavbar.module.scss
@@ -2,22 +2,24 @@
   padding: 14px 100px;
 
   .navbar-list {
-    display: flex;
-    gap: 55px;
-    list-style: none;
     margin: 0;
     padding: 0;
+    display: flex;
+    gap: 55px;
 
     .navbar-list-item {
       a {
-        text-decoration: none;
         font-family: "Roboto";
         font-style: normal;
-        font-weight: 500; // cursos no componente header à esquerda está 400 e nas páginas 500
+        font-weight: 500;
         font-size: 14px;
         line-height: 16px;
-        text-transform: uppercase;
         color: #ffffff;
+        text-transform: uppercase;
+
+        &:hover {
+          filter: brightness(0.5);
+        }
 
         @media screen and (width >= 2500px) {
           font-size: 28px;
diff --git a/src/components/Header/HeaderBottom/HeaderBottom.tsx b/src/components/Header/HeaderNavbar/HeaderNavbar.tsx
similarity index 62%
rename from src/components/Header/HeaderBottom/HeaderBottom.tsx
rename to src/components/Header/HeaderNavbar/HeaderNavbar.tsx
index b18edf2..215ac09 100644
--- a/src/components/Header/HeaderBottom/HeaderBottom.tsx
+++ b/src/components/Header/HeaderNavbar/HeaderNavbar.tsx
@@ -1,15 +1,15 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-import styles from "./HeaderBottom.module.scss";
+import styles from "./HeaderNavbar.module.scss";
 
 const navLinks = [
-  { name: "Cursos", value: "cursos" },
-  { name: "Saiba Mais", value: "saiba-mais" },
-  { name: "Institucionais", value: "intitucionais" },
+  { name: "Cursos", value: "/" },
+  { name: "Saiba Mais", value: "/" },
+  { name: "Institucionais", value: "institucionais/sobre" },
 ];
 
-const HeaderBottom = () => {
+const HeaderNavbar = () => {
   return (
     <nav className={styles["navbar"]}>
       <ul className={styles["navbar-list"]}>
@@ -23,4 +23,4 @@ const HeaderBottom = () => {
   );
 };
 
-export { HeaderBottom };
+export { HeaderNavbar };

From c0e4d48fa3ca80fa4d65ba1ea6b6df184fcce66d Mon Sep 17 00:00:00 2001
From: Andrea Matsunaga <andreamizuno@gmail.com>
Date: Tue, 17 Jan 2023 15:47:34 -0300
Subject: [PATCH 2/2] =?UTF-8?q?feat(header):=20aplica=20hover=20nos=20?=
 =?UTF-8?q?=C3=ADcones?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LoginButton/LoginButton.module.scss       |  6 +++++-
 src/components/Header/Logo/Logo.module.scss   |  4 ++++
 src/components/Header/Logo/Logo.tsx           |  6 +++---
 .../Header/MenuButton/MenuButton.module.scss  |  4 ++--
 .../Header/MenuButton/MenuButton.tsx          |  6 ++----
 .../Header/Minicart/Minicart.module.scss      |  4 ++++
 src/components/Header/Minicart/Minicart.tsx   |  2 +-
 .../{ => Minicart}/assets/cart-icon.svg       |  0
 .../Header/Searchbox/Searchbox.module.scss    | 19 ++++++++++---------
 src/components/Header/Searchbox/Searchbox.tsx |  2 +-
 10 files changed, 32 insertions(+), 21 deletions(-)
 rename src/components/Header/{ => Minicart}/assets/cart-icon.svg (100%)

diff --git a/src/components/Header/LoginButton/LoginButton.module.scss b/src/components/Header/LoginButton/LoginButton.module.scss
index a7ae6c4..67f07bc 100644
--- a/src/components/Header/LoginButton/LoginButton.module.scss
+++ b/src/components/Header/LoginButton/LoginButton.module.scss
@@ -4,10 +4,14 @@
   font-weight: 400;
   font-size: 14px;
   line-height: 16px;
-  text-transform: uppercase;
   color: #ffffff;
+  text-transform: uppercase;
   text-decoration: none;
 
+  &:hover {
+    filter: brightness(0.5);
+  }
+
   @media screen and (width >= 2500px) {
     font-size: 28px;
     line-height: 33px;
diff --git a/src/components/Header/Logo/Logo.module.scss b/src/components/Header/Logo/Logo.module.scss
index 121ff35..a34dbce 100644
--- a/src/components/Header/Logo/Logo.module.scss
+++ b/src/components/Header/Logo/Logo.module.scss
@@ -4,6 +4,10 @@
     height: 25.86px;
     display: block;
 
+    &:hover {
+      filter: brightness(0.8);
+    }
+
     @media screen and (width >= 2500px) {
       width: 265.62px;
       height: 50.5px;
diff --git a/src/components/Header/Logo/Logo.tsx b/src/components/Header/Logo/Logo.tsx
index 7bedfa1..71403a8 100644
--- a/src/components/Header/Logo/Logo.tsx
+++ b/src/components/Header/Logo/Logo.tsx
@@ -1,14 +1,14 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-import styles from "./Logo.module.scss";
-
 import m3Logo from "../assets/m3-logo.svg";
 
+import styles from "./Logo.module.scss";
+
 const Logo = () => {
   return (
       <div className={styles["logo-wrapper"]}>
-        <Link to="/">
+        <Link to="/institucionais/sobre">
           <img src={m3Logo} alt="Logo da M3" />
         </Link>
       </div>
diff --git a/src/components/Header/MenuButton/MenuButton.module.scss b/src/components/Header/MenuButton/MenuButton.module.scss
index 569b1f0..136de8e 100644
--- a/src/components/Header/MenuButton/MenuButton.module.scss
+++ b/src/components/Header/MenuButton/MenuButton.module.scss
@@ -1,9 +1,9 @@
 .open-menu {
     width: 28px;
     height: 22.5px;
-    background-color: transparent;
-    padding: 0;
     display: block;
     border: 0;
     outline: 0;
+    padding: 0;
+    background-color: transparent;
 }
\ No newline at end of file
diff --git a/src/components/Header/MenuButton/MenuButton.tsx b/src/components/Header/MenuButton/MenuButton.tsx
index 43f8310..b5a17fb 100644
--- a/src/components/Header/MenuButton/MenuButton.tsx
+++ b/src/components/Header/MenuButton/MenuButton.tsx
@@ -1,11 +1,9 @@
 import React, { useContext } from "react";
 
-import styles from "./MenuButton.module.scss";
-
-import menuButton from "../assets/menu-icon.svg";
 import { ModalContext } from "../../../contexts/ModalContext";
+import menuButton from "../assets/menu-icon.svg";
 
-// const openMenu = () => {};
+import styles from "./MenuButton.module.scss";
 
 const MenuButton = () => {
 
diff --git a/src/components/Header/Minicart/Minicart.module.scss b/src/components/Header/Minicart/Minicart.module.scss
index 4183e1d..6872cce 100644
--- a/src/components/Header/Minicart/Minicart.module.scss
+++ b/src/components/Header/Minicart/Minicart.module.scss
@@ -4,6 +4,10 @@
     height: 28px;
     display: block;
 
+    &:hover {
+      filter: brightness(0.5);
+    }
+
     @media screen and (width >= 2500px) {
       width: 54.68px;
       height: 54.68px;
diff --git a/src/components/Header/Minicart/Minicart.tsx b/src/components/Header/Minicart/Minicart.tsx
index 73791ed..b2f3d50 100644
--- a/src/components/Header/Minicart/Minicart.tsx
+++ b/src/components/Header/Minicart/Minicart.tsx
@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 
 import styles from "./Minicart.module.scss";
 
-import minicart from "../assets/cart-icon.svg";
+import minicart from "./assets/cart-icon.svg";
 
 const Minicart = () => {
   return (
diff --git a/src/components/Header/assets/cart-icon.svg b/src/components/Header/Minicart/assets/cart-icon.svg
similarity index 100%
rename from src/components/Header/assets/cart-icon.svg
rename to src/components/Header/Minicart/assets/cart-icon.svg
diff --git a/src/components/Header/Searchbox/Searchbox.module.scss b/src/components/Header/Searchbox/Searchbox.module.scss
index 70649fa..68fa61a 100644
--- a/src/components/Header/Searchbox/Searchbox.module.scss
+++ b/src/components/Header/Searchbox/Searchbox.module.scss
@@ -10,17 +10,17 @@
     border: 2px solid #f2f2f2;
     border-radius: 5px;
     outline: 0;
+
     font-family: "Roboto";
     font-style: normal;
     font-weight: 400;
     font-size: 14px;
     line-height: 16px;
-    color: #c6c6c6; // #000000? #c4c4c4?
+    color: #000000;
 
     @media screen and (width >= 2500px) {
       width: 67.26%; //515.62px;
       padding: 12px 16px;
-
       font-size: 28px;
       line-height: 33px;
     }
@@ -31,22 +31,23 @@
     }
 
     &::placeholder {
-      color: #c4c4c4; // #c6c6c6;
+      color: #c4c4c4;
     }
   }
 
   button {
-    border: 0;
-    outline: 0;
     position: absolute;
     right: 12.78%; //46px;
     top: 8px;
     padding: 0;
+    border: 0;
+    outline: 0;
     background: transparent;
+    cursor: pointer;
 
     img {
-      height: 18px;
       width: 18px;
+      height: 18px;
       display: block;
     }
 
@@ -58,8 +59,8 @@
     }
 
     @media screen and (width <= 1024px) {
-        right: 1.61%; //16px;
-        top: 11px;
-      }
+      right: 1.61%; //16px;
+      top: 11px;
+    }
   }
 }
diff --git a/src/components/Header/Searchbox/Searchbox.tsx b/src/components/Header/Searchbox/Searchbox.tsx
index 18fef69..c6face4 100644
--- a/src/components/Header/Searchbox/Searchbox.tsx
+++ b/src/components/Header/Searchbox/Searchbox.tsx
@@ -1,9 +1,9 @@
 import { Field, Form, Formik, FormikHelpers } from "formik";
+
 import SearchboxSchema from "../../../schema/SearchboxSchema";
 import searchIcon from "../assets/search-icon.svg";
 
 import styles from "./Searchbox.module.scss";
-
 interface FormValues {
   searchInput: string;
 }