From 06ced2e499dbf7d04f05740cbe9edb9b2cf3ab47 Mon Sep 17 00:00:00 2001
From: savio591 <savio591@hotmail.com>
Date: Thu, 11 Nov 2021 16:19:52 -0300
Subject: [PATCH 1/2] padding needing in the desktop view on searchbox Fixes #8
 | header: add placeholder on searchbox as in the image! Fixes #20

---
 src/components/Header/SearchBox.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/Header/SearchBox.tsx b/src/components/Header/SearchBox.tsx
index 245e795..5b48e7f 100644
--- a/src/components/Header/SearchBox.tsx
+++ b/src/components/Header/SearchBox.tsx
@@ -2,16 +2,21 @@ import { FaSearch } from 'react-icons/fa'
 
 export function SearchBox(): JSX.Element {
   return (
-    <div className="input-group">
+    <div className="input-group px-5">
       <div className="input-group-prepend">
         <span className="input-group-text h-100 bg-transparent border-0 fw-light">
           <FaSearch color="white" />
         </span>
       </div>
+      <label className="visually-hidden-focusable" htmlFor="search">
+        Pesquisar produtos
+      </label>
       <input
         type="text"
         className="form-control border-0 bg-transparent h-100"
         aria-label="search"
+        placeholder="Pesquisar produtos"
+        id="search"
       />
     </div>
   )

From 3ee18a5098d46dec18476b0c976fbd47ef52cd54 Mon Sep 17 00:00:00 2001
From: savio591 <savio591@hotmail.com>
Date: Thu, 11 Nov 2021 16:37:29 -0300
Subject: [PATCH 2/2] fix: header unfocusable Fixes #10

---
 src/components/Header/menu.module.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Header/menu.module.scss b/src/components/Header/menu.module.scss
index 8284d15..f50d71f 100644
--- a/src/components/Header/menu.module.scss
+++ b/src/components/Header/menu.module.scss
@@ -5,6 +5,7 @@ header.header {
   max-height: header-size-height(mobile);
   height: header-size-height(mobile);
   backdrop-filter: blur(4px);
+  z-index: 1;
 
   @media (min-width: map.get($grid-breakpoints, 'sm')) {
     max-height: header-size-height(desktop);