feat: SiteHeader has been rebuilt

The SiteHeader component has been migrated from the old design.

Updated some scss file names for a more consistent naming convention.

Closes #401

src/App.scss

@@ -67,7 +67,7 @@
 // 6. Components
 //    Specific UI components. This is where majority of our work takes place
 //    and our UI components are often composed of Objects and Components
-@import 'scss/components/sparkeats-header';
+@import 'scss/components/site-header';
 @import 'scss/components/buttons';
 @import 'scss/components/place-card';
 @import 'scss/components/stars';

src/App.tsx

@@ -1,10 +1,11 @@
 import { Outlet } from 'react-router-dom'
 import './App.scss'
+import { SiteHeader } from './components/SiteHeader';
 
 function App() {
   return (
     <div>
-      <header>Site Header</header>
+      <SiteHeader />
       <Outlet />
     </div>
   )

src/components/SiteHeader.tsx

@@ -0,0 +1,9 @@
+export const SiteHeader = () => {
+  return (
+    <header className="site-header">
+      <h1 className="site-header__title">Sparkeats by Sparkbox</h1>
+      <a className="site-header__logo" href="/" aria-label="Return to Sparkeats Homepage" />
+    </header>
+  );
+};
+

src/scss/components/_sparkeats-header.scss → src/scss/components/_site-header.scss

@@ -1,4 +1,4 @@
-.sparkeats-header {
+.site-header {
   background-color: $primary-color;
   padding: 1em;
   box-sizing: border-box;