diff --git a/desafio-react-e-typescript/src/components/Header/HeaderDesktop.modules.scss b/desafio-react-e-typescript/src/components/Header/HeaderDesktop.modules.scss
index 220135b..43d9b34 100644
--- a/desafio-react-e-typescript/src/components/Header/HeaderDesktop.modules.scss
+++ b/desafio-react-e-typescript/src/components/Header/HeaderDesktop.modules.scss
@@ -9,11 +9,6 @@
.m3LogoWrapper {
display: flex;
align-items: center;
- // width: 11.5%;
- // min-width: 136px;
- // height: 50px;
- // top: 50%;
- // position: sticky;
.M3Logo {
width: 100%;
@@ -69,10 +64,6 @@
.CartIcon_Wrapper {
display: flex;
align-items: center;
- // width: 17%;
- // max-height: 54px;
- // top: 50%;
- // position: sticky;
.CartIcon {
width: 100%;
@@ -80,3 +71,22 @@
}
}
}
+
+.ModalWrapper {
+ padding: 14px 100px;
+ background: #000;
+ font-family: "Roboto", sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+
+ button {
+ margin-right: 53px;
+ background: #000;
+ border: none;
+ color: #fff;
+
+ cursor: pointer;
+ }
+}
diff --git a/desafio-react-e-typescript/src/components/Header/HeaderDesktop.tsx b/desafio-react-e-typescript/src/components/Header/HeaderDesktop.tsx
index 4d5b53c..8aef014 100644
--- a/desafio-react-e-typescript/src/components/Header/HeaderDesktop.tsx
+++ b/desafio-react-e-typescript/src/components/Header/HeaderDesktop.tsx
@@ -3,6 +3,8 @@ import LogoM3 from "../assets/imgs/SVGs/M3Logo_desktop.svg";
import CartIcon from "../assets/imgs/SVGs/CartIcon_desktop.svg";
import SearchIcon from "../assets/imgs/SVGs/search-icon-desktop.svg";
+import { ModalHeader } from "./ModalHeader";
+
import "./HeaderDesktop.modules.scss";
export const HeaderDesktop = () => {
@@ -32,6 +34,9 @@ export const HeaderDesktop = () => {
+
+
+
>
);
};
diff --git a/desafio-react-e-typescript/src/components/Header/HeaderMobile.modules.scss b/desafio-react-e-typescript/src/components/Header/HeaderMobile.modules.scss
index 0097f10..d99ca9e 100644
--- a/desafio-react-e-typescript/src/components/Header/HeaderMobile.modules.scss
+++ b/desafio-react-e-typescript/src/components/Header/HeaderMobile.modules.scss
@@ -11,7 +11,9 @@
}
.Search_Header_wrapper {
+ position: relative;
width: 100%;
+
.Search_Header {
width: 100%;
height: 36px;
@@ -19,5 +21,11 @@
border: 2px solid #f0f0f0;
border-radius: 5px;
}
+
+ .SearchIcon {
+ position: absolute;
+ top: 25%;
+ right: 8px;
+ }
}
}
diff --git a/desafio-react-e-typescript/src/components/Header/HeaderMobile.tsx b/desafio-react-e-typescript/src/components/Header/HeaderMobile.tsx
index 56592a1..bad30f6 100644
--- a/desafio-react-e-typescript/src/components/Header/HeaderMobile.tsx
+++ b/desafio-react-e-typescript/src/components/Header/HeaderMobile.tsx
@@ -2,6 +2,7 @@ import { NavLink } from "react-router-dom";
import LogoM3 from "../assets/imgs/SVGs/Logo-M3Academy_mobile.svg";
import CartIcon from "../assets/imgs/SVGs/minicart_mobile.svg";
import MenuHamburguer from "../assets/imgs/SVGs/MenuHamburguer.svg";
+import SearchIcon from "../assets/imgs/SVGs/search-icon-desktop.svg";
import "./HeaderMobile.modules.scss";
@@ -25,6 +26,9 @@ export const HeaderMobile = () => {
>
diff --git a/desafio-react-e-typescript/src/components/Header/ModalHeader.tsx b/desafio-react-e-typescript/src/components/Header/ModalHeader.tsx
new file mode 100644
index 0000000..deac66c
--- /dev/null
+++ b/desafio-react-e-typescript/src/components/Header/ModalHeader.tsx
@@ -0,0 +1,19 @@
+import { NavLink } from "react-router-dom";
+
+export const ModalHeader = () => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ >
+ );
+};