make grouping clearer and update readme

src/app/components/Account/AccountCard.tsx

@@ -19,7 +19,11 @@ export const AccountCard = ({
         margin: 1,
       }}
     >
-      <Typography paddingLeft={2}>Account: {characters[0].account}</Typography>
+      <Typography style={{ fontSize: "0.8rem" }} paddingLeft={2}>
+        {characters[0].account !== "-"
+          ? `Account: ${characters[0].account}`
+          : ""}
+      </Typography>
       {characters.map((c) => (
         <Stack
           key={c.character.characterId}

src/app/components/Characters/CharacterRow.tsx

@@ -7,7 +7,7 @@ import { styled } from "@mui/material/styles";
 import React from "react";
 import { CharacterDialog } from "./CharacterDialog";
 import { AccessToken } from "@/types";
-import { Box } from "@mui/material";
+import { Box, Button } from "@mui/material";
 import { EVE_IMAGE_URL } from "@/const";
 import { CharacterContext } from "@/app/context/Context";
 
@@ -39,18 +39,21 @@ export const CharacterRow = ({ character }: { character: AccessToken }) => {
         closeDialog={() => setSelectedCharacter(undefined)}
       />
       <Box
-        onClick={() => setSelectedCharacter(character)}
         display="flex"
         flexDirection="column"
+        maxWidth={120}
+        onClick={() => setSelectedCharacter(character)}
       >
         <Image
           src={`${EVE_IMAGE_URL}/characters/${character.character.characterId}/portrait?size=128`}
           alt=""
           width={120}
           height={120}
-          style={{ marginBottom: "0.2rem" }}
+          style={{ marginBottom: "0.2rem", borderRadius: 8 }}
         />
-        {character.character.name}
+        <Button style={{ padding: 3, fontSize: "0.5rem" }} variant="outlined">
+          {character.character.name}
+        </Button>
       </Box>
     </StackItem>
   );

src/app/components/Discord/DiscordButton.tsx

@@ -0,0 +1,14 @@
+import { Box, Button } from "@mui/material";
+export const DiscordButton = () => {
+  return (
+    <Box>
+      <Button
+        href="https://discord.gg/MDapvGyw"
+        target="_blank"
+        style={{ width: "100%" }}
+      >
+        Discord
+      </Button>
+    </Box>
+  );
+};

src/app/components/MainGrid.tsx

@@ -5,6 +5,7 @@ import { AccountCard } from "./Account/AccountCard";
 import { AccessToken } from "@/types";
 import { CharacterContext } from "../context/Context";
 import { DowloadButton } from "./Backup/DowloadButton";
+import { DiscordButton } from "./Discord/DiscordButton";
 
 interface Grouped {
   [key: string]: AccessToken[];
@@ -26,6 +27,7 @@ export const MainGrid = ({ sessionReady }: { sessionReady: boolean }) => {
           <Stack direction="row" spacing={1}>
             <LoginButton />
             <DowloadButton />
+            <DiscordButton />
           </Stack>
         </Grid>
       </Grid>

src/app/components/PlanetaryInteraction/NoPlanetCard.tsx

@@ -13,7 +13,13 @@ const StackItem = styled(Stack)(({ theme }) => ({
 export const NoPlanetCard = ({}: {}) => {
   return (
     <StackItem alignItems="flex-start" height="100%">
-      <Image src={`/noplanet.png`} alt="" width={120} height={120} />
+      <Image
+        src={`/noplanet.png`}
+        alt=""
+        width={120}
+        height={120}
+        style={{ borderRadius: 8, marginRight: 4 }}
+      />
       <Image
         width={64}
         height={64}

src/app/components/PlanetaryInteraction/PlanetCard.tsx

@@ -102,6 +102,7 @@ export const PlanetCard = ({
         alt=""
         width={120}
         height={120}
+        style={{ borderRadius: 8, marginRight: 4 }}
       />
       {extractors.some((e) => {
         if (!e) return true;