Merge branch 'feature/header' into development

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;
-    }
   }
 }

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"]}`}
+        />
+      )}
     </>
   );
 };

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;
     }
   }

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>
   );
 };

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;
 }

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;

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 };

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;

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;

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>

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;
 }

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 = () => {
 

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;

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 (

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;
+    }
   }
 }

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;
 }