update top navigation and overal theme

src/app/components/Account/AccountCard.tsx

@@ -13,10 +13,8 @@ export const AccountCard = ({
   return (
     <Box
       sx={{
-        background: "#262626",
         padding: 1,
-        borderRadius: 1,
-        margin: 1,
+        borderBottom: "solid 1px gray",
       }}
     >
       <Typography style={{ fontSize: "0.8rem" }} paddingLeft={2}>

src/app/components/AppBar/AppBar.tsx

@@ -0,0 +1,131 @@
+import * as React from "react";
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Toolbar from "@mui/material/Toolbar";
+import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
+import Menu from "@mui/material/Menu";
+import MenuIcon from "@mui/icons-material/Menu";
+import Container from "@mui/material/Container";
+import MenuItem from "@mui/material/MenuItem";
+import PublicIcon from "@mui/icons-material/Public";
+import { LoginButton } from "../Login/LoginButton";
+import { DowloadButton } from "../Backup/DowloadButton";
+import { UploadButton } from "../Backup/UploadButton";
+import { DiscordButton } from "../Discord/DiscordButton";
+import { GitHubButton } from "../Github/GitHubButton";
+
+function ResponsiveAppBar() {
+  const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(
+    null
+  );
+
+  const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorElNav(event.currentTarget);
+  };
+
+  const handleCloseNavMenu = () => {
+    setAnchorElNav(null);
+  };
+
+  return (
+    <AppBar position="static">
+      <Container maxWidth="xl">
+        <Toolbar disableGutters>
+          <PublicIcon sx={{ display: { xs: "none", md: "flex" }, mr: 1 }} />
+          <Typography
+            variant="h6"
+            noWrap
+            component="a"
+            href="/"
+            sx={{
+              mr: 2,
+              display: { xs: "none", md: "flex" },
+              fontFamily: "monospace",
+              fontWeight: 700,
+              letterSpacing: ".3rem",
+              color: "inherit",
+              textDecoration: "none",
+            }}
+          >
+            EVE PI
+          </Typography>
+
+          <Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
+            <IconButton
+              size="large"
+              aria-label="account of current user"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              onClick={handleOpenNavMenu}
+              color="inherit"
+            >
+              <MenuIcon />
+            </IconButton>
+            <Menu
+              id="menu-appbar"
+              anchorEl={anchorElNav}
+              anchorOrigin={{
+                vertical: "bottom",
+                horizontal: "left",
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: "top",
+                horizontal: "left",
+              }}
+              open={Boolean(anchorElNav)}
+              onClose={handleCloseNavMenu}
+              sx={{
+                display: { xs: "block", md: "none" },
+              }}
+            >
+              <MenuItem onClick={handleCloseNavMenu}>
+                <LoginButton />
+              </MenuItem>
+              <MenuItem onClick={handleCloseNavMenu}>
+                <DowloadButton />
+              </MenuItem>
+              <MenuItem onClick={handleCloseNavMenu}>
+                <UploadButton />
+              </MenuItem>
+              <MenuItem onClick={handleCloseNavMenu}>
+                <DiscordButton />
+              </MenuItem>
+              <MenuItem onClick={handleCloseNavMenu}>
+                <GitHubButton />
+              </MenuItem>
+            </Menu>
+          </Box>
+          <PublicIcon sx={{ display: { xs: "flex", md: "none" }, mr: 1 }} />
+          <Typography
+            variant="h5"
+            noWrap
+            component="a"
+            href=""
+            sx={{
+              mr: 2,
+              display: { xs: "flex", md: "none" },
+              flexGrow: 1,
+              fontFamily: "monospace",
+              fontWeight: 700,
+              letterSpacing: ".3rem",
+              color: "inherit",
+              textDecoration: "none",
+            }}
+          >
+            EVE PI
+          </Typography>
+          <Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
+            <LoginButton />
+            <DowloadButton />
+            <UploadButton />
+            <DiscordButton />
+            <GitHubButton />
+          </Box>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+}
+export default ResponsiveAppBar;

src/app/components/Backup/DowloadButton.tsx

@@ -1,17 +1,20 @@
 import { CharacterContext, SessionContext } from "@/app/context/Context";
-import { Button } from "@mui/material";
+import { Button, Tooltip } from "@mui/material";
 import { useContext } from "react";
 
 export const DowloadButton = () => {
   const { characters } = useContext(CharacterContext);
   return (
+    <Tooltip title="Export your EVE PI list to transfer to another device or backup">
       <Button
         href={`data:text/json;charset=utf-8,${encodeURIComponent(
           JSON.stringify(characters)
         )}`}
         download={`eve-pi-characters.json`}
+        sx={{ my: 2, color: "white", display: "block" }}
       >
         Backup
       </Button>
+    </Tooltip>
   );
 };

src/app/components/Backup/UploadButton.tsx

@@ -1,4 +1,4 @@
-import { Box, Button } from "@mui/material";
+import { Box, Button, Tooltip } from "@mui/material";
 import { useState } from "react";
 import { UploadDialog } from "./UploadDialog";
 
@@ -6,12 +6,15 @@ export const UploadButton = () => {
   const [uploadDialogOpen, setUploadDialogOpen] = useState(false);
   return (
     <Box>
+      <Tooltip title="Upload your exported configuration to restore the PI list">
         <Button
           style={{ width: "100%" }}
           onClick={() => setUploadDialogOpen(true)}
+          sx={{ my: 2, color: "white", display: "block" }}
         >
           Restore
         </Button>
+      </Tooltip>
       <UploadDialog
         open={uploadDialogOpen}
         closeDialog={() => setUploadDialogOpen(false)}

src/app/components/Discord/DiscordButton.tsx

@@ -1,14 +1,17 @@
-import { Box, Button } from "@mui/material";
+import { Box, Button, Tooltip } from "@mui/material";
 export const DiscordButton = () => {
   return (
     <Box>
+      <Tooltip title="Come nerd out in discord about PI and this tool">
         <Button
           href="https://discord.gg/MDapvGyw"
           target="_blank"
           style={{ width: "100%" }}
+          sx={{ my: 2, color: "white", display: "block" }}
         >
           Discord
         </Button>
+      </Tooltip>
     </Box>
   );
 };

src/app/components/Github/GitHubButton.tsx

@@ -1,14 +1,17 @@
-import { Box, Button } from "@mui/material";
+import { Box, Button, Tooltip } from "@mui/material";
 export const GitHubButton = () => {
   return (
     <Box>
+      <Tooltip title="Checkout the source of this app">
         <Button
           href="https://github.com/calli-eve/eve-pi"
           target="_blank"
           style={{ width: "100%" }}
+          sx={{ my: 2, color: "white", display: "block" }}
         >
           GitHub
         </Button>
+      </Tooltip>
     </Box>
   );
 };

src/app/components/Login/LoginButton.tsx

@@ -1,4 +1,4 @@
-import { Box, Button } from "@mui/material";
+import { Box, Button, Tooltip } from "@mui/material";
 import { useState } from "react";
 import { LoginDialog } from "./LoginDialog";
 
@@ -6,13 +6,15 @@ export const LoginButton = () => {
   const [loginDialogOpen, setLoginDialogOpen] = useState(false);
   return (
     <Box>
+      <Tooltip title="Login with your EVE characters to track your planets">
         <Button
           style={{ width: "100%" }}
-        variant="contained"
+          sx={{ my: 2, color: "white", display: "block" }}
           onClick={() => setLoginDialogOpen(true)}
         >
           Login
         </Button>
+      </Tooltip>
       <LoginDialog
         open={loginDialogOpen}
         closeDialog={() => setLoginDialogOpen(false)}

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,16 +37,13 @@ export const MainGrid = ({ sessionReady }: { sessionReady: boolean }) => {
   }, {});
 
   return (
+    <ThemeProvider theme={darkTheme}>
+      <CssBaseline />
       <Box sx={{ flexGrow: 1 }}>
+        <ResponsiveAppBar />
         <Grid container spacing={1}>
           <Grid item xs={2}>
-          <Stack direction="row" spacing={1}>
-            <LoginButton />
-            <DowloadButton />
-            <UploadButton />
-            <DiscordButton />
-            <GitHubButton />
-          </Stack>
+            <Stack direction="row" spacing={1}></Stack>
           </Grid>
         </Grid>
         <Grid container spacing={1}>
@@ -47,5 +58,6 @@ export const MainGrid = ({ sessionReady }: { sessionReady: boolean }) => {
           </Grid>
         </Grid>
       </Box>
+    </ThemeProvider>
   );
 };