update top navigation and overal theme

src/app/components/MainGrid.tsx

@@ -1,5 +1,12 @@
 import { useContext } from "react";
-import { Box, Grid, Stack } from "@mui/material";
+import {
+  Box,
+  CssBaseline,
+  Grid,
+  Stack,
+  ThemeProvider,
+  createTheme,
+} from "@mui/material";
 import { LoginButton } from "./Login/LoginButton";
 import { AccountCard } from "./Account/AccountCard";
 import { AccessToken } from "@/types";
@@ -8,11 +15,18 @@ import { DowloadButton } from "./Backup/DowloadButton";
 import { DiscordButton } from "./Discord/DiscordButton";
 import { GitHubButton } from "./Github/GitHubButton";
 import { UploadButton } from "./Backup/UploadButton";
+import ResponsiveAppBar from "./AppBar/AppBar";
 
 interface Grouped {
   [key: string]: AccessToken[];
 }
 
+const darkTheme = createTheme({
+  palette: {
+    mode: "dark",
+  },
+});
+
 export const MainGrid = ({ sessionReady }: { sessionReady: boolean }) => {
   const { characters } = useContext(CharacterContext);
   const groupByAccount = characters.reduce<Grouped>((group, character) => {
@@ -23,29 +37,27 @@ export const MainGrid = ({ sessionReady }: { sessionReady: boolean }) => {
   }, {});
 
   return (
-    <Box sx={{ flexGrow: 1 }}>
-      <Grid container spacing={1}>
-        <Grid item xs={2}>
-          <Stack direction="row" spacing={1}>
-            <LoginButton />
-            <DowloadButton />
-            <UploadButton />
-            <DiscordButton />
-            <GitHubButton />
-          </Stack>
+    <ThemeProvider theme={darkTheme}>
+      <CssBaseline />
+      <Box sx={{ flexGrow: 1 }}>
+        <ResponsiveAppBar />
+        <Grid container spacing={1}>
+          <Grid item xs={2}>
+            <Stack direction="row" spacing={1}></Stack>
+          </Grid>
         </Grid>
-      </Grid>
-      <Grid container spacing={1}>
-        <Grid item xs={12}>
-          {Object.values(groupByAccount).map((g, id) => (
-            <AccountCard
-              key={`account-${id}-${g[0].account}`}
-              characters={g}
-              sessionReady={sessionReady}
-            />
-          ))}
+        <Grid container spacing={1}>
+          <Grid item xs={12}>
+            {Object.values(groupByAccount).map((g, id) => (
+              <AccountCard
+                key={`account-${id}-${g[0].account}`}
+                characters={g}
+                sessionReady={sessionReady}
+              />
+            ))}
+          </Grid>
         </Grid>
-      </Grid>
-    </Box>
+      </Box>
+    </ThemeProvider>
   );
 };