HenriqueSantosSantana/desafio-react-e-typescript-henrique-santos-santana
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor/components #15

Merged
HenriqueSantosSantana merged 12 commits from refactor/components into develop 2023-01-09 03:45:14 +00:00
Conversation 0 Commits 12 Files Changed 57 +48 -44
2 changed files with 48 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 51bbe55cf1 - Show all commits

82
src/template/Newsletter/index.module.scss
View File

@ -3,47 +3,37 @@
.newsletter {
width: 100%;
border-top: 1px solid var(--clr-common-black);
}
.container {
width: 100%;
padding: 16px;
}
.newsletter h3 {
margin-bottom: 16px;
font-weight: 500;
font-size: var(--txt-normal);
line-height: 16.41px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--clr-gray-800);
@media screen and (min-width: 1025px) {
font-size: var(--txt-large);
line-height: 21.09px;
}
@media screen and (min-width: 2500px) {
line-height: 42.19px;
&__container {
width: 100%;
padding: 16px;
}
}
.container {
fieldset :global {
border: none;
.newsletter {
h3 {
margin-bottom: 16px;
font-weight: 500;
font-size: var(--txt-normal);
line-height: 16.41px;
.form-group {
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
gap: 8px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--clr-gray-800);
@media screen and (min-width: 1025px) {
font-size: var(--txt-large);
line-height: 21.09px;
}
@media screen and (min-width: 2500px) {
line-height: 42.19px;
}
}
}
.newsletter__container {
@media screen and (min-width: 1025px) {
width: function.fluid(474px, 1280px);
padding: 16px 0;
@ -55,7 +45,21 @@
}
}
.container :global {
.newsletter__container {
fieldset :global {
border: none;
.form-group {
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
gap: 8px;
}
}
}
.newsletter__container :global {
.form-input {
width: 100%;
margin-bottom: 16px;
@ -68,7 +72,9 @@
width: function.fluid(668px, 922px);
}
}
}
.newsletter__container :global {
input {
display: block;
width: 100%;
@ -77,9 +83,6 @@
border: 1px solid var(--clr-gray-400);
font-size: var(--txt-normal);
line-height: 16.41px;
@media screen and (min-width: 2500px) {
line-height: 32.81px;
}
&::placeholder {
color: var(--clr-gray-400);
@ -91,12 +94,13 @@
}
@media screen and (min-width: 2500px) {
line-height: 32.81px;
height: 59px;
}
}
}
.form {
.newsletter__form {
button[type='submit'] {
width: 100%;
height: 50px;
@ -130,7 +134,7 @@
.newsletter {
@media screen and (min-width: 1025px) {
.container {
&__container {
fieldset :global {
.form-group {
flex-direction: row;

10
src/template/Newsletter/index.tsx
View File

@ -1,7 +1,7 @@
import { Field, Form, Formik } from 'formik'
import * as Yup from 'yup'
import css from './index.module.scss'
import styles from './index.module.scss'
const schema = Yup.object({
email: Yup.string().required('Campo Obrigratorio').email('Email ínvalido'),
@ -9,16 +9,16 @@ const schema = Yup.object({
export function Newsletter() {
return (
<section className={css.newsletter}>
<div className={css.container}>
<div className={css.content}>
<section className={styles['newsletter']}>
<div className={styles['newsletter__container']}>
<div className={styles['newsletter__content']}>
<h3>Assine nossa newsletter</h3>
<Formik
initialValues={{ email: '' }}
onSubmit={(e) => console.log(e)}
validationSchema={schema}
>
<Form className={css.form}>
<Form className={styles['newsletter__form']}>
<fieldset className="form-container">
<div className="form-group">
<div className="form-input">