diff --git a/desafio-5/src/components/assets/icons/cart_desk_icon.svg b/desafio-5/src/components/assets/icons/cart_desk_icon.svg new file mode 100644 index 0000000..19dd15b --- /dev/null +++ b/desafio-5/src/components/assets/icons/cart_desk_icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/desafio-5/src/components/modules/header.module.scss b/desafio-5/src/components/modules/header.module.scss index 434a56a..8310ef6 100644 --- a/desafio-5/src/components/modules/header.module.scss +++ b/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%; } } } diff --git a/desafio-5/src/components/scripts/header.tsx b/desafio-5/src/components/scripts/header.tsx index d594c37..500c9f0 100644 --- a/desafio-5/src/components/scripts/header.tsx +++ b/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 = () =>{ -
- - +
diff --git a/desafio-5/src/components/utils/Variables.scss b/desafio-5/src/components/utils/Variables.scss index 285bd41..dc48dbb 100644 --- a/desafio-5/src/components/utils/Variables.scss +++ b/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;