From fb5ea3908e9c47fd933c795fd2f06f518b2041d3 Mon Sep 17 00:00:00 2001
From: 64J0 <vinigaio97@gmail.com>
Date: Sat, 8 May 2021 16:49:10 -0300
Subject: [PATCH] feat: enhance HeaderPost component, enhance the HeaderPost
 component by adjusting the classname used in the CSS, see also: #12

---
 components/HeaderPost/index.tsx          | 13 +++++------
 components/HeaderPost/styles.module.scss | 29 +++++++++++++-----------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/components/HeaderPost/index.tsx b/components/HeaderPost/index.tsx
index ab08942..ab64075 100644
--- a/components/HeaderPost/index.tsx
+++ b/components/HeaderPost/index.tsx
@@ -2,27 +2,26 @@ import React from "react";
 import Link from "next/link";
 import { FiHome, FiChevronLeft } from "react-icons/fi";
 
-import styles from "../Layout/styles.module.scss";
-import utilStyles from "../../styles/utils.module.css";
-
 import headerStyles from "./styles.module.scss";
 
 const HeaderPost: React.FC = () => {
   return (
-    <div className={headerStyles.container}>
+    <div className={headerStyles['header-post']}>
       <Link href="/contato">
         <a>
           <img
             src="/images/profile.jpg"
-            className={`${styles.headerImage} ${utilStyles.borderCircle} ${headerStyles.contactLink}`}
+            className={headerStyles['header-post__image']}
             alt={"Uma foto minha"}
           />
         </a>
       </Link>
-      <h2 className={headerStyles.backToHome}>
+      <h2 className={headerStyles['header-post__back-home']}>
         <Link href="/">
           <a>
-            <FiChevronLeft size="4rem" className={headerStyles.moveToLeft} />
+            <FiChevronLeft size="4rem"
+              className={headerStyles['header-post__move-left']}
+            />
             <FiHome size="4rem" />
           </a>
         </Link>
diff --git a/components/HeaderPost/styles.module.scss b/components/HeaderPost/styles.module.scss
index 4767d8c..739fe22 100644
--- a/components/HeaderPost/styles.module.scss
+++ b/components/HeaderPost/styles.module.scss
@@ -1,4 +1,6 @@
-.container {
+$prefix: header-post;
+
+.#{$prefix} {
   display: flex;
   flex-direction: row-reverse;
   align-items: baseline;
@@ -21,29 +23,30 @@
   }
 }
 
-.contactLink {
-  transition: transform 4s;
-}
+.#{$prefix}__image {
+  width: 7rem;
+  height: 7rem;
+  margin: 0 auto;
 
-.contactLink:hover {
+  border-radius: 9999px;
   transition: transform 4s;
-  transform: rotateZ(360deg);
+
+  &:hover {
+    transition: transform 4s;
+    transform: rotateZ(360deg);
+  }
 }
 
-.backToHome {
+.#{$prefix}__back-home {
   margin: 0;
   height: 100%;
 
-  a {
-    color: inherit;
-  }
-
-  .moveToLeft {
+  .#{$prefix}__move-left {
     transition: transform 1s;
   }
 
   &:hover {
-    .moveToLeft {
+    .#{$prefix}__move-left {
       transform: translate(-1.2rem, 0);
     }
   }