refactor(header): refactor styles in header

src/template/Header/containers/@types/index.d.ts

@@ -3,3 +3,8 @@ export type ISearchProps = HTMLAttributes<HTMLDivElement>
 export interface ITopProps {
 	handleClickOpen: () => void
 }
+
+export interface IBottomProps {
+	isMenuOpen: boolean
+	handleClose: () => void
+}

src/template/Header/containers/_Bottom.tsx

@@ -1,13 +1,9 @@
-import { HTMLAttributes } from 'react'
+import { IBottomProps } from './@types'
+
 import closeIcon from '../../../assets/icons/x.svg'
 
 import styles from '../index.module.scss'
 
-export interface IBottomProps {
-	isMenuOpen: boolean
-	handleClose: () => void
-}
-
 export function Bottom({ isMenuOpen, handleClose }: IBottomProps) {
 	function closeMenu(e: any) {
 		if (e.target.classList.contains(styles.menu)) {

src/template/Header/containers/_Top.tsx

@@ -12,11 +12,15 @@ import styles from '../index.module.scss'
 export function Top({ handleClickOpen }: ITopProps) {
 	return (
 		<div className={styles['content']}>
-			<button type="button" onClick={handleClickOpen} className={styles.open}>
+			<button
+				type="button"
+				onClick={handleClickOpen}
+				className={styles['button-open']}
+			>
 				<img src={openIcon} alt="ícone do botão para abrir o menu" />
 			</button>
 
-			<a className={styles.logo} href="/">
+			<a className={styles['logo']} href="/">
 				<picture>
 					<source media="(min-width:1025px)" srcSet={logoMediumImg} />
 					<img src={logoImg} alt="logo da M3 Academy" />

src/template/Header/index.module.scss

@@ -77,12 +77,15 @@ $containers: (
 	border: 2px solid var(--clr-gray-150);
 	border-radius: 5px;
 
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
 	background-color: var(--clr-common-white);
 
+	&,
+	button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
 	input {
 		width: 100%;
 		padding: 0 9px 0 16px;
@@ -92,7 +95,7 @@ $containers: (
 		font-size: var(--txt-normal);
 		line-height: 16.41px;
 
-		@media screen and (min-width: 2500px) {
+		@media only screen and (min-width: 2500px) {
 			line-height: 32.81px;
 		}
 	}
@@ -103,10 +106,6 @@ $containers: (
 		width: 36px;
 		height: 100%;
 
-		display: flex;
-		align-items: center;
-		justify-content: center;
-
 		background-color: var(--clr-common-white);
 	}
 }
@@ -141,12 +140,15 @@ $containers: (
 	align-items: center;
 
 	a {
-		display: block;
 		font-weight: 400;
 		font-size: var(--txt-normal);
 		line-height: 16.41px;
+
+		display: block;
+
 		text-transform: uppercase;
 		color: var(--clr-common-white);
+
 		transition: color 200ms linear;
 
 		&:hover {
@@ -171,7 +173,7 @@ $containers: (
 }
 
 // remove open menu mobile button for large devices 1025 > x
-.open {
+.button-open {
 	display: flex;
 
 	@media only screen and (min-width: 1025px) {
@@ -195,7 +197,6 @@ $containers: (
 .menu {
 	@media only screen and (max-width: 1024px) {
 		width: 100vw;
-		height: 100vh;
 
 		position: fixed;
 		left: -100%;
@@ -204,9 +205,13 @@ $containers: (
 		background-color: transparent;
 		transition: 300ms ease;
 
+		&,
+		&-content {
+			height: 100vh;
+		}
+
 		&-content {
 			width: function.fluid(map-get($containers, 'sm'), 1024px);
-			height: 100vh;
 		}
 	}
 
@@ -221,7 +226,6 @@ $containers: (
 	@media only screen and (max-width: 768px) {
 		&-content {
 			width: function.fluid(map-get($containers, 'xs'), 375px);
-			height: 100vh;
 		}
 	}
 }

src/template/Header/index.tsx

@@ -9,7 +9,7 @@ import styles from './index.module.scss'
 export const Header = () => {
 	const [isMenuOpen, setIsMenuOpen] = useState(false)
 
-	const TopProps = {
+	const topProps = {
 		handleClickOpen: useMemo(
 			() =>
 				function () {
@@ -19,7 +19,7 @@ export const Header = () => {
 		),
 	}
 
-	const BottomProps = {
+	const bottomProps = {
 		isMenuOpen,
 		handleClose: useMemo(
 			() =>
@@ -33,16 +33,15 @@ export const Header = () => {
 	return (
 		<header className={styles['component']}>
 			<nav>
-				<Top {...TopProps} />
+				<Top {...topProps} />
 
 				<div className={`${styles['search-bottom']}`}>
 					<Search
-						className={`${styles.search} ${styles['search-bottom-content']}
-						`}
+						className={`${styles['search']} ${styles['search-bottom-content']}`}
 					/>
 				</div>
 
-				<Bottom {...BottomProps} />
+				<Bottom {...bottomProps} />
 			</nav>
 		</header>
 	)