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 (
-    <Button
-      href={`data:text/json;charset=utf-8,${encodeURIComponent(
-        JSON.stringify(characters)
-      )}`}
-      download={`eve-pi-characters.json`}
-    >
-      Backup
-    </Button>
+    <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>
-      <Button
-        style={{ width: "100%" }}
-        onClick={() => setUploadDialogOpen(true)}
-      >
-        Restore
-      </Button>
+      <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>
-      <Button
-        href="https://discord.gg/MDapvGyw"
-        target="_blank"
-        style={{ width: "100%" }}
-      >
-        Discord
-      </Button>
+      <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>
-      <Button
-        href="https://github.com/calli-eve/eve-pi"
-        target="_blank"
-        style={{ width: "100%" }}
-      >
-        GitHub
-      </Button>
+      <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>
-      <Button
-        style={{ width: "100%" }}
-        variant="contained"
-        onClick={() => setLoginDialogOpen(true)}
-      >
-        Login
-      </Button>
+      <Tooltip title="Login with your EVE characters to track your planets">
+        <Button
+          style={{ width: "100%" }}
+          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,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>
   );
 };