From c5b1eb3d0e3149f5fd4ff2e94bae7328755fa80a Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Wed, 11 Jan 2023 17:34:30 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20adi=C3=A7=C3=A3o=20scss=20main-containe?= =?UTF-8?q?r=20desktop=20e=20mobile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- desafio-react-e-typescript/src/App.scss | 39 ++++++++++++++ .../src/components/ContactForm.tsx | 2 - .../Container-menu/TextContainer.tsx | 35 +++++++++++++ .../Container-menu/TopContainer.modules.scss | 7 ++- .../Header/HeaderDesktop.modules.scss | 4 +- .../Header/HeaderMobile.modules.scss | 4 +- .../src/components/Navegation.modules.scss | 29 +++++++---- .../src/components/Navegation.tsx | 42 +++------------ .../src/components/Variables.scss | 8 ++- .../src/pages/About.tsx | 11 +++- .../src/pages/Contact.modules.scss | 51 +++++++++++++++++-- .../src/pages/Contact.tsx | 5 +- .../src/pages/Delivery.tsx | 11 +++- .../src/pages/Payments.tsx | 11 +++- .../src/pages/Privacy.tsx | 11 +++- .../src/pages/Refund.tsx | 11 +++- 16 files changed, 216 insertions(+), 65 deletions(-) create mode 100644 desafio-react-e-typescript/src/components/Container-menu/TextContainer.tsx diff --git a/desafio-react-e-typescript/src/App.scss b/desafio-react-e-typescript/src/App.scss index 189df68..1db0b5d 100644 --- a/desafio-react-e-typescript/src/App.scss +++ b/desafio-react-e-typescript/src/App.scss @@ -1,3 +1,5 @@ +@import "./components/Variables.scss"; + body { margin: 0; } @@ -16,6 +18,43 @@ body { display: flex; max-width: 100%; + .Main_textArea { + width: 100%; + + @media (min-width: 1025px) { + padding: 20px 100px 20px 30px; + } + + h2 { + margin: 0 30px; + font-family: $fontFamily; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 28px; + color: $color-gray-800; + + @media (max-width: 1024px) { + text-align: center; + margin-top: 20px; + } + } + + .MainText { + margin: 12px 0 0 25px; + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 13px; + line-height: 15px; + color: $color-gray-500; + + p { + margin: 20px 0; + } + } + } + @media (max-width: 1024px) { flex-direction: column; } diff --git a/desafio-react-e-typescript/src/components/ContactForm.tsx b/desafio-react-e-typescript/src/components/ContactForm.tsx index bae8233..845d2af 100644 --- a/desafio-react-e-typescript/src/components/ContactForm.tsx +++ b/desafio-react-e-typescript/src/components/ContactForm.tsx @@ -34,8 +34,6 @@ export const ContactForm = () => { > {({ errors, touched }) => (
-

Preencha o formulário

- { + return ( + <> +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae + ab illo inventore veritatis et quasi architecto beatae vitae dicta + sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit + aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui + dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed + quia non numquam eius modi tempora incidunt ut labore et dolore magnam + aliquam quaerat voluptatem. +

+

+ Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis + suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis + autem vel eum iure reprehenderit qui in ea voluptate velit esse quam + nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo + voluptas nulla pariatur? +

+
+ + ); +}; diff --git a/desafio-react-e-typescript/src/components/Container-menu/TopContainer.modules.scss b/desafio-react-e-typescript/src/components/Container-menu/TopContainer.modules.scss index a26d048..fcf8b0f 100644 --- a/desafio-react-e-typescript/src/components/Container-menu/TopContainer.modules.scss +++ b/desafio-react-e-typescript/src/components/Container-menu/TopContainer.modules.scss @@ -15,7 +15,7 @@ font-weight: 400; font-size: 12px; line-height: 14px; - color: $color-grey; + color: $color-gray; text-transform: uppercase; } } @@ -25,6 +25,7 @@ justify-content: center; .Title { + margin-bottom: 90px; font-family: $fontFamily; font-style: normal; font-weight: 400; @@ -33,5 +34,9 @@ letter-spacing: 0.1em; text-transform: uppercase; color: $color-gray-800; + + @media (max-width: 1024px) { + margin-bottom: 50px; + } } } 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 0256f67..5848585 100644 --- a/desafio-react-e-typescript/src/components/Header/HeaderDesktop.modules.scss +++ b/desafio-react-e-typescript/src/components/Header/HeaderDesktop.modules.scss @@ -6,7 +6,7 @@ padding: 22px 100px; background: $color-black; font-family: $fontFamily; - border-bottom: 1px solid $color-grey; + border-bottom: 1px solid $color-gray; .m3LogoWrapper { display: flex; @@ -30,7 +30,7 @@ padding: 8px; border: 2px solid $color-white-100; border-radius: 5px; - color: $color-grey; + color: $color-gray; @media (min-width: 2500px) { height: 33px; 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 b113a5f..12b2493 100644 --- a/desafio-react-e-typescript/src/components/Header/HeaderMobile.modules.scss +++ b/desafio-react-e-typescript/src/components/Header/HeaderMobile.modules.scss @@ -33,7 +33,7 @@ z-index: 8; button { - color: $color-grey; + color: $color-gray; background: $color-white; } } @@ -99,7 +99,7 @@ background: $color-white; border: 2px solid $color-white-100; border-radius: 5px; - color: $color-grey; + color: $color-gray; } .SearchIcon { diff --git a/desafio-react-e-typescript/src/components/Navegation.modules.scss b/desafio-react-e-typescript/src/components/Navegation.modules.scss index 912082e..ea803ae 100644 --- a/desafio-react-e-typescript/src/components/Navegation.modules.scss +++ b/desafio-react-e-typescript/src/components/Navegation.modules.scss @@ -4,7 +4,7 @@ padding: 0 16px; @media (min-width: 1025px) { - min-width: 24%; + min-width: 25%; margin-left: 100px; padding: 0; } @@ -12,19 +12,26 @@ ul { list-style: none; padding: 0; - border-right: 1px solid $color-black; - li { - padding: 16px 10px; - margin: 10px 0; + .Title_links { + a { + display: flex; + width: 97%; + padding: 26px 16px; + + @media (max-width: 1024px) { + padding: 10px 16px; + } + + @media (min-width: 1025px) { + border-right: 1px solid $color-black; + } + } } - li.active { + .active { background: $color-black; - - a { - color: $color-white; - } + color: $color-white; } a { @@ -33,7 +40,7 @@ font-weight: 400; font-size: 16px; line-height: 19px; - color: $color-grey-500; + color: $color-gray-500; text-decoration: none; } } diff --git a/desafio-react-e-typescript/src/components/Navegation.tsx b/desafio-react-e-typescript/src/components/Navegation.tsx index ae97a3b..27b863e 100644 --- a/desafio-react-e-typescript/src/components/Navegation.tsx +++ b/desafio-react-e-typescript/src/components/Navegation.tsx @@ -16,52 +16,22 @@ export const Navegation = () => { <>