style: modificando o nome das classes

src/components/Header.module.scss

@@ -9,7 +9,7 @@ header {
 }
 
 //Header Content Top
-.header__content--top {
+.Header__Top {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -22,7 +22,29 @@ header {
         width: 92.002%;
         height: 101px;
     }
-    .list {
+    .Logo {
+        width: 12.589%;
+        height: 25.86px;
+        list-style: none;
+        display: flex;
+        @media (min-width: 2500px) {
+            width: 11.545%;
+            height: 50.5px;
+        }
+        & a {
+            display: flex;
+            width: 100%;
+            height: 100%;
+            & img {
+                width: 100%;
+                height: 25.86px;
+                @media (min-width: 2500px) {
+                    height: 50.5px;
+                }
+            }
+        }
+    }
+    .Menu__Header__Top {
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -31,7 +53,7 @@ header {
         @media (min-width: 2500px) {
             width: 9.331%;
         }
-        &__item {
+        & .List {
             display: flex;
             align-items: center;
             list-style: none;
@@ -63,30 +85,10 @@ header {
                 }
             }
         }
-        &__item--logo {
-            width: 12.589%;
-            height: 25.86px;
-            list-style: none;
-            display: flex;
-            @media (min-width: 2500px) {
-                width: 11.545%;
-                height: 50.5px;
-            }
-            & a {
-                display: flex;
-                & img {
-                    width: 100%;
-                    height: 25.86px;
-                    @media (min-width: 2500px) {
-                        height: 50.5px;
-                    }
-                }
-            }
-        }
     }
 }
 
-.input__header {
+.Search__Bar {
     width: 200.04px;
     height: 12.04px;
     background: $white;
@@ -97,8 +99,12 @@ header {
     background-repeat: no-repeat;
     background-position: bottom 50% right 16px;
     background-size: 18px;
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
     font-size: 14px;
     line-height: 16px;
+    color: $primary-500;
     @media (min-width: 2500px) {
         width: 435.19px;
         height: 31.18px;
@@ -123,7 +129,7 @@ header {
 }
 
 //Header Content Bottom
-.nav__content {
+.Header__Bottom {
     border-top: 1px solid $primary-600;
     width: auto;
     height: 43.01px;
@@ -132,7 +138,7 @@ header {
     @media (min-width: 2500px) {
         height: 60.01px;
     }
-    .header__content--bottom {
+   .Nav__Bar {
         padding-left: 0;
         width: 84.378%;
         display: flex;

src/components/Header.tsx

@@ -4,13 +4,13 @@ import { HeaderContentBottom } from "./HeaderContentBottom";
 
 const Header = () => {
   return (
-    <header>   
-        <ul className={styles["header__content--top"]}>
-          <HeaderContentTop/>
-        </ul>
-        <nav className={styles["nav__content"]}>
-          <HeaderContentBottom/>
-        </nav>
+    <header>
+      <ul className={styles["Header__Top"]}>
+        <HeaderContentTop />
+      </ul>
+      <nav className={styles["Header__Bottom"]}>
+        <HeaderContentBottom />
+      </nav>
     </header>
   );
 };

src/components/HeaderContentBottom.tsx

@@ -3,7 +3,7 @@ import styles from "./Header.module.scss";
 const HeaderContentBottom = () => {
   return (
     <>
-      <ul className={styles["header__content--bottom"]}>
+      <ul className={styles["Nav__Bar"]}>
         <li>
           <a href="/">Cursos</a>
         </li>

src/components/HeaderContentTop.tsx

@@ -1,27 +1,36 @@
-import React from 'react';
+import React from "react";
 import styles from "./Header.module.scss";
 import Logo from "../assets/imgs/logom3.svg";
 import Cart from "../assets/imgs/cart.svg";
 
 const HeaderContentTop = () => {
-  const [search, setSearch]: [string, (search: string) => void] = React.useState("");
+  const [search, setSearch]: [string, (search: string) => void] =
+    React.useState("");
   return (
     <>
-      <li className={styles["list__item--logo"]}>
+      <li className={styles["Logo"]}>
         <a href="/">
-          <img src={Logo} alt="logo M3"/>
+          <img src={Logo} alt="logo M3" />
         </a>
       </li>
-      <li className={styles["list__item"]}>
-        <input className={styles["input__header"]} type="text" placeholder="Buscar..." value={search} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value)}></input>
+      <li className={styles["List"]}>
+        <input
+          className={styles["Search__Bar"]}
+          type="text"
+          placeholder="Buscar..."
+          value={search}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setSearch(e.target.value)
+          }
+        ></input>
       </li>
-      <ul className={styles["list"]}>
-        <li className={styles["list__item"]}>
+      <ul className={styles["Menu__Header__Top"]}>
+        <li className={styles["List"]}>
           <a href="/">Entrar</a>
         </li>
-        <li className={styles["list__item"]}>
+        <li className={styles["List"]}>
           <a href="/" className={styles["cart__content--link"]}>
-            <img src={Cart} alt="ícone de carrinho"/>
+            <img src={Cart} alt="ícone de carrinho" />
           </a>
         </li>
       </ul>