feat(header):serachbox desktop responsiva

desafio-5/src/components/assets/icons/search_Icon_desk.svg

@@ -0,0 +1,10 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3751_533)">
+<path d="M25.7949 22.6886C27.5246 20.3265 28.5592 17.4252 28.5592 14.2799C28.5592 6.40637 22.1531 0.000244141 14.2796 0.000244141C6.40606 0.000244141 0 6.40637 0 14.2799C0 22.1534 6.40613 28.5596 14.2797 28.5596C17.4249 28.5596 20.3266 27.5248 22.6886 25.7951L32.0435 35.15L35.15 32.0436C35.15 32.0435 25.7949 22.6886 25.7949 22.6886ZM14.2797 24.1658C8.82824 24.1658 4.39377 19.7313 4.39377 14.2799C4.39377 8.82848 8.82824 4.39401 14.2797 4.39401C19.7311 4.39401 24.1655 8.82848 24.1655 14.2799C24.1655 19.7313 19.731 24.1658 14.2797 24.1658Z" fill="#292929"/>
+</g>
+<defs>
+<clipPath id="clip0_3751_533">
+<rect width="35.15" height="35.15" rx="5" fill="white"/>
+</clipPath>
+</defs>
+</svg>

desafio-5/src/components/common/global.scss

@@ -1,14 +1,21 @@
 
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    margin: 0;
+    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;
+    -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{
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    outline: none;
+    appearance: none;
+}

desafio-5/src/components/modules/header.module.scss

@@ -9,6 +9,8 @@
     align-items: flex-start;
     justify-content: space-between;
 
+    // Top-header
+
     &-top {
         display: flex;
         justify-content: space-around;
@@ -18,15 +20,43 @@
         background: pink;
 
     &-logo {
-        width: 10.27%;
+        width: 10.63%;
         margin: 25px 0;
         img {
             width: 100%;
         }
+    }
+    &-Searchbox{
+        width: 20.63%;
+        height: 42.11%;
+        margin-top: 22px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        input{
+            width: 100%;
+            height: 100%;
+            padding: 7px 36px 7px 16px;
+            background: $-white;
+            border: 2px solid $-gray-200;
+            border-radius: 5px;
+        }
+        button{
+            position: absolute;
+            top: 0;
+            right: 0;
+            margin: 7px 16px;
+            img{
+                width: 18px;
+                height: 18px;
+            }
         }
     }
+}
+
+    //bottom-header
 
     &-bottom {
         background: orangered;
     }
-    }
+}

desafio-5/src/components/scripts/header.tsx

@@ -2,6 +2,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";
 
 const Header = () =>{
     return (
@@ -13,15 +14,17 @@ const Header = () =>{
                         <img src={Logo} alt="Logo" />
                     </a>
                 </div>
-                <div>
+
+                <div className={HeaderStyles["Header_wrapper-top-Searchbox"]}>
                     <input name="search" type="text" placeholder="Buscar">
                     </input>
                     <label htmlFor="search">
                         <button>
-                            <img src="" alt="Lupa" />
+                            <img src={Lupa} alt="Lupa" />
                         </button>
                     </label>
                 </div>
+                
                 <div>
                     <button>Entrar</button>
                     <button>

desafio-5/src/components/utils/Variables.scss

@@ -2,7 +2,9 @@
 $-black : #000000;
 $-white:#ffffff;
 $-gray: #D6D6D6;
-$-gray-100:#e5e5e5;
+$-gray-light:#e5e5e5;
+$-gray-100: #F0F0F0;
+$-gray-200: #F2F2F2;
 $-gray-400:#858585;
 $-gray-500:#333333;
 $-prisma: #FF5A5F;