@@ -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 (
-
- )
-}
-
-
-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;