diff --git a/desafio-react-e-typescript/src/App.tsx b/desafio-react-e-typescript/src/App.tsx
index 4ccd2c9..3f71991 100644
--- a/desafio-react-e-typescript/src/App.tsx
+++ b/desafio-react-e-typescript/src/App.tsx
@@ -34,7 +34,6 @@ export const App = () => {
(
<>
{window.innerWidth > 1024 ? : }
-
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 87eac18..220135b 100644
--- a/desafio-react-e-typescript/src/components/Header/HeaderDesktop.modules.scss
+++ b/desafio-react-e-typescript/src/components/Header/HeaderDesktop.modules.scss
@@ -4,35 +4,79 @@
padding: 22px 100px;
background: #000;
font-family: "Roboto", sans-serif;
+ border-bottom: 1px solid #c4c4c4;
.m3LogoWrapper {
- // width: 10.6%;
+ display: flex;
+ align-items: center;
+ // width: 11.5%;
+ // min-width: 136px;
+ // height: 50px;
+ // top: 50%;
+ // position: sticky;
+
+ .M3Logo {
+ width: 100%;
+ }
}
.Search_Header_wrapper {
+ position: relative;
display: flex;
align-items: center;
- width: 100%;
+ width: 24.5%;
max-width: 515px;
+
.Search_Header {
width: 100%;
- height: 57px;
+ height: 16px;
+ padding: 8px;
border: 2px solid #f0f0f0;
border-radius: 5px;
+
+ @media (min-width: 2500px) {
+ height: 33px;
+ padding: 12px;
+ }
+ }
+
+ .SearchIcon {
+ position: absolute;
+ top: 25%;
+ right: 16px;
}
}
.Headerlinks {
display: flex;
gap: 55px;
+
.EnterLink {
display: flex;
align-items: center;
font-style: normal;
font-weight: 400;
- font-size: 28px;
- line-height: 33px;
+ font-size: 14px;
+ line-height: 16px;
color: #fff;
text-decoration: none;
+
+ @media (min-width: 2500px) {
+ font-size: 28px;
+ line-height: 33px;
+ }
+ }
+
+ .CartIcon_Wrapper {
+ display: flex;
+ align-items: center;
+ // width: 17%;
+ // max-height: 54px;
+ // top: 50%;
+ // position: sticky;
+
+ .CartIcon {
+ width: 100%;
+ }
}
}
}
diff --git a/desafio-react-e-typescript/src/components/Header/HeaderDesktop.tsx b/desafio-react-e-typescript/src/components/Header/HeaderDesktop.tsx
index 8f9a5e7..4d5b53c 100644
--- a/desafio-react-e-typescript/src/components/Header/HeaderDesktop.tsx
+++ b/desafio-react-e-typescript/src/components/Header/HeaderDesktop.tsx
@@ -1,6 +1,7 @@
import { NavLink } from "react-router-dom";
-import LogoM3 from "../assets/imgs/SVGs/Logo-M3Academy_desktop.svg";
-import CartIcon from "../assets/imgs/SVGs/minicart_desktop.svg";
+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 "./HeaderDesktop.modules.scss";
@@ -15,12 +16,20 @@ export const HeaderDesktop = () => {
-
ENTRAR
-
- 
+
+ {" "}
+ ENTRAR{" "}
+
+
+
+
+