From e2ac9bc06ceac64b4daa1a07aa741d6ab2d1da17 Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Sat, 14 Jan 2023 11:39:08 -0300 Subject: [PATCH] refactor(home): corrigindo erros no layout e aprimorando semantica --- .../molecules/FaleConosco/FaleConosco.module.scss | 14 +++++++++++--- .../FooterNewsletter/FooterNewsletter.module.scss | 10 ++++------ .../organisms/Footer/FooterTop/FooterTop.scss | 1 + .../Header/HeaderDesktop/HeaderDesktop.module.scss | 5 +++++ .../Header/HeaderDesktop/HeaderDesktop.tsx | 10 ++++++++-- .../Header/HeaderMobile/HeaderMobile.module.scss | 11 +++++++++++ .../organisms/Header/HeaderMobile/HeaderMobile.tsx | 11 +++++++++-- src/schema/FormSchema.ts | 3 ++- src/schema/validations.ts | 1 + 9 files changed, 52 insertions(+), 14 deletions(-) diff --git a/src/components/molecules/FaleConosco/FaleConosco.module.scss b/src/components/molecules/FaleConosco/FaleConosco.module.scss index 03a6f43..ceb316a 100644 --- a/src/components/molecules/FaleConosco/FaleConosco.module.scss +++ b/src/components/molecules/FaleConosco/FaleConosco.module.scss @@ -86,6 +86,7 @@ border: 1px solid $color-black1; border-radius: 25px; width: calc(100% - 40px); + height: 31px; padding: 15px 20px; display: flex; align-items: center; @@ -99,6 +100,7 @@ color: $color-black; @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { + height: 14px; font-size: 14px; line-height: 16px; } @@ -196,7 +198,7 @@ align-items: center; justify-content: center; width: 100%; - height: 52px; + height: 71px; background-color: $color-black; border: none; border-radius: 25px; @@ -204,12 +206,18 @@ font-family: $font-family; font-style: normal; font-weight: 400; - font-size: 16px; - line-height: 19px; + font-size: 32px; + line-height: 38px; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; + @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { + height: 52px; + font-size: 16px; + line-height: 19px; + } + &:disabled{ background-color: $color-black-500; cursor: inherit; diff --git a/src/components/organisms/Footer/FooterNewsletter/FooterNewsletter.module.scss b/src/components/organisms/Footer/FooterNewsletter/FooterNewsletter.module.scss index 4199ecd..2df8a24 100644 --- a/src/components/organisms/Footer/FooterNewsletter/FooterNewsletter.module.scss +++ b/src/components/organisms/Footer/FooterNewsletter/FooterNewsletter.module.scss @@ -62,7 +62,7 @@ &__input { width: 71.72%; - height: 30px; + height: 33px; display: flex; flex-direction: row; align-items: flex-start; @@ -74,7 +74,7 @@ font-size: 28px; line-height: 33px; color: $color-black; - background: #FFFFFF; + background: $color-white; border: 1px solid $color-primary-600; border-radius: 4px; @@ -89,7 +89,7 @@ font-size: 14px; line-height: 16px; padding: 17px 16px; - height: 16px; + height: 14px; } &::placeholder { @@ -98,8 +98,6 @@ font-weight: 400; font-size: 28px; line-height: 33px; - font-size: 14px; - line-height: 16px; color: $color-primary-400; @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { @@ -163,7 +161,7 @@ margin-top: 8px; font-size: 14px; line-height: 16px; - height: 44px; + height: 50px; } } } diff --git a/src/components/organisms/Footer/FooterTop/FooterTop.scss b/src/components/organisms/Footer/FooterTop/FooterTop.scss index 68b9373..47bbe07 100644 --- a/src/components/organisms/Footer/FooterTop/FooterTop.scss +++ b/src/components/organisms/Footer/FooterTop/FooterTop.scss @@ -29,6 +29,7 @@ justify-content: flex-start; align-items: flex-start; margin-right: 121px; + width: 100%; @media #{$mq-tablet}, #{$mq-mobile} { margin: 0; diff --git a/src/components/organisms/Header/HeaderDesktop/HeaderDesktop.module.scss b/src/components/organisms/Header/HeaderDesktop/HeaderDesktop.module.scss index 1d0a096..6babd7a 100644 --- a/src/components/organisms/Header/HeaderDesktop/HeaderDesktop.module.scss +++ b/src/components/organisms/Header/HeaderDesktop/HeaderDesktop.module.scss @@ -111,6 +111,11 @@ } &__cart { + background-color: transparent; + border: none; + display: contents; + cursor: pointer; + img { width: 28px; height: 28px; diff --git a/src/components/organisms/Header/HeaderDesktop/HeaderDesktop.tsx b/src/components/organisms/Header/HeaderDesktop/HeaderDesktop.tsx index 7a23671..d75fbfb 100644 --- a/src/components/organisms/Header/HeaderDesktop/HeaderDesktop.tsx +++ b/src/components/organisms/Header/HeaderDesktop/HeaderDesktop.tsx @@ -15,9 +15,15 @@ const HeaderDesktop = () => { ENTRAR - +
diff --git a/src/components/organisms/Header/HeaderMobile/HeaderMobile.module.scss b/src/components/organisms/Header/HeaderMobile/HeaderMobile.module.scss index 494021b..b203421 100644 --- a/src/components/organisms/Header/HeaderMobile/HeaderMobile.module.scss +++ b/src/components/organisms/Header/HeaderMobile/HeaderMobile.module.scss @@ -26,6 +26,17 @@ height: 22.5px; } } + + &__icon-cart { + background-color: transparent; + border: none; + display: contents; + + img { + width: 28px; + height: 28px; + } + } } &__input { diff --git a/src/components/organisms/Header/HeaderMobile/HeaderMobile.tsx b/src/components/organisms/Header/HeaderMobile/HeaderMobile.tsx index e7c5478..0935d5c 100644 --- a/src/components/organisms/Header/HeaderMobile/HeaderMobile.tsx +++ b/src/components/organisms/Header/HeaderMobile/HeaderMobile.tsx @@ -31,6 +31,7 @@ const HeaderMobile = () => { @@ -38,9 +39,15 @@ const HeaderMobile = () => { Logo M3-ACADEMY - +
diff --git a/src/schema/FormSchema.ts b/src/schema/FormSchema.ts index 529c7ba..92b6ab0 100644 --- a/src/schema/FormSchema.ts +++ b/src/schema/FormSchema.ts @@ -1,5 +1,6 @@ import * as Yup from 'yup'; import { cpf } from 'cpf-cnpj-validator'; +import { insta } from './validations'; export default Yup.object().shape({ name: Yup.string().required("*Campo Obrigatório").min(3, "*No mínimo 3 digitos"), @@ -7,6 +8,6 @@ export default Yup.object().shape({ cpf: Yup.string().test((value:any) => cpf.isValid(value)).required("*Campo Obrigatório"), birthDate: Yup.date().max(new Date(), "*Data inválida!").required("*Campo Obrigatório"), celPhone: Yup.string().required('*Campo Obrigatório'), - instagram: Yup.string(), + instagram: Yup.string().matches(insta, 'Usuário Inválido!'), acceptTerms: Yup.boolean().oneOf([true], '*'), }) diff --git a/src/schema/validations.ts b/src/schema/validations.ts index 5f65aed..d69b959 100644 --- a/src/schema/validations.ts +++ b/src/schema/validations.ts @@ -1,3 +1,4 @@ export const phoneNumber = /\([1-9]{2}\) 9[0-9]\d{3}-\d{4}/; export const cpfNumber = /^[0-9]{3}.?[0-9]{3}.?[0-9]{3}-?[0-9]{2}/; +export const insta = /@(?:(?:[\w][.]{0,1})*[\w]){1,29}/;