From a855e4de3c1e1ab9eec3db8a739578abfa25d7c6 Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Mon, 9 Jan 2023 19:39:41 -0300
Subject: [PATCH] feat(header): Adicionando o botao da busca

---
 src/sectors/Header/TopHeader/TopHeader.tsx    | 12 ++--
 .../Header/TopHeader/styles.module.scss       | 55 +++++++++++++++++--
 src/styles/partials/header.scss               |  3 +
 src/styles/utils/variables.scss               |  2 +-
 4 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/src/sectors/Header/TopHeader/TopHeader.tsx b/src/sectors/Header/TopHeader/TopHeader.tsx
index 9510582..2f5a8d0 100644
--- a/src/sectors/Header/TopHeader/TopHeader.tsx
+++ b/src/sectors/Header/TopHeader/TopHeader.tsx
@@ -21,11 +21,13 @@ const TopHeader = () => {
           placeholder="Buscar"
           required
         />
-        <img
-          className={styles["searchImg"]}
-          alt="LogoM3Academy"
-          src={searchImg}
-        />
+        <button className={styles["buscaBtn"]}>
+          <img
+            className={styles["searchImg"]}
+            alt="LogoM3Academy"
+            src={searchImg}
+          />
+        </button>
       </div>
       <a className={styles["loginLink"]} href="/">
         ENTRAR
diff --git a/src/sectors/Header/TopHeader/styles.module.scss b/src/sectors/Header/TopHeader/styles.module.scss
index 604febf..2b1971a 100644
--- a/src/sectors/Header/TopHeader/styles.module.scss
+++ b/src/sectors/Header/TopHeader/styles.module.scss
@@ -1,16 +1,61 @@
 .TopHeader {
+  width: 100%;
   display: flex;
   flex-direction: row;
+  height: 101px;
+
   .logoAcademyImg {
-    width: 500px;
+    width: 262px;
+    height: 50.5px;
+    margin-left: 100px;
+    margin-right: 626.38px;
   }
   .search-wrapper {
-    background: wheat;
+    //background: #fff;
+    display: flex;
+    flex-direction: row;
+    width: 515.62px;
+    //width: 20.62%;
+    height: 57px;
+    margin-right: 677.38px;
     .search-input {
-      width: 100px;
+      width: 515.62px;
+      height: 57px;
+      border: 2px solid #f0f0f0;
+      border-radius: 5px;
+      &::placeholder {
+        padding: 3px;
+        color: black;
+      }
     }
-    .searchImg {
-      width: 200px;
+    .buscaBtn {
+      width: 100px;
+      height: 50px;
+      position: relative;
+      background-color: white;
+      right: 160px;
+      top: 7px;
+      border: white;
+      .searchImg {
+        width: 35.15px;
+        height: 35.15px;
+        img {
+          margin: 0 0 0 0;
+        }
+      }
+    }
+  }
+
+  .loginLink {
+    height: 300px;
+    color: white;
+  }
+  .cartLink {
+    width: 54px;
+    height: 54px;
+    .cartImg {
+      width: 54px;
+      height: 54px;
     }
   }
 }
diff --git a/src/styles/partials/header.scss b/src/styles/partials/header.scss
index 6be8453..c108e58 100644
--- a/src/styles/partials/header.scss
+++ b/src/styles/partials/header.scss
@@ -1,3 +1,6 @@
 .header {
+  width: 100%;
+  height: 162px;
   background-color: $black100;
+  padding-top: 22px;
 }
diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss
index 9d022f0..beec5c9 100644
--- a/src/styles/utils/variables.scss
+++ b/src/styles/utils/variables.scss
@@ -1,6 +1,6 @@
 // colors
 
-// $white: #ffffff;
+$white100: #ffffff;
 $black100: #000000;
 // $black2: #333333;
 // $gray: #858585;