From 708bc2bd017e83ac175c28dd6d6b07db8855128f Mon Sep 17 00:00:00 2001 From: WillSimao Date: Wed, 18 Jan 2023 15:31:02 -0300 Subject: [PATCH] feat(Main): finaliza projeto --- react-ts/package-lock.json | 42 +++++++++++++++++++ react-ts/package.json | 1 + react-ts/src/Routes/Routes.tsx | 17 ++++++++ .../ContactForm/ContactForm.module.scss | 15 ++++++- .../components/ContactForm/ContactForm.tsx | 18 ++++++-- .../Footer/FooterCardsMobile.module.scss | 32 -------------- .../components/Footer/FooterCardsMobile.tsx | 29 ------------- .../src/components/Header/Header.module.scss | 4 ++ .../InputSearch/InputSearch.module.scss | 5 ++- .../MenuMobile/Component.module.scss | 2 +- .../NewsLetter/NewsLetter.module.scss | 4 ++ .../src/components/NewsLetter/NewsLetter.tsx | 1 + .../components/SocialMedia/SocialMedia.tsx | 22 +++++++--- .../UserAccount/UserAccount.module.scss | 4 ++ react-ts/src/styles/utils/Variables.scss | 3 ++ 15 files changed, 125 insertions(+), 74 deletions(-) create mode 100644 react-ts/src/Routes/Routes.tsx delete mode 100644 react-ts/src/components/Footer/FooterCardsMobile.module.scss delete mode 100644 react-ts/src/components/Footer/FooterCardsMobile.tsx diff --git a/react-ts/package-lock.json b/react-ts/package-lock.json index 183431a..f54a8b4 100644 --- a/react-ts/package-lock.json +++ b/react-ts/package-lock.json @@ -18,6 +18,7 @@ "@vitejs/plugin-react": "^3.0.0", "formik": "^2.2.9", "react-modal": "^3.16.1", + "react-router-dom": "^6.6.2", "sass": "^1.57.1", "typescript": "^4.9.3", "vite": "^4.0.0", @@ -790,6 +791,15 @@ "@jridgewell/sourcemap-codec": "1.4.14" } }, + "node_modules/@remix-run/router": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz", + "integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==", + "dev": true, + "engines": { + "node": ">=14" + } + }, "node_modules/@types/lodash": { "version": "4.14.191", "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz", @@ -1538,6 +1548,38 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.6.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.2.tgz", + "integrity": "sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==", + "dev": true, + "dependencies": { + "@remix-run/router": "1.2.1" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.6.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.2.tgz", + "integrity": "sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==", + "dev": true, + "dependencies": { + "@remix-run/router": "1.2.1", + "react-router": "6.6.2" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/readdirp": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", diff --git a/react-ts/package.json b/react-ts/package.json index 2e9d3ed..dd8aa1e 100644 --- a/react-ts/package.json +++ b/react-ts/package.json @@ -19,6 +19,7 @@ "@vitejs/plugin-react": "^3.0.0", "formik": "^2.2.9", "react-modal": "^3.16.1", + "react-router-dom": "^6.6.2", "sass": "^1.57.1", "typescript": "^4.9.3", "vite": "^4.0.0", diff --git a/react-ts/src/Routes/Routes.tsx b/react-ts/src/Routes/Routes.tsx new file mode 100644 index 0000000..68401f5 --- /dev/null +++ b/react-ts/src/Routes/Routes.tsx @@ -0,0 +1,17 @@ +import { BrowserRouter, Routes, Route } from 'react-router-dom' + +import Home from '../Pages/Home/Home'; + +const RoutesComponent = () => { + return ( + + + }/> + + + ) +} + +export default RoutesComponent; + + diff --git a/react-ts/src/components/ContactForm/ContactForm.module.scss b/react-ts/src/components/ContactForm/ContactForm.module.scss index cc90214..3c5102e 100644 --- a/react-ts/src/components/ContactForm/ContactForm.module.scss +++ b/react-ts/src/components/ContactForm/ContactForm.module.scss @@ -124,12 +124,21 @@ background-color: $color-black3; } } + &__span { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: $color-green1; + margin-top: 12px; + } } .invalid { border-color: $color-red1; } } -@media only screen and (min-width: 375px) { +@media only screen and (max-width: 375px) { .container { &__checkbox { max-width: 992px; @@ -234,6 +243,10 @@ font-size: 32px; line-height: 38px; } + &__span { + font-size: 24px; + line-height: 28px; + } } } } \ No newline at end of file diff --git a/react-ts/src/components/ContactForm/ContactForm.tsx b/react-ts/src/components/ContactForm/ContactForm.tsx index ac26984..2fd975c 100644 --- a/react-ts/src/components/ContactForm/ContactForm.tsx +++ b/react-ts/src/components/ContactForm/ContactForm.tsx @@ -1,7 +1,8 @@ -import { Formik, Form, Field, ErrorMessage } from "formik"; +import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik"; import styles from './ContactForm.module.scss'; import FormSchema from '../../Schema/FormSchema'; +import { useState } from "react"; interface IFormikValues { name: string; @@ -25,10 +26,14 @@ const initialValues = { const ContactForm = () => { - const handleSubmitForm = (values: IFormikValues) => { - console.log(values); - }; + const [enviado, setEnviado] = useState(false); + const handleSubmitForm = (values: IFormikValues, actions: FormikHelpers) => { + console.log(values); + actions.resetForm(); + setEnviado(true); + }; + return (
@@ -124,6 +129,9 @@ const ContactForm = () => {
+ {enviado ? ( + *Formulário enviado com sucesso! + ) : ('')}
@@ -136,3 +144,5 @@ const ContactForm = () => { export default ContactForm; + + diff --git a/react-ts/src/components/Footer/FooterCardsMobile.module.scss b/react-ts/src/components/Footer/FooterCardsMobile.module.scss deleted file mode 100644 index f562328..0000000 --- a/react-ts/src/components/Footer/FooterCardsMobile.module.scss +++ /dev/null @@ -1,32 +0,0 @@ -@import '../../styles/utils/Variables.scss'; -.payments { - display: none; - align-items: center; - column-gap: 12px; - img { - &:nth-child(8) { - border-left: 1px solid $color-grey1; - padding-left: 12px; - } - } -} - -@media only screen and (max-width: 1024px) { - .payments { - display: flex; - align-items: center; - column-gap: 12px; - img { - &:nth-child(8) { - border-left: 1px solid $color-grey1; - padding-left: 12px; - } - } - } -} - - - - - - diff --git a/react-ts/src/components/Footer/FooterCardsMobile.tsx b/react-ts/src/components/Footer/FooterCardsMobile.tsx deleted file mode 100644 index 9213f7e..0000000 --- a/react-ts/src/components/Footer/FooterCardsMobile.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import styles from './FooterCardsMobile.module.scss'; - -import MasterCard from '../../assets/images/MasterCardMobile.svg'; -import VisaCard from '../../assets/images/VisaCardMobile.svg'; -import AmericaCard from '../../assets/images/AmericaCardMobile.svg'; -import EloCard from '../../assets/images/EloCardMobile.svg'; -import HiperCard from '../../assets/images/HiperCardMobile.svg'; -import PayPal from '../../assets/images/PayPalMobile.svg'; -import Boleto from '../../assets/images/BoletoMobile.svg'; -import VtexPci from '../../assets/images/vtex-pciMobile.svg'; - - -const FooterCardsMobile = () => { - return ( -
- Bandeira Master - Bandeira Visa - Bandeira America Express - Bandeira Elo - Bandeira HiperCard - Bandeira PayPal - Bandeira Boleto - Bandeira Vtex -
- ) -} - - -export default FooterCardsMobile; \ No newline at end of file diff --git a/react-ts/src/components/Header/Header.module.scss b/react-ts/src/components/Header/Header.module.scss index c782af5..48f4d8b 100644 --- a/react-ts/src/components/Header/Header.module.scss +++ b/react-ts/src/components/Header/Header.module.scss @@ -36,6 +36,10 @@ line-height: 16px; color: $color-white1; text-transform: uppercase; + transition: all .5s ease-in-out; + &:hover { + color: $color-blue1; + } } } } diff --git a/react-ts/src/components/InputSearch/InputSearch.module.scss b/react-ts/src/components/InputSearch/InputSearch.module.scss index 4e31135..de49e4e 100644 --- a/react-ts/src/components/InputSearch/InputSearch.module.scss +++ b/react-ts/src/components/InputSearch/InputSearch.module.scss @@ -5,7 +5,7 @@ align-items: center; justify-content: end; position: relative; - max-width: 236px; + max-width: 264px; width: 100%; height: 32px; border-radius: 5px; @@ -24,6 +24,9 @@ &::placeholder { color: $color-grey1; } + &:focus { + border: $color-black1 ; + } } &__icon { position: absolute; diff --git a/react-ts/src/components/MenuMobile/Component.module.scss b/react-ts/src/components/MenuMobile/Component.module.scss index 2d54740..1feb0ee 100644 --- a/react-ts/src/components/MenuMobile/Component.module.scss +++ b/react-ts/src/components/MenuMobile/Component.module.scss @@ -51,7 +51,7 @@ } } -@media only screen and (min-width: 375px) { +@media only screen and (max-width: 375px) { .container-components { &__wrapper { width: 90.4%; diff --git a/react-ts/src/components/NewsLetter/NewsLetter.module.scss b/react-ts/src/components/NewsLetter/NewsLetter.module.scss index 776213e..f074d74 100644 --- a/react-ts/src/components/NewsLetter/NewsLetter.module.scss +++ b/react-ts/src/components/NewsLetter/NewsLetter.module.scss @@ -58,6 +58,10 @@ border: none; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); cursor: pointer; + transition: all ease-in-out 200ms; + &:hover { + background-color: $color-black3; + } } } } diff --git a/react-ts/src/components/NewsLetter/NewsLetter.tsx b/react-ts/src/components/NewsLetter/NewsLetter.tsx index b2d59c0..ba1a3ed 100644 --- a/react-ts/src/components/NewsLetter/NewsLetter.tsx +++ b/react-ts/src/components/NewsLetter/NewsLetter.tsx @@ -1,6 +1,7 @@ import styles from './NewsLetter.module.scss'; const NewsLetter = () => { + return (
diff --git a/react-ts/src/components/SocialMedia/SocialMedia.tsx b/react-ts/src/components/SocialMedia/SocialMedia.tsx index 29824a4..d32da2d 100644 --- a/react-ts/src/components/SocialMedia/SocialMedia.tsx +++ b/react-ts/src/components/SocialMedia/SocialMedia.tsx @@ -11,13 +11,23 @@ const SocialMedia = () => { return ( diff --git a/react-ts/src/components/UserAccount/UserAccount.module.scss b/react-ts/src/components/UserAccount/UserAccount.module.scss index 7821f32..f351411 100644 --- a/react-ts/src/components/UserAccount/UserAccount.module.scss +++ b/react-ts/src/components/UserAccount/UserAccount.module.scss @@ -15,6 +15,10 @@ line-height: 16px; color: $color-white1; text-transform: uppercase; + transition: all .5s ease-in-out; + &:hover { + color: $color-blue1; + } } } } diff --git a/react-ts/src/styles/utils/Variables.scss b/react-ts/src/styles/utils/Variables.scss index 9778bb4..175e5e6 100644 --- a/react-ts/src/styles/utils/Variables.scss +++ b/react-ts/src/styles/utils/Variables.scss @@ -16,5 +16,8 @@ $color-black2: #303030; $color-black3: #100D0E; $color-black4: #292929; +$color-blue1: #6fd5f2; + +$color-green1: #008000; //fonts $font-family: 'Roboto', sans-serif;