From c0e4d48fa3ca80fa4d65ba1ea6b6df184fcce66d Mon Sep 17 00:00:00 2001 From: Andrea Matsunaga Date: Tue, 17 Jan 2023 15:47:34 -0300 Subject: [PATCH] =?UTF-8?q?feat(header):=20aplica=20hover=20nos=20=C3=ADco?= =?UTF-8?q?nes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LoginButton/LoginButton.module.scss | 6 +++++- src/components/Header/Logo/Logo.module.scss | 4 ++++ src/components/Header/Logo/Logo.tsx | 6 +++--- .../Header/MenuButton/MenuButton.module.scss | 4 ++-- .../Header/MenuButton/MenuButton.tsx | 6 ++---- .../Header/Minicart/Minicart.module.scss | 4 ++++ src/components/Header/Minicart/Minicart.tsx | 2 +- .../{ => Minicart}/assets/cart-icon.svg | 0 .../Header/Searchbox/Searchbox.module.scss | 19 ++++++++++--------- src/components/Header/Searchbox/Searchbox.tsx | 2 +- 10 files changed, 32 insertions(+), 21 deletions(-) rename src/components/Header/{ => Minicart}/assets/cart-icon.svg (100%) diff --git a/src/components/Header/LoginButton/LoginButton.module.scss b/src/components/Header/LoginButton/LoginButton.module.scss index a7ae6c4..67f07bc 100644 --- a/src/components/Header/LoginButton/LoginButton.module.scss +++ b/src/components/Header/LoginButton/LoginButton.module.scss @@ -4,10 +4,14 @@ font-weight: 400; font-size: 14px; line-height: 16px; - text-transform: uppercase; color: #ffffff; + text-transform: uppercase; text-decoration: none; + &:hover { + filter: brightness(0.5); + } + @media screen and (width >= 2500px) { font-size: 28px; line-height: 33px; diff --git a/src/components/Header/Logo/Logo.module.scss b/src/components/Header/Logo/Logo.module.scss index 121ff35..a34dbce 100644 --- a/src/components/Header/Logo/Logo.module.scss +++ b/src/components/Header/Logo/Logo.module.scss @@ -4,6 +4,10 @@ height: 25.86px; display: block; + &:hover { + filter: brightness(0.8); + } + @media screen and (width >= 2500px) { width: 265.62px; height: 50.5px; diff --git a/src/components/Header/Logo/Logo.tsx b/src/components/Header/Logo/Logo.tsx index 7bedfa1..71403a8 100644 --- a/src/components/Header/Logo/Logo.tsx +++ b/src/components/Header/Logo/Logo.tsx @@ -1,14 +1,14 @@ import React from "react"; import { Link } from "react-router-dom"; -import styles from "./Logo.module.scss"; - import m3Logo from "../assets/m3-logo.svg"; +import styles from "./Logo.module.scss"; + const Logo = () => { return (
- + Logo da M3
diff --git a/src/components/Header/MenuButton/MenuButton.module.scss b/src/components/Header/MenuButton/MenuButton.module.scss index 569b1f0..136de8e 100644 --- a/src/components/Header/MenuButton/MenuButton.module.scss +++ b/src/components/Header/MenuButton/MenuButton.module.scss @@ -1,9 +1,9 @@ .open-menu { width: 28px; height: 22.5px; - background-color: transparent; - padding: 0; display: block; border: 0; outline: 0; + padding: 0; + background-color: transparent; } \ No newline at end of file diff --git a/src/components/Header/MenuButton/MenuButton.tsx b/src/components/Header/MenuButton/MenuButton.tsx index 43f8310..b5a17fb 100644 --- a/src/components/Header/MenuButton/MenuButton.tsx +++ b/src/components/Header/MenuButton/MenuButton.tsx @@ -1,11 +1,9 @@ import React, { useContext } from "react"; -import styles from "./MenuButton.module.scss"; - -import menuButton from "../assets/menu-icon.svg"; import { ModalContext } from "../../../contexts/ModalContext"; +import menuButton from "../assets/menu-icon.svg"; -// const openMenu = () => {}; +import styles from "./MenuButton.module.scss"; const MenuButton = () => { diff --git a/src/components/Header/Minicart/Minicart.module.scss b/src/components/Header/Minicart/Minicart.module.scss index 4183e1d..6872cce 100644 --- a/src/components/Header/Minicart/Minicart.module.scss +++ b/src/components/Header/Minicart/Minicart.module.scss @@ -4,6 +4,10 @@ height: 28px; display: block; + &:hover { + filter: brightness(0.5); + } + @media screen and (width >= 2500px) { width: 54.68px; height: 54.68px; diff --git a/src/components/Header/Minicart/Minicart.tsx b/src/components/Header/Minicart/Minicart.tsx index 73791ed..b2f3d50 100644 --- a/src/components/Header/Minicart/Minicart.tsx +++ b/src/components/Header/Minicart/Minicart.tsx @@ -3,7 +3,7 @@ import { Link } from "react-router-dom"; import styles from "./Minicart.module.scss"; -import minicart from "../assets/cart-icon.svg"; +import minicart from "./assets/cart-icon.svg"; const Minicart = () => { return ( diff --git a/src/components/Header/assets/cart-icon.svg b/src/components/Header/Minicart/assets/cart-icon.svg similarity index 100% rename from src/components/Header/assets/cart-icon.svg rename to src/components/Header/Minicart/assets/cart-icon.svg diff --git a/src/components/Header/Searchbox/Searchbox.module.scss b/src/components/Header/Searchbox/Searchbox.module.scss index 70649fa..68fa61a 100644 --- a/src/components/Header/Searchbox/Searchbox.module.scss +++ b/src/components/Header/Searchbox/Searchbox.module.scss @@ -10,17 +10,17 @@ border: 2px solid #f2f2f2; border-radius: 5px; outline: 0; + font-family: "Roboto"; font-style: normal; font-weight: 400; font-size: 14px; line-height: 16px; - color: #c6c6c6; // #000000? #c4c4c4? + color: #000000; @media screen and (width >= 2500px) { width: 67.26%; //515.62px; padding: 12px 16px; - font-size: 28px; line-height: 33px; } @@ -31,22 +31,23 @@ } &::placeholder { - color: #c4c4c4; // #c6c6c6; + color: #c4c4c4; } } button { - border: 0; - outline: 0; position: absolute; right: 12.78%; //46px; top: 8px; padding: 0; + border: 0; + outline: 0; background: transparent; + cursor: pointer; img { - height: 18px; width: 18px; + height: 18px; display: block; } @@ -58,8 +59,8 @@ } @media screen and (width <= 1024px) { - right: 1.61%; //16px; - top: 11px; - } + right: 1.61%; //16px; + top: 11px; + } } } diff --git a/src/components/Header/Searchbox/Searchbox.tsx b/src/components/Header/Searchbox/Searchbox.tsx index 18fef69..c6face4 100644 --- a/src/components/Header/Searchbox/Searchbox.tsx +++ b/src/components/Header/Searchbox/Searchbox.tsx @@ -1,9 +1,9 @@ import { Field, Form, Formik, FormikHelpers } from "formik"; + import SearchboxSchema from "../../../schema/SearchboxSchema"; import searchIcon from "../assets/search-icon.svg"; import styles from "./Searchbox.module.scss"; - interface FormValues { searchInput: string; }