Factions screen in Mui

src/Faction/ui/FactionsRoot.tsx

@@ -5,6 +5,14 @@ import { Factions } from "../Factions";
 import { Faction } from "../Faction";
 import { joinFaction } from "../FactionHelpers";
 
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import Link from "@mui/material/Link";
+import Button from "@mui/material/Button";
+import TableBody from "@mui/material/TableBody";
+import { Table, TableCell } from "../../ui/React/Table";
+import TableRow from "@mui/material/TableRow";
+
 interface IProps {
   player: IPlayer;
   router: IRouter;
@@ -17,7 +25,7 @@ export function FactionsRoot(props: IProps): React.ReactElement {
     props.router.toFaction(faction);
   }
 
-  function acceptInvitation(event: React.MouseEvent<HTMLElement>, faction: string): void {
+  function acceptInvitation(event: React.MouseEvent<HTMLButtonElement, MouseEvent>, faction: string): void {
     if (!event.isTrusted) return;
     joinFaction(Factions[faction]);
     setRerender((x) => !x);
@@ -25,41 +33,43 @@ export function FactionsRoot(props: IProps): React.ReactElement {
 
   return (
     <>
-      <h1>Factions</h1>
+      <Typography variant="h5" color="primary">
-      <p>Lists all factions you have joined</p>
+        Factions
+      </Typography>
+      <Typography>Lists all factions you have joined</Typography>
       <br />
-      <ul>
+      <Box display="flex" flexDirection="column">
         {props.player.factions.map((faction: string) => (
-          <li key={faction}>
+          <Link key={faction} variant="h6" onClick={() => openFaction(Factions[faction])}>
-            <a
+            {faction}
-              className="a-link-button"
+          </Link>
-              onClick={() => openFaction(Factions[faction])}
-              style={{ padding: "4px", margin: "4px", display: "inline-block" }}
-            >
-              {faction}
-            </a>
-          </li>
         ))}
-      </ul>
+      </Box>
       <br />
-      <h1>Outstanding Faction Invitations</h1>
+      {props.player.factionInvitations.length > 0 && (
-      <p style={{ width: "70%" }}>
+        <>
-        Lists factions you have been invited to. You can accept these faction invitations at any time.
+          <Typography variant="h5" color="primary">
-      </p>
+            Outstanding Faction Invitations
-      <ul>
+          </Typography>
-        {props.player.factionInvitations.map((faction: string) => (
+          <Typography>
-          <li key={faction} style={{ padding: "6px", margin: "6px" }}>
+            Lists factions you have been invited to. You can accept these faction invitations at any time.
-            <p style={{ display: "inline", margin: "4px", padding: "4px" }}>{faction}</p>
+          </Typography>
-            <a
+          <Table size="small" padding="none">
-              className="a-link-button"
+            <TableBody>
-              onClick={(e) => acceptInvitation(e, faction)}
+              {props.player.factionInvitations.map((faction: string) => (
-              style={{ display: "inline", margin: "4px", padding: "4px" }}
+                <TableRow key={faction}>
-            >
+                  <TableCell>
-              Accept Faction Invitation
+                    <Typography noWrap>{faction}</Typography>
-            </a>
+                  </TableCell>
-          </li>
+                  <TableCell align="right">
-        ))}
+                    <Button onClick={(e) => acceptInvitation(e, faction)}>Join!</Button>
-      </ul>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </>
+      )}
     </>
   );
 }

src/ui/React/GameOptionsRoot.tsx

@@ -486,13 +486,13 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
             <Tooltip title={<Typography>export</Typography>}>
               <Button onClick={() => props.export()}>
                 <DownloadIcon color="primary" />
-                <Typography>Export</Typography>
+                Export
               </Button>
             </Tooltip>
             <Tooltip title={<Typography>import</Typography>}>
               <Button onClick={importSave}>
                 <UploadIcon color="primary" />
-                <Typography>Import</Typography>
+                Import
                 <input ref={importInput} id="import-game-file-selector" type="file" hidden onChange={onImport} />
               </Button>
             </Tooltip>