feat(top-header):top-header desktop finalizado

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>

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%;
             }
         }
     }

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>

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;