From fa432c362ff9b68a7a00a58991ea4b007d25a5db Mon Sep 17 00:00:00 2001
From: Rallenson <Rallenson900@gmail.com>
Date: Fri, 6 Jan 2023 05:05:33 -0300
Subject: [PATCH] feat(top-header):top-header desktop finalizado

---
 .../assets/icons/cart_desk_icon.svg           | 12 +++++
 .../src/components/modules/header.module.scss | 54 ++++++++++++++-----
 desafio-5/src/components/scripts/header.tsx   |  9 ++--
 desafio-5/src/components/utils/Variables.scss |  1 +
 4 files changed, 59 insertions(+), 17 deletions(-)
 create mode 100644 desafio-5/src/components/assets/icons/cart_desk_icon.svg

diff --git a/desafio-5/src/components/assets/icons/cart_desk_icon.svg b/desafio-5/src/components/assets/icons/cart_desk_icon.svg
new file mode 100644
index 0000000..19dd15b
--- /dev/null
+++ b/desafio-5/src/components/assets/icons/cart_desk_icon.svg
@@ -0,0 +1,12 @@
+<svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3751_539)">
+<path d="M54.3344 7.95273C54.0351 7.57862 53.5819 7.36086 53.1027 7.36086H11.1231L9.9492 2.27412C9.78398 1.55848 9.14672 1.05151 8.41228 1.05151H1.57728C0.706248 1.05151 0 1.75776 0 2.6289C0 3.50004 0.706248 4.20619 1.57728 4.20619H7.15753L15.1259 38.7358C15.291 39.4515 15.9283 39.9585 16.6628 39.9585H48.2656C49.1367 39.9585 49.8428 39.2522 49.8428 38.3812C49.8428 37.51 49.1366 36.8039 48.2656 36.8039H17.9176L16.7044 31.5462H48.3709C49.1086 31.5462 49.7478 31.0348 49.9097 30.3151L54.6416 9.28438C54.7467 8.81682 54.6338 8.32694 54.3344 7.95273Z" fill="white"/>
+<path d="M23.1338 42.0615C19.9449 42.0615 17.3503 44.6559 17.3503 47.845C17.3503 51.0341 19.9448 53.6285 23.1338 53.6285C26.3228 53.6285 28.9173 51.0341 28.9173 47.845C28.9173 44.6559 26.3229 42.0615 23.1338 42.0615Z" fill="white"/>
+<path d="M42.0614 42.0615C38.8725 42.0615 36.278 44.6559 36.278 47.845C36.278 51.0341 38.8724 53.6285 42.0614 53.6285C45.2504 53.6285 47.8449 51.0341 47.8449 47.845C47.8449 44.6559 45.2505 42.0615 42.0614 42.0615Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_3751_539">
+<rect width="54.68" height="54.68" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/desafio-5/src/components/modules/header.module.scss b/desafio-5/src/components/modules/header.module.scss
index 434a56a..8310ef6 100644
--- a/desafio-5/src/components/modules/header.module.scss
+++ b/desafio-5/src/components/modules/header.module.scss
@@ -6,30 +6,30 @@
     color: white;
     background: black;
     flex-direction: column;
-    align-items: flex-start;
     justify-content: space-between;
 
     // Top-header
 
     &-top {
         display: flex;
-        justify-content: space-around;
+        justify-content: space-between;
+        align-items: center;
+        padding: 22px 100px;
+        gap: 10px;
         width: 100%;
-        height: 76px !important;
-        height: 25.86px;
-        background: pink;
-
+        height: 76px;
+        border-bottom: 1px solid $-gray-300;
+        
     &-logo {
-        width: 10.63%;
-        margin: 25px 0;
+        width: 12.593%;
+        margin: 3px 0;
         img {
             width: 100%;
         }
     }
     &-Searchbox{
-        width: 20.63%;
-        height: 42.11%;
-        margin-top: 22px;
+        width: 24.445%;
+        height: 32px;
         position: relative;
         display: flex;
         align-items: center;
@@ -46,9 +46,37 @@
             top: 0;
             right: 0;
             margin: 7px 16px;
+            width: 6.82%;
+            height: 56.25%;
             img{
-                width: 18px;
-                height: 18px;
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+    &-menu{
+        margin: 3px 0;
+        display: flex;
+        gap: 55px;
+        width: 12.594%;
+        height: 90.35%;
+        order: 2;
+
+        &-login{
+            text-transform: uppercase;
+            color: $-white;
+            font-family: 'Roboto';
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 16px;
+
+        }
+
+        &-cart{
+            img{
+                width: 100%;
+                height: 100%;
             }
         }
     }
diff --git a/desafio-5/src/components/scripts/header.tsx b/desafio-5/src/components/scripts/header.tsx
index d594c37..500c9f0 100644
--- a/desafio-5/src/components/scripts/header.tsx
+++ b/desafio-5/src/components/scripts/header.tsx
@@ -3,6 +3,7 @@ import React, { useState, useEffect, useRef, useMemo, useCallback,useContext} fr
 import HeaderStyles from "../modules/header.module.scss"
 import Logo from '../assets/imgs/Logo.png';
 import Lupa from "../assets/icons/search_Icon_desk.svg";
+import Cart from "../assets/icons/cart_desk_icon.svg";
 
 const Header = () =>{
     return (
@@ -25,10 +26,10 @@ const Header = () =>{
                     </label>
                 </div>
                 
-                <div>
-                    <button>Entrar</button>
-                    <button>
-                        <img src="" alt="Carrinho_icon" />
+                <div className={HeaderStyles["Header_wrapper-top-menu"]}>
+                    <button className={HeaderStyles["Header_wrapper-top-menu-login"]}>Entrar</button>
+                    <button className={HeaderStyles["Header_wrapper-top-menu-cart"]}>
+                        <img src={Cart} alt="Carrinho_icon" />
                     </button>
                 </div>
             </div>
diff --git a/desafio-5/src/components/utils/Variables.scss b/desafio-5/src/components/utils/Variables.scss
index 285bd41..dc48dbb 100644
--- a/desafio-5/src/components/utils/Variables.scss
+++ b/desafio-5/src/components/utils/Variables.scss
@@ -5,6 +5,7 @@ $-gray: #D6D6D6;
 $-gray-light:#e5e5e5;
 $-gray-100: #F0F0F0;
 $-gray-200: #F2F2F2;
+$-gray-300:#C4C4C4;
 $-gray-400:#858585;
 $-gray-500:#333333;
 $-prisma: #FF5A5F;