src/components/Header/Form.module.scss

@@ -1,3 +1,5 @@
+@import "../../styles/utils/variables.scss";
+
 .form {
   position: relative;
 
@@ -13,7 +15,7 @@
     border-radius: 5px;
     padding: 7px 16px 7px 16px;
     outline: 0;
-    border: 2px solid #f2f2f2;
+    border: 2px solid $primary-700;
 
     @media (min-width: 2500px) {
       height: 57px;
@@ -29,7 +31,7 @@
 
     &::placeholder {
       font-weight: 400;
-      color: #c4c4c4;
+      color: $primary-600;
     }
   }
 

src/components/Header/HeaderWrapper.module.scss

@@ -1,11 +1,13 @@
-.header {
+@import "../../styles/utils/variables.scss";
+
+.headerWrapper {
   display: flex;
   justify-content: space-between;
   height: 76px;
   align-items: center;
-  border-bottom: 1px solid #c4c4c4;
+  border-bottom: 1px solid $primary-600;
   padding: 0 100px;
-  background-color: #000000;
+  background-color: $black;
 
   @media (min-width: 2500px) {
     padding: 22px 100px;

src/components/Header/LogoM3.tsx

@@ -1,8 +0,0 @@
-// Imagem
-import logoM3 from "../../assets/svg/logo.svg";
-
-const LogoM3 = () => {
-  return <img src={logoM3} alt="M3 Academy" />;
-};
-
-export { LogoM3 };

src/components/Header/Nav.module.scss

@@ -1,6 +1,8 @@
+@import "../../styles/utils/variables.scss";
+
 .nav {
   padding: 14px 100px;
-  background-color: #000;
+  background-color: $black;
   text-decoration: none;
 
   @media (max-width: 1024px) {
@@ -21,7 +23,7 @@
     font-weight: 400;
     line-height: 16px;
     text-transform: uppercase;
-    color: #fff;
+    color: $white;
     text-decoration: none;
     transition: all 0.3s linear;
 

src/components/Header/User.module.scss

@@ -1,9 +1,11 @@
+@import "../../styles/utils/variables.scss";
+
 .user {
   display: flex;
   align-items: center;
 
   a {
-    color: #fff;
+    color: $white;
     font-size: 14px;
     font-weight: 400;
     line-height: 16px;

src/pages/Header.tsx

@@ -14,7 +14,7 @@ import styleHeaderWrapper from "../components/header/HeaderWrapper.module.scss";
 const Header = () => {
   return (
     <header>
-      <div className={styleHeaderWrapper["header"]}>
+      <div className={styleHeaderWrapper["headerWrapper"]}>
         <Menu />
         <Logo />
         <Form />