refactor(form): new names for html classes were created using BEM

src/assets/icons/scroll-top.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="13" viewBox="0 0 25 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.7428 11.3959C23.741 11.6959 23.6177 11.9953 23.373 12.226L23.3728 12.2261C22.8668 12.7035 22.037 12.7035 21.5311 12.2261L21.5232 12.2345L21.5311 12.2261L12.3457 3.5599L12.0712 3.30091L11.7967 3.5599L2.61178 12.2258C2.10549 12.7033 1.27571 12.7032 0.769767 12.2259L0.769708 12.2258C0.525704 11.9957 0.402467 11.6972 0.400037 11.398C0.401876 11.0981 0.525111 10.7986 0.769782 10.5678L0.769785 10.5678L11.1506 0.773762C11.4013 0.537307 11.7333 0.415846 12.0712 0.415846C12.4093 0.415846 12.7415 0.537566 12.9922 0.773969L23.3728 10.568L23.3729 10.5681C23.6171 10.7983 23.7403 11.0968 23.7428 11.3959Z" fill="white" stroke="white" stroke-width="0.8"/>
+</svg>

src/pages/Institutional/Contact/fragments/Input.tsx

@@ -9,10 +9,12 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
 
 export function Input({ label, name, error, ...props }: InputProps) {
 	return (
-		<div className="form-group">
-			<label htmlFor={name}>{label}</label>
+		<div className="form__group">
+			<label className="form__label" htmlFor={name}>
+				{label}
+			</label>
 
-			<div className="form-group-content">
+			<div className="form__content">
 				<ErrorMessage
 					className="error-message"
 					component={'span'}
@@ -21,7 +23,7 @@ export function Input({ label, name, error, ...props }: InputProps) {
 				<Field
 					id={name}
 					name={name}
-					className={`form-input ${error}`}
+					className={`form__input ${error}`}
 					{...props}
 				/>
 			</div>

src/pages/Institutional/Contact/index.module.scss

@@ -3,21 +3,21 @@
 	height: 100%;
 
 	margin-bottom: 69.56px;
-}
 
-.form {
-	fieldset {
-		width: 100%;
-		border: none;
+	&__form {
+		.form__container {
+			width: 100%;
+			border: none;
+		}
 	}
 }
 
 .form :global {
-	.form-group {
+	.form__group {
 		margin-bottom: 12px;
 	}
 
-	label {
+	.form__label {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
@@ -32,7 +32,7 @@
 		}
 	}
 
-	.form-group-content {
+	.form__content {
 		position: relative;
 		width: 100%;
 
@@ -56,7 +56,7 @@
 		}
 	}
 
-	.form-input {
+	.form__input {
 		display: block;
 
 		width: 100%;
@@ -133,6 +133,13 @@
 
 		text-transform: uppercase;
 
+		transition: 200ms ease-in-out;
+
+		&:hover {
+			color: var(--clr-common-black);
+			background-color: var(--clr-primary-blue-500);
+		}
+
 		@media screen and (min-width: 2500px) {
 			height: 71px;
 		}

src/pages/Institutional/Contact/index.tsx

@@ -4,7 +4,7 @@ import { Input } from './fragments/Input'
 
 import validadeShema from './schema/FormSchema'
 
-import css from './index.module.scss'
+import styles from './index.module.scss'
 
 export function Contact() {
 	const initialValues = useMemo(() => {
@@ -20,14 +20,12 @@ export function Contact() {
 	}, [])
 
 	return (
-		<section className={css.contact}>
+		<section className={styles['contact']}>
 			<div>
 				<h2 className="title">Preencha o formulário</h2>
 
 				<Formik
 					onSubmit={(values, e) => {
-						e.validateField('email')
-
 						e.resetForm({
 							isSubmitting: true,
 						})
@@ -37,8 +35,8 @@ export function Contact() {
 				>
 					{({ errors, touched }) => {
 						return (
-							<Form className={css.form}>
-								<fieldset className={css['form-container']}>
+							<Form className={`${styles['contact__form']} ${styles['form']}`}>
+								<fieldset className={styles['form__container']}>
 									<Input
 										label="Nome"
 										name="fullname"
@@ -93,7 +91,7 @@ export function Contact() {
 										<Field id="terms" name="terms" type="checkbox" />
 									</div>
 
-									<button className={css.submit} type="submit">
+									<button className={styles['submit']} type="submit">
 										Cadastre-se
 									</button>
 								</fieldset>

src/routes/index.module.scss

@@ -70,6 +70,9 @@ main :global {
 	}
 
 	&-top {
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		background-color: var(--clr-gray-400);
 		border-radius: 100%;
 	}

src/routes/index.tsx

@@ -30,7 +30,7 @@ export function ScrollFixed() {
 				<img src={whatsappImg} alt="" />
 			</a>
 			<a className={styles['scroll__fixed-top']} href="#root">
-				<span></span>
+				TOP
 			</a>
 		</div>
 	)
@@ -74,10 +74,22 @@ export function Router() {
 				>
 					<Route index element={<About />} />
 					<Route path="/contact" element={<Contact />} />
-					<Route path="/payments" element={<h2>Formas de pagamentos</h2>} />
-					<Route path="/exchange" element={<h2>Troca e Devolução</h2>} />
-					<Route path="/privacity" element={<h2>Privacidade</h2>} />
-					<Route path="/shipping" element={<h2>Entrega</h2>} />
+					<Route
+						path="/payments"
+						element={<h2 className="title">Formas de pagamentos</h2>}
+					/>
+					<Route
+						path="/exchange"
+						element={<h2 className="title">Troca e Devolução</h2>}
+					/>
+					<Route
+						path="/privacity"
+						element={<h2 className="title">Privacidade</h2>}
+					/>
+					<Route
+						path="/shipping"
+						element={<h2 className="title">Entrega</h2>}
+					/>
 				</Route>
 			</Route>
 		</Routes>