adding div with class to App.jsx, adding css to App.scss, adding a class to AppHeader.jsx and css to AppHeader.scss

Author: OrlandoMoralesKuan

src/components/App/App.jsx

@@ -6,10 +6,12 @@ import AppHeader from "../AppHeader/AppHeader";
 
 const App = () => (
   <div className="app">
-    <header className="app__header">
-      <h1 className="app__heading">CYF Hotel</h1>
-    </header>
-    <AppHeader />
+    <div className="header">
+      <header className="app__header">
+        <h1 className="app__heading">CYF Hotel</h1>
+      </header>
+      <AppHeader />
+    </div>
     <Bookings />
 
     <Deck />

src/components/App/App.scss

@@ -14,6 +14,7 @@
 
 .app__heading {
   margin: 0;
+  margin-top: 30%;
 }
 
 .footer {

src/components/AppHeader/AppHeader.jsx

@@ -1,4 +1,4 @@
 import Logo from "@/assets/spa-logo.png";
 import "./AppHeader.scss";
-const AppHeader = () => <img src={Logo}></img>;
+const AppHeader = () => <img className="LogoImg" src={Logo}></img>;
 export default AppHeader;

src/components/AppHeader/AppHeader.scss

@@ -7,3 +7,16 @@
     max-width: 100px;
   }
 }
+
+.header {
+  margin-right: 35%;
+  margin-left: 35%;
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-evenly;
+}
+
+.LogoImg {
+  height: 150px;
+  width: 150px;
+}