From f17e30788843ca2e14f557d7aa6ad79cdb7b56e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Tue, 10 Jan 2023 12:37:59 -0300 Subject: [PATCH 1/4] feat: Adiciona transitions e hover em links e button --- .../components/MainInstitucional/Contato.tsx | 42 +++---------------- .../assets/modules/Contato.module.scss | 12 +++++- .../assets/modules/Main.module.scss | 1 - .../assets/modules/Navigation.module.scss | 5 +++ 4 files changed, 21 insertions(+), 39 deletions(-) diff --git a/react-project/src/components/MainInstitucional/Contato.tsx b/react-project/src/components/MainInstitucional/Contato.tsx index 9fe5a2d..de1e2d5 100644 --- a/react-project/src/components/MainInstitucional/Contato.tsx +++ b/react-project/src/components/MainInstitucional/Contato.tsx @@ -1,8 +1,8 @@ import { Formik, Form, Field, ErrorMessage } from "formik"; -import FormSchema from "./assets/schemas/FormSchema"; - import MaskedInput from "react-text-mask"; +import FormSchema from "./assets/schemas/FormSchema"; + import contato from "./assets/modules/Contato.module.scss"; interface IFormikValues { @@ -15,7 +15,6 @@ interface IFormikValues { terms: boolean; } -//setar valores iniciais const initialValues = { name: "", email: "", @@ -71,26 +70,19 @@ const Contato = () => { { - /*values.sent = true;*/ console.log(values); actions.resetForm(); - /*alert("formulario enviado");*/ const sent = document.querySelector("#sent") as HTMLSpanElement; sent.innerHTML = "*Formulário enviado com sucesso!"; }} initialValues={initialValues} validationSchema={FormSchema} > - {({ errors, touched, handleBlur }) => ( + {({ handleBlur }) => (
- + {
- + { type="text" placeholder="000.000.000-00" onBlur={handleBlur} - className={errors.cpf && touched.cpf && "invalid"} /> )} /> @@ -145,7 +131,6 @@ const Contato = () => { type="text" placeholder="00.00.0000" onBlur={handleBlur} - className={errors.date && touched.date && "invalid"} /> )} /> @@ -167,7 +152,6 @@ const Contato = () => { type="text" placeholder="(00) 00000-0000" onBlur={handleBlur} - className={errors.telefone && touched.telefone && "invalid"} /> )} /> @@ -184,22 +168,6 @@ const Contato = () => { type="instagram" id="instagram" name="instagram" - className={errors.instagram && touched.instagram && "invalid"} - /*name="instagram" - render={({ field }: any) => ( - - )}*/ /> Date: Tue, 10 Jan 2023 14:33:39 -0300 Subject: [PATCH 2/4] feat: Adiciona componente do whatsapp --- .../src/components/WhatsApp/WhatsApp.tsx | 23 ++++++++++ .../assets/modules/WhatsApp.module.scss | 44 +++++++++++++++++++ .../components/WhatsApp/assets/svgs/arrow.svg | 3 ++ .../WhatsApp/assets/svgs/whatsapp.svg | 11 +++++ react-project/src/pages/Institucional.tsx | 6 ++- 5 files changed, 85 insertions(+), 2 deletions(-) create mode 100644 react-project/src/components/WhatsApp/WhatsApp.tsx create mode 100644 react-project/src/components/WhatsApp/assets/modules/WhatsApp.module.scss create mode 100644 react-project/src/components/WhatsApp/assets/svgs/arrow.svg create mode 100644 react-project/src/components/WhatsApp/assets/svgs/whatsapp.svg diff --git a/react-project/src/components/WhatsApp/WhatsApp.tsx b/react-project/src/components/WhatsApp/WhatsApp.tsx new file mode 100644 index 0000000..74b3e11 --- /dev/null +++ b/react-project/src/components/WhatsApp/WhatsApp.tsx @@ -0,0 +1,23 @@ +import whats from "./assets/modules/WhatsApp.module.scss"; + +import icon from "./assets/svgs/whatsapp.svg"; +import arrow from "./assets/svgs/arrow.svg"; + +const WhatsApp = () => { + return ( +
+ +
+ Ícone de whatsapp +
+ +
+
+ Ícone de flecha +
+
+
+ ); +}; + +export { WhatsApp }; diff --git a/react-project/src/components/WhatsApp/assets/modules/WhatsApp.module.scss b/react-project/src/components/WhatsApp/assets/modules/WhatsApp.module.scss new file mode 100644 index 0000000..875b021 --- /dev/null +++ b/react-project/src/components/WhatsApp/assets/modules/WhatsApp.module.scss @@ -0,0 +1,44 @@ +.icons { + position: fixed; + bottom: 190px; + right: 16px; + + @media screen and (min-width: 2500px) { + bottom: 230px; + } + + &__whats { + display: contents; + + figure { + display: contents; + + img { + @media screen and (min-width: 2500px) { + width: 66px; + height: 66px; + } + } + } + } + + &__arrow { + margin-top: 5px; + background-color: var(--gray-100); + width: 34px; + height: 34px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + + @media screen and (min-width: 2500px) { + width: 66px; + height: 66px; + } + + figure { + display: contents; + } + } +} diff --git a/react-project/src/components/WhatsApp/assets/svgs/arrow.svg b/react-project/src/components/WhatsApp/assets/svgs/arrow.svg new file mode 100644 index 0000000..a217195 --- /dev/null +++ b/react-project/src/components/WhatsApp/assets/svgs/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/react-project/src/components/WhatsApp/assets/svgs/whatsapp.svg b/react-project/src/components/WhatsApp/assets/svgs/whatsapp.svg new file mode 100644 index 0000000..2314673 --- /dev/null +++ b/react-project/src/components/WhatsApp/assets/svgs/whatsapp.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/react-project/src/pages/Institucional.tsx b/react-project/src/pages/Institucional.tsx index 86a5dc8..1124f76 100644 --- a/react-project/src/pages/Institucional.tsx +++ b/react-project/src/pages/Institucional.tsx @@ -3,18 +3,20 @@ import "../assets/styles/variables.scss"; import { Header } from "../components/Header/Header"; import { HeaderMobile } from "../components/Header/HeaderMobile"; import { Main } from "../components/MainInstitucional/Main"; +import { WhatsApp } from "../components/WhatsApp/WhatsApp"; import { Footer } from "../components/Footer/Footer"; const Institucional = () => { return ( -
+ <>
+
-
+ ); }; -- 2.34.1 From 83c91d0aa2a37b7a11f6c0ae0c4efd641a56a342 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Tue, 10 Jan 2023 20:17:50 -0300 Subject: [PATCH 3/4] feat: Adiciona back to top icon --- .../src/components/FixedIcons/FixedIcons.tsx | 26 ++++++++++++++++++ .../assets/modules/FixedIcons.module.scss} | 27 +++++++++++++++---- .../assets/svgs/arrow.svg | 0 .../assets/svgs/whatsapp.svg | 0 .../components/MainInstitucional/Contato.tsx | 2 -- .../src/components/WhatsApp/WhatsApp.tsx | 23 ---------------- react-project/src/pages/Institucional.tsx | 4 +-- 7 files changed, 50 insertions(+), 32 deletions(-) create mode 100644 react-project/src/components/FixedIcons/FixedIcons.tsx rename react-project/src/components/{WhatsApp/assets/modules/WhatsApp.module.scss => FixedIcons/assets/modules/FixedIcons.module.scss} (69%) rename react-project/src/components/{WhatsApp => FixedIcons}/assets/svgs/arrow.svg (100%) rename react-project/src/components/{WhatsApp => FixedIcons}/assets/svgs/whatsapp.svg (100%) delete mode 100644 react-project/src/components/WhatsApp/WhatsApp.tsx diff --git a/react-project/src/components/FixedIcons/FixedIcons.tsx b/react-project/src/components/FixedIcons/FixedIcons.tsx new file mode 100644 index 0000000..f794d44 --- /dev/null +++ b/react-project/src/components/FixedIcons/FixedIcons.tsx @@ -0,0 +1,26 @@ +import icons from "./assets/modules/FixedIcons.module.scss"; + +import whats from "./assets/svgs/whatsapp.svg"; +import arrow from "./assets/svgs/arrow.svg"; + +const FixedIcons = () => { + return ( +
+ +
+ Ícone WhatsApp +
+ +
window.scrollTo({ top: 0, behavior: "smooth" })} + className={icons["icons__arrow"]} + > +
+ Ícone subir ao topo +
+
+
+ ); +}; + +export { FixedIcons }; diff --git a/react-project/src/components/WhatsApp/assets/modules/WhatsApp.module.scss b/react-project/src/components/FixedIcons/assets/modules/FixedIcons.module.scss similarity index 69% rename from react-project/src/components/WhatsApp/assets/modules/WhatsApp.module.scss rename to react-project/src/components/FixedIcons/assets/modules/FixedIcons.module.scss index 875b021..d450482 100644 --- a/react-project/src/components/WhatsApp/assets/modules/WhatsApp.module.scss +++ b/react-project/src/components/FixedIcons/assets/modules/FixedIcons.module.scss @@ -1,10 +1,18 @@ .icons { position: fixed; - bottom: 190px; + bottom: 200px; right: 16px; @media screen and (min-width: 2500px) { - bottom: 230px; + bottom: 215px; + } + + @media screen and (max-width: 1024px) { + bottom: 50px; + } + + @media screen and (max-width: 599px) { + bottom: 29px; } &__whats { @@ -31,14 +39,23 @@ display: flex; justify-content: center; align-items: center; + cursor: pointer; + + figure { + display: contents; + + img { + transform: translateY(-2px); + } + } @media screen and (min-width: 2500px) { width: 66px; height: 66px; - } - figure { - display: contents; + img { + width: 26px; + } } } } diff --git a/react-project/src/components/WhatsApp/assets/svgs/arrow.svg b/react-project/src/components/FixedIcons/assets/svgs/arrow.svg similarity index 100% rename from react-project/src/components/WhatsApp/assets/svgs/arrow.svg rename to react-project/src/components/FixedIcons/assets/svgs/arrow.svg diff --git a/react-project/src/components/WhatsApp/assets/svgs/whatsapp.svg b/react-project/src/components/FixedIcons/assets/svgs/whatsapp.svg similarity index 100% rename from react-project/src/components/WhatsApp/assets/svgs/whatsapp.svg rename to react-project/src/components/FixedIcons/assets/svgs/whatsapp.svg diff --git a/react-project/src/components/MainInstitucional/Contato.tsx b/react-project/src/components/MainInstitucional/Contato.tsx index de1e2d5..76f05ae 100644 --- a/react-project/src/components/MainInstitucional/Contato.tsx +++ b/react-project/src/components/MainInstitucional/Contato.tsx @@ -27,7 +27,6 @@ const initialValues = { }; const dateMask = [/\d/, /\d/, ".", /\d/, /\d/, ".", /\d/, /\d/, /\d/, /\d/]; - const cpfMask = [ /\d/, /\d/, @@ -44,7 +43,6 @@ const cpfMask = [ /\d/, /\d/, ]; - const phoneNumberMask = [ "(", /\d/, diff --git a/react-project/src/components/WhatsApp/WhatsApp.tsx b/react-project/src/components/WhatsApp/WhatsApp.tsx deleted file mode 100644 index 74b3e11..0000000 --- a/react-project/src/components/WhatsApp/WhatsApp.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import whats from "./assets/modules/WhatsApp.module.scss"; - -import icon from "./assets/svgs/whatsapp.svg"; -import arrow from "./assets/svgs/arrow.svg"; - -const WhatsApp = () => { - return ( -
- -
- Ícone de whatsapp -
- -
-
- Ícone de flecha -
-
-
- ); -}; - -export { WhatsApp }; diff --git a/react-project/src/pages/Institucional.tsx b/react-project/src/pages/Institucional.tsx index 1124f76..e9ba5a4 100644 --- a/react-project/src/pages/Institucional.tsx +++ b/react-project/src/pages/Institucional.tsx @@ -3,7 +3,7 @@ import "../assets/styles/variables.scss"; import { Header } from "../components/Header/Header"; import { HeaderMobile } from "../components/Header/HeaderMobile"; import { Main } from "../components/MainInstitucional/Main"; -import { WhatsApp } from "../components/WhatsApp/WhatsApp"; +import { FixedIcons } from "../components/FixedIcons/FixedIcons"; import { Footer } from "../components/Footer/Footer"; const Institucional = () => { @@ -14,7 +14,7 @@ const Institucional = () => {
- +