changed classnames according to BEM structure

src/commons/header/header.css

@@ -12,7 +12,7 @@
   position: relative;
 }
 
-.text-box {
+.header__text-box {
   position: absolute;
   top: 40%;
   left: 50%;
@@ -20,13 +20,13 @@
   text-align: center;
 }
 
-.logo-box {
+.header__logo-box {
   position: absolute;
   top: 4rem;
   left: 4rem;
 }
 
-.logo {
+.header__logo {
   height: 3.5rem;
 }
 
@@ -38,7 +38,7 @@
   margin-bottom: 6rem;
 }
 
-.heading-primary-main {
+.heading-primary--main {
   display: block;
   font-size: 6rem;
   font-weight: 400;
@@ -47,7 +47,7 @@
   animation: moveInLeft 1s ease-out;
 }
 
-.heading-primary-sub {
+.heading-primary--sub {
   display: block;
   font-size: 2rem;
   font-weight: 700;

src/commons/header/header.js

@@ -5,15 +5,15 @@ import Button from "../../components/button/button";
 function Header() {
   return (
     <header className="header">
-      <div className="logo-box">
+      <div className="header__logo-box">
-        <img src={logoWhite} alt="Logo" className="logo"></img>
+        <img src={logoWhite} alt="Logo" className="header__logo"></img>
       </div>
-      <div className="text-box">
+      <div className="header__text-box">
         <h1 className="heading-primary">
-          <span className="heading-primary-main">Outdoors</span>
+          <span className="heading-primary--main">Outdoors</span>
-          <span className="heading-primary-sub">is where life happens</span>
+          <span className="heading-primary--sub">is where life happens</span>
         </h1>
-        <Button animationName={"move-in-bottom"} text={"Discover our tours"} />
+        <Button animationName={"move-in--bottom"} text={"Discover our tours"} />
       </div>
     </header>
   );

src/components/button/button.css

@@ -10,7 +10,7 @@
   font-size: 1.6rem;
 }
 
-.move-in-bottom {
+.move-in--bottom {
   animation: moveInBottom 0.5s ease-out 0.75s;
   animation-fill-mode: backwards;
 }
@@ -25,7 +25,7 @@
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
 }
 
-.btn-white {
+.btn--white {
   background-color: #fff;
   color: #777;
 }
@@ -43,7 +43,7 @@
   transition: all 0.4s;
 }
 
-.btn-white::after {
+.btn--white::after {
   background-color: white;
 }
 

src/components/button/button.jsx

@@ -6,9 +6,9 @@ function Button(props) {
     <a
       href="#"
       className={
-        animationName === "move-in-bottom"
+        animationName === "move-in--bottom"
-          ? "btn btn-white move-in-bottom"
+          ? "btn btn--white move-in--bottom"
-          : "btn btn-white"
+          : "btn btn--white"
       }
     >
       {text}