add app bar to all pages

src/components/Account/Account.jsx

@@ -2,10 +2,12 @@ import React from 'react';
 import { Box, Container, Typography, Button, Switch, Divider, Card, CardContent, IconButton } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
 import NavigationBar from '../NavigationBar/NavigationBar';
+import AppBar from '../AppBar/AppBar';
 
 function Account({userName, userEmail}) {
     return (
         <div>
+            <AppBar />
             <Container maxWidth="xs" style={{ textAlign: 'center', paddingTop: '20px' }}>
                 {/* Title */}
                 <Typography variant="h4" style={{ fontWeight: 'bold', marginBottom: '10px' }}>

src/components/AppBar/AppBar.css

@@ -0,0 +1,9 @@
+.app-bar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    background-color: #4E2A84;
+    margin: 0 0 1.5rem 0;
+    height: 4rem;
+}

src/components/AppBar/AppBar.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import "./AppBar.css"
+
+function AppBar() {
+    return (
+        <div className="app-bar">
+          <h1>CourseBuddy</h1>
+        </div>
+      )
+}
+
+export default AppBar

src/components/Feed/Feed.jsx

@@ -5,6 +5,7 @@ import { Container, Box, Stack } from '@mui/material';
 import { collection, getDocs } from "firebase/firestore"; 
 import {db} from "../../utilities/firebase";
 import "./Feed.css";
+import AppBar from '../AppBar/AppBar';
 
 const fake_post = {
     id: 1, // automatically assigned
@@ -48,6 +49,7 @@ function Feed() {
 
   return (
     <div>
+      <AppBar />
       <Container maxWidth="sm">
         <Box paddingBottom="30px">
           <Stack spacing={3}>

src/components/Submission/Submission.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import { Stack, Button, Alert, Container, TextField, Rating, Typography } from '@mui/material';
 import NavigationBar from '../NavigationBar/NavigationBar';
+import AppBar from '../AppBar/AppBar';
 import "./Submission.css";
 
 // Firebase
@@ -49,6 +50,7 @@ function Submission({ userName }) {
   return (
 
     <div>
+      <AppBar />
       <Container className="submission-page">
         <Stack spacing={3}>
           <TextField required id="title" label="Title" value={title} type='text' onChange={(e) => setTitle(e.target.value)} />