feat: enhance HeaderPost component,

enhance the HeaderPost component by adjusting the classname used in the CSS, see also: #12
64J0 · Oct 23, 2021 · fb5ea39 · fb5ea39
1 parent c32a067
commit fb5ea39
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 20 deletions.
diff --git 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
@@ -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);
     }
   }