From 7913d9061fc2dd21c343d99f062df415abce9e26 Mon Sep 17 00:00:00 2001 From: Thiago Bronisio <86695254+ThiagoBronisio@users.noreply.github.com> Date: Sat, 7 Jan 2023 23:17:55 -0300 Subject: [PATCH] =?UTF-8?q?fix:=20corre=C3=A7=C3=A3o=20menu=20mobile,=20fo?= =?UTF-8?q?oter=20links?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 21 +++++ package.json | 3 + src/components/Footer/Footer.tsx | 6 +- .../Footer/LinksFooter/Links/Link.tsx | 7 +- .../LinksFooter/LinksFooter.module.scss | 16 ++-- .../Footer/LinksFooter/LinksFooter.tsx | 55 +++++-------- .../Footer/Newsletter/Newsletter.tsx | 7 +- src/components/Header/Header.module.scss | 14 ++-- src/components/Header/Header.tsx | 18 +++-- .../InputMenuMobile/InputMenuMobile.tsx | 6 +- .../inputMenuMobile.module.scss | 6 +- .../MenuHamburguer/MenuHamburguer.module.scss | 77 ++++++++++++++++--- .../Header/MenuHamburguer/MenuHamburguer.tsx | 61 +++++++-------- 13 files changed, 180 insertions(+), 117 deletions(-) diff --git a/package-lock.json b/package-lock.json index 14ee22f..ed7cc4b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,9 @@ "typescript": "^4.9.4", "web-vitals": "^2.1.4", "yup": "^0.32.11" + }, + "devDependencies": { + "@types/react-modal": "^3.13.1" } }, "node_modules/@adobe/css-tools": { @@ -3916,6 +3919,15 @@ "@types/react": "*" } }, + "node_modules/@types/react-modal": { + "version": "3.13.1", + "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.13.1.tgz", + "integrity": "sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -21203,6 +21215,15 @@ "@types/react": "*" } }, + "@types/react-modal": { + "version": "3.13.1", + "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.13.1.tgz", + "integrity": "sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", diff --git a/package.json b/package.json index f025231..d132605 100644 --- a/package.json +++ b/package.json @@ -43,5 +43,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "@types/react-modal": "^3.13.1" } } diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index dec8e44..20ec37a 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -3,7 +3,7 @@ import { LinksFooter } from "./LinksFooter/LinksFooter" import { FooterSelosDev } from "./FooterSelosDev/FooterSelosDev" import { Newsletter } from "./Newsletter/Newsletter" -export function Footer() { +const Footer = () => { return ( ) -} \ No newline at end of file +} + +export { Footer }; \ No newline at end of file diff --git a/src/components/Footer/LinksFooter/Links/Link.tsx b/src/components/Footer/LinksFooter/Links/Link.tsx index 594d4d8..d57b0d6 100644 --- a/src/components/Footer/LinksFooter/Links/Link.tsx +++ b/src/components/Footer/LinksFooter/Links/Link.tsx @@ -1,15 +1,16 @@ import React from "react"; interface linkProps { - text: string; + children?: React.ReactNode; + text?: string; href: string; } export const Link = (props: linkProps) => { - const { href, text } = props; + const { href, text, children } = props; - return
  • {text}
    • + return
  • {text}{children}
    • } export default Link; \ No newline at end of file diff --git a/src/components/Footer/LinksFooter/LinksFooter.module.scss b/src/components/Footer/LinksFooter/LinksFooter.module.scss index 4e1ae69..15f330e 100644 --- a/src/components/Footer/LinksFooter/LinksFooter.module.scss +++ b/src/components/Footer/LinksFooter/LinksFooter.module.scss @@ -27,7 +27,7 @@ margin-bottom: 12px; text-transform: uppercase; - @media (max-width: 1025px) { + @media (max-width: 1024px) { display: flex; justify-content: space-between; } @@ -258,7 +258,7 @@ width: 10.16px; height: 19.62px; position: absolute; - left: 9px; + left: 10px; top: 4px; @media (min-width: 2500px) { @@ -273,8 +273,8 @@ width: 19.65px; height: 19.62px; position: absolute; - left: 5px; - top: 4px; + left: 5.5px; + top: 4.5px; @media (min-width: 2500px) { width: 39.29px; @@ -303,8 +303,8 @@ width: 22.39px; height: 15.64px; position: absolute; - left: 3.5px; - top: 6.3px; + left: 4.3px; + top: 7.3px; @media (min-width: 2500px) { width: 44.77px; @@ -318,8 +318,8 @@ width: 15.64px; height: 15.64px; position: absolute; - left: 7px; - top: 5px; + left: 7.5px; + top: 6px; @media (min-width: 2500px) { width: 31.35px; diff --git a/src/components/Footer/LinksFooter/LinksFooter.tsx b/src/components/Footer/LinksFooter/LinksFooter.tsx index 076018d..acf4acb 100644 --- a/src/components/Footer/LinksFooter/LinksFooter.tsx +++ b/src/components/Footer/LinksFooter/LinksFooter.tsx @@ -9,7 +9,7 @@ import { ReactComponent as Linkedlin } from "./assets/linkedlin.svg" import titleLinks from "./assets/titleLinks.svg" import { Link } from "./Links/Link" -export const LinksFooter = () => { +const LinksFooter = () => { const [openInstitucional, setOpenInstitucional] = useState(false); const [openDuvidas, setOpenDuvidas] = useState(false); @@ -117,45 +117,26 @@ export const LinksFooter = () => {
    @@ -166,4 +147,4 @@ export const LinksFooter = () => { ) } -export default LinksFooter; \ No newline at end of file +export { LinksFooter }; \ No newline at end of file diff --git a/src/components/Footer/Newsletter/Newsletter.tsx b/src/components/Footer/Newsletter/Newsletter.tsx index f05657a..8b18215 100644 --- a/src/components/Footer/Newsletter/Newsletter.tsx +++ b/src/components/Footer/Newsletter/Newsletter.tsx @@ -1,10 +1,9 @@ import React from "react" import styleNewsletter from "./Newsletter.module.scss" -export const Newsletter = () => { +const Newsletter = () => { return (
    -

    ASSINE NOSSA NEWSLETTER

    @@ -16,8 +15,8 @@ export const Newsletter = () => {
    - + ) } -export default Newsletter \ No newline at end of file +export { Newsletter }; \ No newline at end of file diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss index 2d23124..a944cb5 100644 --- a/src/components/Header/Header.module.scss +++ b/src/components/Header/Header.module.scss @@ -12,7 +12,7 @@ padding: 25px 16px; } - &__container-logo { + &__logo { width: 136px; height: 25.86px; @@ -34,7 +34,7 @@ } } - &__container-input-busca { + &__input-busca { position: relative; width: 24.452%; @media (max-width: 1024px) { @@ -45,7 +45,7 @@ width: 22.421%; } - .input-busca { + .input { width: 100%; height: 32px; padding: 8px 44px 8px 16px; @@ -83,7 +83,7 @@ right: 17px; cursor: pointer; - @media (max-width: 1025px) { + @media (max-width: 1024px) { display: none; } @@ -106,7 +106,7 @@ } } - &__container-login-cart { + &__login-cart { display: flex; p { @@ -201,10 +201,10 @@ } } - .container-nav { + &__navigation { background-color: var(--black); padding: 14px 100.32px 14px 100px; - @media (max-width: 1025px) { + @media (max-width: 1024px) { display: none; } diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 835e091..d409b31 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,12 +1,12 @@ import React from "react"; import { InputMenuMobile } from "./InputMenuMobile/InputMenuMobile" -import { MenuHamburguer } from "./MenuHamburguer/MenuHamburguer" +import { MenuHamburguer } from "./MenuHamburguer/MenuHamburguer"; import styleHeader from "./Header.module.scss" import logo from "./assets/logo-m3.png" import { ReactComponent as Cart } from "./assets/cart.svg" import { ReactComponent as Search } from "./assets/search.svg" -export function Header() { +const Header = () => { return (
    @@ -15,15 +15,15 @@ export function Header() { -
    + -
    +
    -
    +

    ENTRAR

    ) -} \ No newline at end of file +} + +export { Header }; \ No newline at end of file diff --git a/src/components/Header/InputMenuMobile/InputMenuMobile.tsx b/src/components/Header/InputMenuMobile/InputMenuMobile.tsx index 99b8035..959db66 100644 --- a/src/components/Header/InputMenuMobile/InputMenuMobile.tsx +++ b/src/components/Header/InputMenuMobile/InputMenuMobile.tsx @@ -2,7 +2,7 @@ import React from "react"; import styleInput from "./inputMenuMobile.module.scss" import { ReactComponent as Search } from "../assets/search.svg" -export const InputMenuMobile = () => { +const InputMenuMobile = () => { return (
    @@ -15,11 +15,11 @@ export const InputMenuMobile = () => {
    ) } -export default InputMenuMobile; \ No newline at end of file +export { InputMenuMobile }; diff --git a/src/components/Header/InputMenuMobile/inputMenuMobile.module.scss b/src/components/Header/InputMenuMobile/inputMenuMobile.module.scss index dc9311f..ce9a9b1 100644 --- a/src/components/Header/InputMenuMobile/inputMenuMobile.module.scss +++ b/src/components/Header/InputMenuMobile/inputMenuMobile.module.scss @@ -28,16 +28,14 @@ &__button { position: absolute; - z-index: 10; border: none; background: transparent; - outline: none; top: 8px; - right: 30px; + right: 31.2px; width: 18px; height: 18px; - &__svg { + .svg { width: 18px; height: 18px; color: var(--black-200); diff --git a/src/components/Header/MenuHamburguer/MenuHamburguer.module.scss b/src/components/Header/MenuHamburguer/MenuHamburguer.module.scss index 60ff545..aaedb07 100644 --- a/src/components/Header/MenuHamburguer/MenuHamburguer.module.scss +++ b/src/components/Header/MenuHamburguer/MenuHamburguer.module.scss @@ -1,18 +1,73 @@ .container { &__wrapper { - &__btnHamburguer { - @media (min-width: 1025px) { - display: none; - } - button { - background: transparent; - border: none; + width: 28px; + height: 22.5px; - img { - width: 28px; - height: 22.5px; - } + @media (min-width: 1025px) { + display: none; + } + + .button { + width: 100%; + height: 100%; + background: transparent; + border: none; + + .svg { + width: 100%; + height: 100%; } } } } + +.container-modal { + width: 100%; + height: 585px; + background: white; + + &__top-modal { + display: flex; + justify-content: space-between; + background: var(--black); + padding: 31px 16px; + + a { + font-weight: 400; + font-size: 14px; + line-height: 16px; + font-family: var(--font-roboto); + color: var(--white); + text-decoration: none; + text-transform: uppercase; + } + } + + &__list { + padding: 31px 16px; + list-style: none; + + li:nth-child(2) { + margin: 12px 0; + } + + a { + text-decoration: none; + color: var(--gray-100); + font-family: var(--font-roboto); + font-weight: 500; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + } + } +} +.outside-modal { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + padding-right: 36px; + background: rgba(69, 69, 69, 0.7); +} diff --git a/src/components/Header/MenuHamburguer/MenuHamburguer.tsx b/src/components/Header/MenuHamburguer/MenuHamburguer.tsx index 1c7dd55..9a87f05 100644 --- a/src/components/Header/MenuHamburguer/MenuHamburguer.tsx +++ b/src/components/Header/MenuHamburguer/MenuHamburguer.tsx @@ -1,50 +1,51 @@ import React, { useState } from "react"; -import styleMenu from "./MenuHamburguer.module.scss" +import styleModal from "./MenuHamburguer.module.scss"; +import Modal from "react-modal" -import hamburguer from "../assets/hamburguer.svg" -import closeMenu from "../assets/close.svg" +import { ReactComponent as Close } from "../assets/close.svg" +import { ReactComponent as Hamburguer } from "../assets/hamburguer.svg" -export const MenuHamburguer = () => { +const MenuHamburguer = () => { - const [menuOpen, setMenuOpen] = useState(false); + const [modalIsOpen, setIsOpen] = useState(false); - const handleMenuHamburguer = (state: boolean) => { - setMenuOpen(!state) - - }; + function openModal() { + setIsOpen(true) + } + function closeModal() { + setIsOpen(false) + } return ( <> - -
    -
    + {modalIsOpen && + - {menuOpen && - <> -
    +
    Entrar - +
    - - - + + } - ) } -export default MenuHamburguer; \ No newline at end of file +export { MenuHamburguer }; \ No newline at end of file