added icon to the top left, fixed dark mode functionality on sql query page, light/dark mode icons added

Author: matthewxing1

ksqLight/src/App.js

@@ -82,6 +82,9 @@ function App() {
               background3: "#1A1A1A",
               background4: "#1A1A1A",
             },
+            queryPage: {
+              main: "rgb(78, 67, 118, .9)",
+            },
           }),
     },
   });

ksqLight/src/components/Header.js

@@ -1,7 +1,8 @@
 import React from "react";
-import { Typography, createTheme, Toolbar, AppBar, IconButton } from "@mui/material";
+import { Typography, createTheme, Toolbar, AppBar, IconButton, Button } from "@mui/material";
 import SettingsIcon from '@mui/icons-material/Settings';
-import SyncIcon from '@mui/icons-material/Sync';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
 import ArticleIcon from '@mui/icons-material/Article';
 import { useNavigate } from "react-router-dom";
 
@@ -24,12 +25,13 @@ export const Header = ({ fetchMetrics, setFetchMetrics, showSettings, setShowSet
   return (
     <AppBar className="diagonal-hero-bg" position="sticky" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}>
       <Toolbar>
-        <Typography onClick={navHome} theme={ksqLightTheme} variant="h3" sx={{ flexGrow: 1 }} color="mainPage">ksqLight</Typography>
+        <img src={require("../static/ksqLight2.png")} alt="Homepage" width="30" height="30"/>
+        <Typography theme={ksqLightTheme} variant="h3" sx={{ flexGrow: 1, pl: 2 }} color="mainPage">ksqLight</Typography>
         <IconButton aria-label="Documentation" onClick={() => { navGithub() }} color="mainPage">
           <ArticleIcon />
         </IconButton>
         <IconButton aria-label="Refresh" color="mainPage" onClick={() => mode === 'light' ? setMode('dark') : setMode('light')}>
-          <SyncIcon />
+          {mode === 'light' ? <DarkModeIcon/> : <LightModeIcon/>}
         </IconButton>
         <IconButton aria-label="Hide" sx={{ pr: 0 }} onClick={() => setShowSettings(!showSettings)} color="mainPage">
           <SettingsIcon />