Merge pull request 'refactor: adiciona css modules' (#3) from refactor/adiciona-css-modules into development

Reviewed-on: #3

src/App.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { Header } from "./components/Header";
+import { Institutional } from "./pages/Institutional";
 
 function App() {
   return (
     <>
-      <Header />
+      <Institutional />
     </>
   );
 }

src/components/Header/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import "./styles.scss";
+import styles from "./header.module.scss";
 import logo from "../../assets/images/logo.png";
 import cart from "../../assets/images/header-cart.png";
 import search from "../../assets/images/header-search.png";
@@ -7,36 +7,36 @@ import menuButton from "../../assets/images/menu-button.png";
 
 const Header = () => {
   return (
-    <header className="header">
-      <div className="header__content">
-        <button className="menu-mobile-button">
+    <header className={styles["header"]}>
+      <div className={styles["header__content"]}>
+        <button className={styles["menu-mobile-button"]}>
           <img src={menuButton} alt="Menu mobile" />
         </button>
-        <div className="logo">
+        <div className={styles["logo"]}>
           <a href="/">
             <img src={logo} alt="Logo da M3" />
           </a>
         </div>
-        <div className="search-desktop">
+        <div className={styles["search-desktop"]}>
           <input
-            className="search-desktop__input"
+            className={styles["search-desktop__input"]}
             type="text"
             placeholder="Buscar..."
           />
-          <button className="search-desktop__button" type="button">
+          <button className={styles["search-desktop__button"]} type="button">
             <img src={search} alt="Pesquisar" />
           </button>
         </div>
-        <div className="buttons">
-          <button className="buttons__logIn" type="button">
+        <div className={styles["buttons"]}>
+          <button className={styles["buttons__logIn"]} type="button">
             ENTRAR
           </button>
-          <button className="buttons__cart" type="button">
+          <button className={styles["buttons__cart"]} type="button">
             <img src={cart} alt="Carrinho" />
           </button>
         </div>
       </div>
-      <div className="header__nav">
+      <div className={styles["header__nav"]}>
         <nav>
           <ul>
             <li>
@@ -51,13 +51,13 @@ const Header = () => {
           </ul>
         </nav>
       </div>
-      <div className="search-mobile">
+      <div className={styles["search-mobile"]}>
         <input
-          className="search-mobile__input"
+          className={styles["search-mobile__input"]}
           type="text"
           placeholder="Buscar..."
         />
-        <button className="search-mobile__button" type="button">
+        <button className={styles["search-mobile__button"]} type="button">
           <img src={search} alt="Pesquisar" />
         </button>
       </div>

src/pages/Institutional/index.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Header } from "../../components/Header";
+
+const Institutional = () => {
+  return (
+    <>
+      <Header />
+    </>
+  );
+};
+
+export { Institutional };