SabrinaMiranda/desafio-react-e-typescript-sabrina-miranda
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: Aplica mudanças no código

Browse Source
This commit is contained in:
Sabrina Miranda 2023-01-16 15:27:53 -03:00
parent f49da350bf
commit 1bb05c78c7
6 changed files with 64 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/Button/Buttom.tsx
View File

@ -1,19 +0,0 @@
import React from "react";
interface Btn {
text: string;
type: "button" | "submit" | "reset";
className: string;
}
const Button = ( props: Btn ) => {
const { text, type, className } = props;
return (
<button type={type} className={className}>
{text}
</button>
);
};
export { Button };

24
src/components/Main/Main.module.scss
View File

@ -16,6 +16,14 @@
@media (min-width: 2500px) {
width: 31px;
}
&:hover {
filter: brightness(80%);
}
&:active {
filter: brightness(100%);
}
}
&__arrow-icon {
@ -26,6 +34,14 @@
width: 15px;
height: 15px;
}
&:hover {
filter: brightness(80%);
}
&:active {
filter: brightness(100%);
}
}
&__text {
@ -37,6 +53,14 @@
font-size: 24px;
line-height: 28px;
}
&:hover {
filter: brightness(80%);
}
&:active {
filter: brightness(100%);
}
}
}

6
src/components/MenuSideBar/MenuSideBar.module.scss
View File

@ -2,11 +2,12 @@
.menu-sidebar {
border-right: 1px solid variables.$black;
width: 302px;
width: 27.97%;
min-width: 302px;
height: 285px;
@media (min-width: 2500px) {
width: 590px;
min-width: 590px;
height: 485px;
}
@ -14,6 +15,7 @@
border: none;
height: 224px;
width: 100%;
min-width: 100%;
}
&__container {

60
src/components/Newsletter/Newsletter.module.scss
View File

@ -136,7 +136,7 @@
text-transform: uppercase;
&:hover {
filter: opacity(.9);
filter: opacity(.85);
}
&:active {
@ -166,35 +166,35 @@
}
}
}
}
span {
font-size: 12px;
line-height: 14px;
color: variables.$red;
position: absolute;
right: 0;
top: 14px;
@media (min-width: 3600px) {
font-size: 26px;
line-height: 30px;
top: 20px;
}
@media ((min-width: 2500px) and (max-width: 3599px)) {
font-size: 24px;
line-height: 28px;
top: 20px;
}
@media (min-width: 350px) and (max-width: 1024px) {
right: 16px;
}
@media (max-width: 349px) {
font-size: 11px;
top: 18px;
right: 16px;
&__invalid-feedback {
font-size: 12px;
line-height: 14px;
color: variables.$red;
position: absolute;
right: 0;
top: 14px;
@media (min-width: 3600px) {
font-size: 26px;
line-height: 30px;
top: 20px;
}
@media ((min-width: 2500px) and (max-width: 3599px)) {
font-size: 24px;
line-height: 28px;
top: 20px;
}
@media (min-width: 350px) and (max-width: 1024px) {
right: 16px;
}
@media (max-width: 349px) {
font-size: 11px;
top: 18px;
right: 16px;
}
}
}

9
src/components/Newsletter/Newsletter.tsx
View File

@ -5,7 +5,6 @@ import { Formik, Form, Field, ErrorMessage, FormikHelpers} from "formik";
import styles from "./Newsletter.module.scss";
import NewsletterSchema from "./Schema/NewsletterSchema";
import { Button } from "../Button/Buttom";
interface NewsletterValue {
email: string;
@ -40,10 +39,12 @@ const Newsletter = () => {
<div className={styles["newsletter__form__items__email"]}>
<Field id="email" name="email" placeholder="E-mail" className={errors.email && touched.email && "invalid"}
/>
<ErrorMessage component="span" name="email" className={styles["newsletter-invalid-feedback"]}/>
<ErrorMessage component="span" name="email" className={styles["newsletter__invalid-feedback"]}/>
</div>
<Button type="submit" text="Enviar" className={styles["newsletter__form__items__btn"]} />
<button type="submit" className={styles["newsletter__form__items__btn"]}>
Enviar
</button>
</div>
</Form>
)}

2
src/components/RedesSociais/RedesSociais.module.scss
View File

@ -16,7 +16,7 @@
width: 35px;
&:hover {
filter: contrast(30%);
filter: contrast(60%);
}
&:active {