From bf62ae323cacf2a54c01c4a871c9deb987ebadec Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Fri, 13 Jan 2023 16:56:01 -0300 Subject: [PATCH] feat: scss footer desktop --- desafio-react-e-typescript/src/App.scss | 6 +- .../src/components/Footer/BottomFooter.tsx | 27 +++---- .../components/Footer/FooterMain.modules.scss | 73 +++++++++++++++++-- .../src/components/Footer/wpp.tsx | 5 +- .../Header/HeaderDesktop.modules.scss | 22 +++--- .../src/components/Header/HeaderDesktop.tsx | 12 +-- .../Header/HeaderMobile.modules.scss | 23 +++--- .../src/components/Header/HeaderMobile.tsx | 4 - .../src/components/Navegation.modules.scss | 6 +- .../src/pages/Contact.modules.scss | 2 +- 10 files changed, 118 insertions(+), 62 deletions(-) diff --git a/desafio-react-e-typescript/src/App.scss b/desafio-react-e-typescript/src/App.scss index d2a4237..1715f94 100644 --- a/desafio-react-e-typescript/src/App.scss +++ b/desafio-react-e-typescript/src/App.scss @@ -24,11 +24,11 @@ body { width: 100%; @media (min-width: 1025px) { - padding: 20px 100px 20px 30px; + padding: 20px 100px 20px 0px; } h2 { - margin: 0 30px; + margin: 0; font-family: $fontFamily; font-style: normal; font-weight: 700; @@ -43,7 +43,7 @@ body { } .MainText { - margin: 12px 0 0 25px; + margin-top: 12px; font-family: $fontFamily; font-style: normal; font-weight: 400; diff --git a/desafio-react-e-typescript/src/components/Footer/BottomFooter.tsx b/desafio-react-e-typescript/src/components/Footer/BottomFooter.tsx index a8d377a..b53f679 100644 --- a/desafio-react-e-typescript/src/components/Footer/BottomFooter.tsx +++ b/desafio-react-e-typescript/src/components/Footer/BottomFooter.tsx @@ -20,23 +20,24 @@ export const BottomFooter = () => {
- Master-icon - Visa-icon - Diners-icon - Elo-icon - Hiper-icon - Pagseguro-icon - Boleto-icon - / - vtex-icon + Master-icon + Visa-icon + Diners-icon + Elo-icon + Hiper-icon + Pagseguro-icon + Boleto-icon + + + vtex-icon
- Powered by - Vtex-logo + Powered by + Vtex-logo - Developed by - M3-logo + Developed by + M3-logo
diff --git a/desafio-react-e-typescript/src/components/Footer/FooterMain.modules.scss b/desafio-react-e-typescript/src/components/Footer/FooterMain.modules.scss index 602c316..2059091 100644 --- a/desafio-react-e-typescript/src/components/Footer/FooterMain.modules.scss +++ b/desafio-react-e-typescript/src/components/Footer/FooterMain.modules.scss @@ -8,13 +8,13 @@ display: flex; flex-direction: column; border-bottom: 1px solid $color-black; - padding: 16px 0; + padding: 16px 31.485%; .Newsletter_wrapper { display: flex; flex-direction: column; flex-wrap: wrap; - align-self: center; + // align-self: center; .News_title { font-family: $fontFamily; @@ -141,6 +141,19 @@ top: 50px; } + .button_wrapper { + position: relative; + } + .button_wrapper::after { + content: " "; + width: 13px; + height: 7px; + top: 33%; + right: 31%; + position: absolute; + background-image: url("../assets/imgs/SVGs/Vector.svg"); + } + .button { display: flex; background-image: url("../assets/imgs/SVGs/Vector.svg"); @@ -159,29 +172,50 @@ } .corporateName { - max-width: 234px; + display: flex; + align-self: center; + width: 234px; + height: 24px; font-family: $fontFamily; font-style: normal; font-weight: 400; font-size: 10px; line-height: 12px; - text-transform: capitalize; color: $color-white; } .Payment_methods { + align-items: center; display: flex; gap: 12px; + + .carts_icons { + width: 36px; + height: 20px; + } + + .div_icons { + content: ""; + border: 1px solid $color-gray; + transform: rotate(90deg); + width: 24px; + height: 0px; + } + + .vtex_icon { + width: 54.61px; + height: 34px; + } } .Authors { display: flex; gap: 13px; - .Authors_title { + .Powered_by { display: flex; align-items: center; - min-width: 61px; + width: 53px; font-family: $fontFamily; font-style: normal; font-weight: 400; @@ -190,6 +224,33 @@ text-transform: capitalize; color: $color-white; } + + .Developed_by { + display: flex; + align-items: center; + width: 61px; + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + color: $color-white; + } + + .vtex_logo { + display: flex; + align-self: center; + width: 44.92px; + height: 16px; + } + + .m3_logo { + display: flex; + align-self: center; + width: 28.66px; + height: 15.65px; + } } } } diff --git a/desafio-react-e-typescript/src/components/Footer/wpp.tsx b/desafio-react-e-typescript/src/components/Footer/wpp.tsx index 84f68ee..0a23738 100644 --- a/desafio-react-e-typescript/src/components/Footer/wpp.tsx +++ b/desafio-react-e-typescript/src/components/Footer/wpp.tsx @@ -1,5 +1,4 @@ import Wpp from "../assets/imgs/SVGs/whatsapp.svg"; -import Vector from "../assets/imgs/SVGs/Vector.svg"; import Ellipse from "../assets/imgs/SVGs/Ellipse.svg"; export const WppIcon = () => { @@ -7,7 +6,9 @@ export const WppIcon = () => { <>
Wpp-logo - Ellipse-logo +
+ Ellipse-logo +
); 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 5848585..4053ea2 100644 --- a/desafio-react-e-typescript/src/components/Header/HeaderDesktop.modules.scss +++ b/desafio-react-e-typescript/src/components/Header/HeaderDesktop.modules.scss @@ -25,6 +25,7 @@ max-width: 515px; .Search_Header { + position: relative; width: 100%; height: 16px; padding: 8px; @@ -37,18 +38,15 @@ padding: 12px; } } - - .InconWrapper { - position: relative; - height: 18px; - top: 0%; - right: 32px; - cursor: pointer; - } - - .SearchIcon { - position: absolute; - } + } + .Search_Header_wrapper::after { + position: absolute; + content: ""; + width: 18px; + height: 18px; + right: 16px; + background-image: url("../assets/imgs/SVGs/search-icon-desktop.svg"); + cursor: pointer; } .Headerlinks { display: flex; diff --git a/desafio-react-e-typescript/src/components/Header/HeaderDesktop.tsx b/desafio-react-e-typescript/src/components/Header/HeaderDesktop.tsx index 3291d4c..c29e19e 100644 --- a/desafio-react-e-typescript/src/components/Header/HeaderDesktop.tsx +++ b/desafio-react-e-typescript/src/components/Header/HeaderDesktop.tsx @@ -3,7 +3,6 @@ import { NavLink } from "react-router-dom"; 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 { ContentMenuHeader } from "./ContentMenuHeader"; @@ -24,16 +23,7 @@ export const HeaderDesktop = () => { className="Search_Header" placeholder="Buscar..." /> - +
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 12b2493..23e1adf 100644 --- a/desafio-react-e-typescript/src/components/Header/HeaderMobile.modules.scss +++ b/desafio-react-e-typescript/src/components/Header/HeaderMobile.modules.scss @@ -94,18 +94,23 @@ width: 100%; .Search_Header { - width: 100%; - height: 36px; - background: $color-white; + width: 96.372%; border: 2px solid $color-white-100; border-radius: 5px; - color: $color-gray; - } + padding: 10px 16px; - .SearchIcon { - position: absolute; - top: 25%; - right: 8px; + &::placeholder { + color: $color-gray; + } } } + .Search_Header_wrapper::after { + position: absolute; + content: ""; + width: 18px; + height: 18px; + right: 16px; + background-image: url("../assets/imgs/SVGs/search-icon-desktop.svg"); + cursor: pointer; + } } diff --git a/desafio-react-e-typescript/src/components/Header/HeaderMobile.tsx b/desafio-react-e-typescript/src/components/Header/HeaderMobile.tsx index 0f3e88a..fdcf93e 100644 --- a/desafio-react-e-typescript/src/components/Header/HeaderMobile.tsx +++ b/desafio-react-e-typescript/src/components/Header/HeaderMobile.tsx @@ -4,7 +4,6 @@ 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 { Modal } from "../Modal"; import "./HeaderMobile.modules.scss"; @@ -32,9 +31,6 @@ export const HeaderMobile = () => {
- - Search-Icon -
diff --git a/desafio-react-e-typescript/src/components/Navegation.modules.scss b/desafio-react-e-typescript/src/components/Navegation.modules.scss index ea803ae..bcb29ee 100644 --- a/desafio-react-e-typescript/src/components/Navegation.modules.scss +++ b/desafio-react-e-typescript/src/components/Navegation.modules.scss @@ -10,14 +10,17 @@ } ul { + width: 94.379%; list-style: none; padding: 0; + margin: 0 !important; .Title_links { a { display: flex; - width: 97%; padding: 26px 16px; + margin: 0 !important; + list-style: none; @media (max-width: 1024px) { padding: 10px 16px; @@ -32,6 +35,7 @@ .active { background: $color-black; color: $color-white; + margin: 0 !important; } a { diff --git a/desafio-react-e-typescript/src/pages/Contact.modules.scss b/desafio-react-e-typescript/src/pages/Contact.modules.scss index 192958f..1ec5ef0 100644 --- a/desafio-react-e-typescript/src/pages/Contact.modules.scss +++ b/desafio-react-e-typescript/src/pages/Contact.modules.scss @@ -12,7 +12,7 @@ form { @media (min-width: 1025px) { width: 100%; - padding: 12px 30px; + padding: 12px 0px; } input {