From 3936bd6a7cea36b86ecaf59240806786387586a6 Mon Sep 17 00:00:00 2001 From: MateusLopes Date: Wed, 11 Jan 2023 14:51:55 -0300 Subject: [PATCH] feat: add atualizando classes --- public/index.html | 43 ++- src/components/Atomo/Link | 0 src/components/footer/Footer.tsx | 55 ++-- src/components/footer/FooterMenu.tsx | 6 +- src/components/footer/footer.scss | 28 +- src/components/form/ContactForm.tsx | 44 ++- src/components/form/contactForm.scss | 66 ++++- src/components/header/Header.tsx | 88 +++--- src/components/header/header.scss | 388 +++++++++++++++------------ src/index.tsx | 3 +- 10 files changed, 425 insertions(+), 296 deletions(-) create mode 100644 src/components/Atomo/Link diff --git a/public/index.html b/public/index.html index aa069f2..a9fc5ee 100644 --- a/public/index.html +++ b/public/index.html @@ -1,21 +1,21 @@ - - - - - - - - - - - - React App - - - -
- - + --> diff --git a/src/components/Atomo/Link b/src/components/Atomo/Link new file mode 100644 index 0000000..e69de29 diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx index e1567f3..0fdb8dc 100644 --- a/src/components/footer/Footer.tsx +++ b/src/components/footer/Footer.tsx @@ -1,21 +1,20 @@ import React from 'react' import FooterMenu from './FooterMenu' -import './footer.scss' -import iconFacebook from '../../assets/svgs/icon-facebook.svg' -import iconInstagram from '../../assets/svgs/icon-instagram.svg' -import iconTwitter from '../../assets/svgs/icon-twitter.svg' -import iconYoutube from '../../assets/svgs/icon-youtube.svg' -import iconLinkedin from '../../assets/svgs/icon-linkedin.svg' -import iconM3 from '../../assets/imgs/icon-m3.png' -import logoBoleto from '../../assets/imgs/logo-boleto.png' -import logoDiners from '../../assets/imgs/logo-diners.png' -import logoElo from '../../assets/imgs/logo-elo.png' -import logoHiper from '../../assets/imgs/logo-hiper.png' -import logoMaster from '../../assets/imgs/logo-master.png' -import logoPagseguro from '../../assets/imgs/logo-pagseguro.png' -import logoVisa from '../../assets/imgs/logo-visa.png' -import logoVtexPci from '../../assets/imgs/logo-vtex-pci-200.png' -import logoVtex from '../../assets/imgs/logo-vtex.png' +import iconFacebook from './assets/icon-facebook.svg' +import iconInstagram from './assets/icon-instagram.svg' +import iconTwitter from './assets/icon-twitter.svg' +import iconYoutube from './assets/icon-youtube.svg' +import iconLinkedin from './assets/icon-linkedin.svg' +import iconM3 from './assets/icon-m3.png' +import logoBoleto from './assets/logo-boleto.png' +import logoDiners from './assets/logo-diners.png' +import logoElo from './assets/logo-elo.png' +import logoHiper from './assets/logo-hiper.png' +import logoMaster from './assets/logo-master.png' +import logoPagseguro from './assets/logo-pagseguro.png' +import logoVisa from './assets/logo-visa.png' +import logoVtexPci from './assets/logo-vtex-pci-200.png' +import logoVtex from './assets/logo-vtex.png' const Footer = () => { const menuListData = [ @@ -47,10 +46,10 @@ const Footer = () => {

Assine nossa newsletter

-
- +
+ -
+
@@ -147,15 +146,15 @@ const Footer = () => {
- Logo Visa - Logo - Logo - Logo - Logo - Logo - Logo + Logo MasterCard + Logo Visa + Logo Diners + Logo Elo + Logo Hiper + Logo Pagseguro + Logo boleto
- Logo + Logo vtex pci
@@ -174,4 +173,4 @@ const Footer = () => { } -export default Footer \ No newline at end of file +export { Footer } \ No newline at end of file diff --git a/src/components/footer/FooterMenu.tsx b/src/components/footer/FooterMenu.tsx index 8c83a42..49edb36 100644 --- a/src/components/footer/FooterMenu.tsx +++ b/src/components/footer/FooterMenu.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react' -interface IFooterMenuProps{ +interface footerMenuProps{ title: string; content1: string; content2: string; @@ -8,11 +8,11 @@ interface IFooterMenuProps{ content4: string; } -const FooterMenu = (props: IFooterMenuProps) => { +const FooterMenu = (props: footerMenuProps) => { const [isActive, setIsActive] = useState(false) return ( -
+
setIsActive(!isActive)} diff --git a/src/components/footer/footer.scss b/src/components/footer/footer.scss index 711910f..2926868 100644 --- a/src/components/footer/footer.scss +++ b/src/components/footer/footer.scss @@ -1,5 +1,3 @@ -@import "../../styles/utils/variaveis"; - footer { .newsletter-wrapper { display: flex; @@ -90,6 +88,7 @@ footer { } .newsletter-btn { + cursor: pointer; padding: 14px 0; width: 126px; background-color: $color-black; @@ -168,15 +167,25 @@ footer { } } - li { + .footer-menu-content { + cursor: pointer; font-family: $font-family-Roboto; font-weight: 400; font-size: 12px; line-height: 14px; text-transform: capitalize; color: $color-gray-200; + + &:last-child { + text-decoration: underline; + } } } + + #FaleConosco li:nth-child(2), + #FaleConosco li:nth-child(4) { + font-weight: 500; + } } } @@ -280,10 +289,6 @@ footer { font-size: 28px; line-height: 33px; } - - @media (max-width: 1024px) { - display: none; - } } } } @@ -337,7 +342,7 @@ footer { .line { height: 24px; - width: 1px; + min-width: 1px; background-color: $color-gray-600; } @@ -351,6 +356,12 @@ footer { } } + @media (max-width: 1024px) { + &:last-child { + width: 54.61px; + } + } + @media (max-width: 375px) { width: 30px; height: 17px; @@ -385,6 +396,7 @@ footer { .m3, .vtex { + text-align: center; display: flex; align-items: center; gap: 13px; diff --git a/src/components/form/ContactForm.tsx b/src/components/form/ContactForm.tsx index 3fcb373..f95e65c 100644 --- a/src/components/form/ContactForm.tsx +++ b/src/components/form/ContactForm.tsx @@ -1,7 +1,5 @@ -import React from 'react' -import './contactForm.scss' - -import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik" +import { Formik, Form, Field, ErrorMessage } from "formik" +import FormSchema from '../../schema/FormSchema'; interface IFormikValues{ name: string; @@ -10,6 +8,7 @@ interface IFormikValues{ birthDate: string; phone: string; instagram: string; + check: boolean; } const initialValues = { @@ -19,33 +18,55 @@ const initialValues = { birthDate: "", phone: "", instagram: "", + check: false } const ContactForm = () => { - const handleFormikSubmit = (values: IFormikValues) => { + const handleFormikSubmit = (values: IFormikValues, { resetForm }: any) => { + let successMessage:any = document.querySelector('.success-message') + + let intervalo = window.setInterval(function () { + successMessage.innerText = "*Formulário enviado com sucesso!" + }, 800) + + window.setTimeout(function () { + clearInterval(intervalo) + successMessage.innerText = "" + }, 30000) + console.log(values); + resetForm({values: ''}) } - return -
+ return +
- + +
+
+
+
+
@@ -54,11 +75,14 @@ const ContactForm = () => {
- + + * +
- + +
} diff --git a/src/components/form/contactForm.scss b/src/components/form/contactForm.scss index 40e31a9..8f1f0ec 100644 --- a/src/components/form/contactForm.scss +++ b/src/components/form/contactForm.scss @@ -1,5 +1,3 @@ -@import "../../styles/utils/variaveis"; - form { display: flex; flex-direction: column; @@ -17,6 +15,11 @@ form { line-height: 16px; color: $color-black-200; padding-left: 15px; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } } input { @@ -28,18 +31,43 @@ form { font-size: 14px; line-height: 16px; + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + &::placeholder { font-family: $font-family-Roboto; font-weight: 400; font-size: 14px; line-height: 16px; color: $color-gray-450; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } } &:focus { outline-color: $color-black; } } + + .form-invalid-feedback { + position: absolute; + right: 0; + padding-right: 120px; + font-weight: 400; + font-size: 12px; + line-height: 14px; + padding-top: 15px; + color: $color-red; + + @media (max-width: 1024px) { + padding-right: 32px; + } + } } .check-input-box { @@ -47,26 +75,38 @@ form { align-items: center; justify-content: center; gap: 4.28px; + padding-left: 15px; font-family: $font-family-Roboto; font-weight: 400; font-size: 14px; - text-decoration: underline; line-height: 16px; color: $color-black-200; - padding-left: 15px; + + label { + cursor: pointer; + text-decoration: underline; + } span { - text-decoration: none; color: $color-red; } + + .form-invalid-feedback-check { + color: $color-red; + } + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } } .form-submit-btn { + cursor: pointer; border: none; border-radius: 25px; background-color: $color-black; padding: 16.72px 0; - font-family: $font-family-Roboto; font-weight: 400; font-size: 16px; @@ -74,5 +114,19 @@ form { letter-spacing: 0.05em; color: $color-white; text-transform: uppercase; + + @media (min-width: 2500px) { + font-size: 32px; + line-height: 38px; + padding: 16.5px 0; + } + } + + .success-message { + color: $color-green; + font-family: $font-family-Roboto; + font-weight: 400; + font-size: 12px; + line-height: 14px; } } diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index c561ff2..0dfff25 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -1,44 +1,56 @@ -import './header.scss' -import iconCart from '../../assets/svgs/icon-cart.svg'; -import iconLupa from '../../assets/svgs/icon-lupa.svg'; -import iconMenu from '../../assets/svgs/icon-menu.svg'; -import logoM3Academy from '../../assets/imgs/logo-m3-academy.png'; +import { useState } from 'react' +import iconCart from './assets/icon-cart.svg'; +import iconLupa from './assets/icon-lupa.svg'; +import iconMenu from './assets/icon-menu.svg'; +import iconClose from './assets/icon-close.svg'; +import logoM3Academy from './assets//logo-m3-academy.png'; const Header = () => { - return ( - <> -
- Menu - Logo M3 Academy -
- - Icone de lupa -
- -
+ const [active, setMode] = useState(false); + const ToggleMode = () => { + setMode(!active) + } - - - ) + + + ) } -export default Header \ No newline at end of file +export { Header } \ No newline at end of file diff --git a/src/components/header/header.scss b/src/components/header/header.scss index 7fd0b94..38ce556 100644 --- a/src/components/header/header.scss +++ b/src/components/header/header.scss @@ -1,216 +1,246 @@ -@import "../../styles/utils/variaveis"; - -header, -.navbar { - display: flex; - align-items: center; -} - header { - background-color: $color-black; - padding: 22px 100px; - border-bottom: solid 1px $color-gray-600; - justify-content: space-between; - - @media (max-width: 1024px) { - padding: 25px 16px; - display: grid; - grid-template-areas: - "menu logo cart" - "input input input"; + .header-wrapper, + .navbar { + display: flex; + align-items: center; } - .menu-mobile { - display: none; + .header-wrapper { + background-color: $color-black; + padding: 22px 100px; + border-bottom: solid 1px $color-gray-600; + justify-content: space-between; @media (max-width: 1024px) { - display: block; - grid-area: menu; - } - } - - .logo-m3-academy { - cursor: pointer; - width: 136px; - height: 25.86px; - - @media (max-width: 1024px) { - grid-area: logo; - margin: 0 auto; + padding: 25px 16px; + display: grid; + grid-template-areas: + "menu logo cart" + "input input input"; } - @media (min-width: 2500px) { - width: 265.62px; - height: 50.5px; - } - } + .menu-mobile { + display: none; - .search-bar { - width: 24.815%; - height: 36px; - - @media (max-width: 1024px) { - grid-area: input; - width: 100%; - margin-top: 25px; + @media (max-width: 1024px) { + display: block; + grid-area: menu; + } } - @media (min-width: 2500px) { - height: 57px; - width: 22.3914%; + .logo-m3-academy { + cursor: pointer; + width: 136px; + height: 25.86px; + + @media (max-width: 1024px) { + grid-area: logo; + margin: 0 auto; + } + + @media (min-width: 2500px) { + width: 265.62px; + height: 50.5px; + } } - .search-input { - width: 100%; - padding: 8px 16px; - border: 2px solid $color-gray-700; - border-radius: 5px; - color: $color-gray-500; - font-family: $font-family-Roboto; - font-weight: 400; - font-size: 14px; - line-height: 16px; + .search-bar { + width: 24.815%; + height: 36px; - &::placeholder { + @media (max-width: 1024px) { + grid-area: input; + width: 100%; + margin-top: 25px; + } + + @media (min-width: 2500px) { + height: 57px; + width: 22.3914%; + } + + .search-input { + width: 100%; + padding: 8px 16px; + border: 2px solid $color-gray-700; + border-radius: 5px; color: $color-gray-500; font-family: $font-family-Roboto; font-weight: 400; font-size: 14px; - line-height: 16.41px; + line-height: 16px; + + &::placeholder { + color: $color-gray-500; + font-family: $font-family-Roboto; + font-weight: 400; + font-size: 14px; + line-height: 16.41px; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 32.81px; + } + } + + &:focus { + outline: none; + } + + @media (max-width: 1024px) { + padding: 8px 16px; + } + + @media (min-width: 2500px) { + height: inherit; + padding: 12px 16px; + font-size: 28px; + line-height: 32.81px; + } + } + + .icon-lupa { + cursor: pointer; + position: relative; + top: -27px; + float: right; + margin-right: 18px; + + @media (min-width: 2500px) { + height: 35.15px; + width: 35.15px; + top: -46px; + } + } + } + + .right { + display: flex; + align-items: center; + gap: 55px; + + @media (max-width: 1024px) { + grid-area: cart; + justify-content: flex-end; + } + + .btn-entrar { + cursor: pointer; + text-transform: uppercase; + color: $color-white; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 32.81px; + } + + @media (max-width: 1024px) { + display: none; + } + } + + .icon-cart { + @media (min-width: 2500px) { + height: 54.68px; + width: 54.68px; + } + } + + .btn-close { + display: none; + background: none; + border: none; + } + } + } + + nav.navbar { + background-color: $color-black; + padding: 14px 100px; + + @media (max-width: 1024px) { + display: none; + } + + ul { + display: flex; + gap: 55px; + + li a { + cursor: pointer; + text-transform: uppercase; + color: $color-white; + font-family: "Roboto"; + font-style: normal; + font-weight: 500; + + font-size: 14px; + line-height: 16px; @media (min-width: 2500px) { font-size: 28px; line-height: 32.81px; } } - - &:focus { - outline: none; - } - - @media (max-width: 1024px) { - padding: 8px 16px; - } - - @media (min-width: 2500px) { - height: inherit; - padding: 12px 16px; - font-size: 28px; - line-height: 32.81px; - } - } - - .icon-lupa { - cursor: pointer; - position: relative; - top: -27px; - float: right; - margin-right: 18px; - - @media (min-width: 2500px) { - height: 35.15px; - width: 35.15px; - top: -46px; - } } } - .right { - display: flex; - align-items: center; - gap: 55px; - - @media (max-width: 1024px) { - grid-area: cart; - justify-content: flex-end; - } - - .btn-entrar { - cursor: pointer; - text-transform: uppercase; - color: $color-white; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 16px; - - @media (min-width: 2500px) { - font-size: 28px; - line-height: 32.81px; - } - - &.active { - display: block; - position: absolute; - left: 0; - z-index: 1; - width: 96.485%; - background: black; - padding: 31px 0 31px 16px; - } - } - - .icon-cart { - @media (min-width: 2500px) { - height: 54.68px; - width: 54.68px; - } - } - } -} - -nav.navbar { - background-color: $color-black; - padding: 14px 100px; - - // @media (max-width: 1024px) { - // display: none; - // } - + //Menu sidebar &.active { - display: block; + nav.navbar { + display: block; + width: 0; - .menu { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - background: $color-white; + .menu { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: $blur-gray; - ul { - flex-direction: column; - align-items: flex-start; - gap: 12px; - width: 96.485%; - background: #525251; - padding: 31px 0 404px 16px; - margin-top: 78px; - li a { - color: $color-gray-600; + ul { + flex-direction: column; + align-items: flex-start; + gap: 12px; + background: $color-white; + padding: 31px 0 404px 16px; + margin: 78px 36px 0 0; + + li a { + color: $color-gray-600; + } } } } - } - ul { - display: flex; - gap: 55px; + .right { + .btn-entrar { + display: flex; + justify-content: space-between; + align-items: center; + align-self: center; + position: fixed; + margin-right: 36px; + top: 0; + left: 0; + z-index: 1; + width: -webkit-fill-available; + background: black; + padding: 31px 16px 31px 16px; + } - li a { - cursor: pointer; - text-transform: uppercase; - color: $color-white; - font-family: "Roboto"; - font-style: normal; - font-weight: 500; - - font-size: 14px; - line-height: 16px; - - @media (min-width: 2500px) { - font-size: 28px; - line-height: 32.81px; + .btn-close { + display: block; + position: fixed; + z-index: 1; + width: 15px; + height: 15px; + right: 52px; } } } diff --git a/src/index.tsx b/src/index.tsx index 17eeb94..a25970f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,9 +1,8 @@ +import './global.scss' import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './pages/App'; -import './styles/main.scss' - const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement );