From a1ff718a82523664512279863d763f94d2b4f562 Mon Sep 17 00:00:00 2001
From: devartes <anacavalcante731@gmail.com>
Date: Fri, 6 Jan 2023 10:59:26 -0300
Subject: [PATCH] feat(header): add CSS Modules

---
 .../{Header.scss => Header.module.scss}       |  2 ++
 src/components/Header/Header.tsx              |  8 +++----
 src/components/Header/HeaderContentBottom.tsx | 16 ++++++++++---
 src/components/Header/HeaderContentTop.tsx    | 24 ++++++++++++-------
 4 files changed, 34 insertions(+), 16 deletions(-)
 rename src/components/Header/{Header.scss => Header.module.scss} (99%)

diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.module.scss
similarity index 99%
rename from src/components/Header/Header.scss
rename to src/components/Header/Header.module.scss
index fa3a3bb..8791baf 100644
--- a/src/components/Header/Header.scss
+++ b/src/components/Header/Header.module.scss
@@ -387,3 +387,5 @@ header {
         border-top-width: 0px;
     }
 }
+
+
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index da913b2..4f11655 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,5 +1,5 @@
 import { HeaderContentTop } from "./HeaderContentTop";
-import "./Header.scss";
+import styles  from "./Header.module.scss"
 import { HeaderContentBottom } from "./HeaderContentBottom";
 import {useState} from "react";
 import Icon__Menu from "../../assets/imgs/IconMenu.svg";
@@ -10,9 +10,9 @@ const Header = () => {
 
   return (
     <header>
-      <ul className="Header__Top">
-          <button className="Header__Button" onClick={() => setMenuIsVisible(true)} aria-label="abrir menu">
-            <img src={Icon__Menu} alt="ícone de menu" className="Icon__Menu" />
+      <ul className={styles["Header__Top"]}>
+          <button className={styles["Header__Button"]} onClick={() => setMenuIsVisible(true)} aria-label="abrir menu">
+            <img src={Icon__Menu} alt="ícone de menu" className={styles["Icon__Menu"]} />
           </button>
         <HeaderContentTop  menuIsVisible={menuIsVisible} setMenuIsVisible={setMenuIsVisible}/>
       </ul>     
diff --git a/src/components/Header/HeaderContentBottom.tsx b/src/components/Header/HeaderContentBottom.tsx
index 30a1450..5d02795 100644
--- a/src/components/Header/HeaderContentBottom.tsx
+++ b/src/components/Header/HeaderContentBottom.tsx
@@ -1,4 +1,4 @@
-import "./Header.scss"
+import styles  from "./Header.module.scss"
 import React from "react";
 
 interface HeaderContentProps {
@@ -9,8 +9,18 @@ interface HeaderContentProps {
 const HeaderContentBottom = ({menuIsVisible,setMenuIsVisible}: HeaderContentProps) => {
   return (
     <>
-    <div className={`Header__Bottom ${menuIsVisible && 'opened'}`} onClick={() => setMenuIsVisible(false)}  >
-      <nav className={`Nav__Bar ${menuIsVisible && 'opened'}`} onClick={() => setMenuIsVisible(false)} >
+    <div className={
+      menuIsVisible
+      ? `${styles['Header__Bottom']} ${styles['opened']}`
+      : `${styles['Header__Bottom']}`
+    
+    } onClick={() => setMenuIsVisible(false)}  >
+      <nav className={
+        menuIsVisible
+        ? `${styles["Nav__Bar"]} ${styles['opened']}`
+        : `${styles["Nav__Bar"]}`
+
+      } onClick={() => setMenuIsVisible(false)} >
         <ul className={`${menuIsVisible && 'opened'}`} onClick={() => setMenuIsVisible(false)}>
           <li>
             <a href="/">Cursos</a>
diff --git a/src/components/Header/HeaderContentTop.tsx b/src/components/Header/HeaderContentTop.tsx
index 30e1601..6acc5b3 100644
--- a/src/components/Header/HeaderContentTop.tsx
+++ b/src/components/Header/HeaderContentTop.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import "./Header.scss";
+import styles  from "./Header.module.scss"
 import Logo from "../../assets/imgs/logom3.svg";
 import Cart from "../../assets/imgs/cart.svg";
 import Icon__Menu__Closed from "../../assets/imgs/IconMenuClosed.svg";
@@ -15,13 +15,13 @@ const HeaderContentTop = ({menuIsVisible,setMenuIsVisible}: HeaderContentProps)
 
   return (
     <>
-      <li className="Logo">
+      <li className={styles["Logo"]}>
         <a href="/">
           <img src={Logo} alt="logo M3" />
         </a>
       </li>
       <input
-        className="Search__Bar"
+        className={styles["Search__Bar"]}
         type="text"
         placeholder="Buscar..."
         value={search}
@@ -29,15 +29,21 @@ const HeaderContentTop = ({menuIsVisible,setMenuIsVisible}: HeaderContentProps)
           setSearch(e.target.value)
         }
       ></input>
-      <ul className="Menu__Header__Top">
-        <li className={`List__Login ${menuIsVisible && 'opened'}`} onClick={() => setMenuIsVisible(false)}>
+      <ul className={styles["Menu__Header__Top"]}>
+        <li className={
+          menuIsVisible
+          ? `${styles['List__Login']} ${styles['opened']}`
+          : `${styles['List__Login']}`
+        } onClick={() => setMenuIsVisible(false)}>
           <a href="/">Entrar</a>
-          <button className="Header__Button Closed" onClick={() => setMenuIsVisible(false)}  aria-label="fechar menu">
-            <img src={Icon__Menu__Closed} alt="ícone do menu pra fechar" className="Icon__Menu__Closed"/>
+          <button className={
+            `${styles["Header__Button"]} ${styles["Closed"]}`
+          } onClick={() => setMenuIsVisible(false)}  aria-label="fechar menu">
+            <img src={Icon__Menu__Closed} alt="ícone do menu pra fechar" className={styles["Icon__Menu__Closed"]}/>
           </button>
         </li>
-        <li className="List__Cart">
-          <a href="/" className="cart__content--link">
+        <li className={styles["List__Cart"]}>
+          <a href="/" className={styles["cart__content--link"]}>
             <img src={Cart} alt="ícone de carrinho" />
           </a>
         </li>