From 17297b1abd1ef26c3ed59b5edc92f3d662cfc002 Mon Sep 17 00:00:00 2001
From: unknown <gabrielgms0@hotmail.com>
Date: Fri, 20 Jan 2023 17:32:45 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20adiciona=20estiliza=C3=A7=C3=A3o=20do?=
 =?UTF-8?q?=20header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/images/searchicon.svg          |   3 +
 .../src/components/Header/Header.module.scss  | 105 ++++++++++++++++++
 desafio-react-e-typescript/src/global.css     |  20 +++-
 3 files changed, 125 insertions(+), 3 deletions(-)
 create mode 100644 desafio-react-e-typescript/src/assets/images/searchicon.svg

diff --git a/desafio-react-e-typescript/src/assets/images/searchicon.svg b/desafio-react-e-typescript/src/assets/images/searchicon.svg
new file mode 100644
index 0000000..a4932a7
--- /dev/null
+++ b/desafio-react-e-typescript/src/assets/images/searchicon.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.2094 11.6187C14.0951 10.4091 14.6249 8.92334 14.6249 7.31267C14.6249 3.2807 11.3444 0.000183105 7.31245 0.000183105C3.28048 0.000183105 0 3.2807 0 7.31267C0 11.3446 3.28052 14.6252 7.31248 14.6252C8.92315 14.6252 10.409 14.0953 11.6186 13.2095L16.4092 18.0001L18 16.4093C18 16.4092 13.2094 11.6187 13.2094 11.6187V11.6187ZM7.31248 12.3751C4.52086 12.3751 2.25001 10.1043 2.25001 7.31267C2.25001 4.52104 4.52086 2.25019 7.31248 2.25019C10.1041 2.25019 12.375 4.52104 12.375 7.31267C12.375 10.1043 10.1041 12.3751 7.31248 12.3751Z" fill="#303030"/>
+</svg>
diff --git a/desafio-react-e-typescript/src/components/Header/Header.module.scss b/desafio-react-e-typescript/src/components/Header/Header.module.scss
index e69de29..68a79fd 100644
--- a/desafio-react-e-typescript/src/components/Header/Header.module.scss
+++ b/desafio-react-e-typescript/src/components/Header/Header.module.scss
@@ -0,0 +1,105 @@
+.container-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: black;
+  width: 100%;
+  height: 76px;
+  padding: 24px 100px;
+
+  .container-logo {
+    button {
+      background: transparent;
+    }
+    .academy-logo {
+      width: 100%;
+      max-width: 136px;
+      height: 26px;
+      cursor: pointer;
+    }
+  }
+}
+
+.container-input {
+  width: 100%;
+  max-width: 264px;
+  display: flex;
+  position: relative;
+
+  input {
+    width: 100%;
+    height: 32px;
+    border: 2px solid #f2f2f2;
+    border-radius: 5px;
+    padding: 8px 10px 8px 16px;
+
+    &::placeholder {
+      color: #c6c6c6;
+    }
+  }
+
+  button {
+    position: absolute;
+    outline: 0;
+    width: 18px;
+    height: 18px;
+    right: 0;
+    background-color: transparent;
+    background-image: url(../../assets/images/searchicon.svg);
+    background-repeat: no-repeat;
+    margin: 8px 10px 8px 16px;
+    cursor: pointer;
+  }
+}
+
+.container-login-carrinho {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  button {
+    background-color: transparent;
+  }
+
+  a {
+    font-family: "Roboto", sans-serif;
+    font-size: 14px;
+    line-height: 16px;
+    text-transform: uppercase;
+    text-decoration: none;
+    color: #fff;
+    margin-right: 55px;
+  }
+
+  .carticon {
+    width: 100%;
+    max-width: 28px;
+    height: 28px;
+    cursor: pointer;
+  }
+}
+
+.container-bottom {
+  display: flex;
+  align-items: center;
+  background-color: black;
+  border-top: 1px solid #c4c4c4;
+  width: 100%;
+  height: 44px;
+
+  .container-bottom-menu {
+    width: 100%;
+    margin-left: 100px;
+
+    a {
+      text-decoration: none;
+      color: #fff;
+      font-family: "Roboto", sans-serif;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 16px;
+      text-transform: uppercase;
+      margin-right: 55px;
+    }
+  }
+}
diff --git a/desafio-react-e-typescript/src/global.css b/desafio-react-e-typescript/src/global.css
index ec2585e..9a42635 100644
--- a/desafio-react-e-typescript/src/global.css
+++ b/desafio-react-e-typescript/src/global.css
@@ -1,13 +1,27 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+button {
+  border: none;
+}