make grouping clearer and update readme

README.md

@@ -1,6 +1,8 @@
 # Callis PI tool
 
-Simple tool to track your PI planet extractors. Login with your characters and hit refresh.
+Simple tool to track your PI planet extractors. Login with your characters and enjoy the PI!
+
+Any questions, feedback or suggestions are welcome at [EVE PI Discord](https://discord.gg/MDapvGyw)
 
 ## [Avanto hosted PI tool](https://pi.avanto.tk)
 
@@ -15,6 +17,12 @@ Features:
   - Highlight the planet if extractor has stopped or has not been started.
 - Backup to download characters to a file (restore not implemented yet)
 
+## Basic usage
+
+1. Login with your characters
+2. Group the character to accounts by clicking on the character name and setting the account name
+3. Make sure your extractors are running!
+
 ## Security
 
 All eve sso information is stored in your browser and refresh token is encrypted with apps EVE SSO secret. Backend processes only the token exchange, refresh and revoke that need the EVE_SSO_SECRET. Everything else is handled in frontend.

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 }}
         />
+        <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;