Character Overview Overhaul

* Moved hardcoded styles from the hardcoded container div into a class, and assigned that class to a Mui component.
* Otherwise removed excess layered components
* Visibility toggle area no longer occupies the whole width of the overview area. This was blocking input near the top right (noticeable in corp).

src/ui/React/CharacterOverview.tsx

@@ -8,11 +8,8 @@ import { numeralWrapper } from "../../ui/numeralFormat";
 import { Reputation } from "./Reputation";
 
 import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
 import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import IconButton from "@mui/material/IconButton";
@@ -150,162 +147,150 @@ export function CharacterOverview({ save }: IProps): React.ReactElement {
 
   const classes = useStyles();
   return (
-    <Paper square>
-      <Box m={1}>
-        <Table size="small">
-          <TableBody>
-            <TableRow>
-              <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
-                <Typography classes={{ root: classes.hp }}>HP&nbsp;</Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cellNone }}>
-                <Typography classes={{ root: classes.hp }}>
-                  {numeralWrapper.formatHp(player.hp)}&nbsp;/&nbsp;{numeralWrapper.formatHp(player.max_hp)}
-                </Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cellNone }}>
-                <Typography id="overview-hp-hook" classes={{ root: classes.hp }}>
-                  {/*Hook for player scripts*/}
-                </Typography>
-              </TableCell>
-            </TableRow>
+    <Table sx={{ display: "block", m: 1 }}>
+      <TableRow>
+        <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
+          <Typography classes={{ root: classes.hp }}>HP&nbsp;</Typography>
+        </TableCell>
+        <TableCell align="right" classes={{ root: classes.cellNone }}>
+          <Typography classes={{ root: classes.hp }}>
+            {numeralWrapper.formatHp(player.hp)}&nbsp;/&nbsp;{numeralWrapper.formatHp(player.max_hp)}
+          </Typography>
+        </TableCell>
+        <TableCell align="right" classes={{ root: classes.cellNone }}>
+          <Typography id="overview-hp-hook" classes={{ root: classes.hp }}>
+            {/*Hook for player scripts*/}
+          </Typography>
+        </TableCell>
+      </TableRow>
 
-            <TableRow>
-              <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
-                <Typography classes={{ root: classes.money }}>Money&nbsp;</Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cellNone }}>
-                <Typography classes={{ root: classes.money }}>
-                  {numeralWrapper.formatMoney(player.money.toNumber())}
-                </Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cellNone }}>
-                <Typography id="overview-money-hook" classes={{ root: classes.money }}>
-                  {/*Hook for player scripts*/}
-                </Typography>
-              </TableCell>
-            </TableRow>
+      <TableRow>
+        <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
+          <Typography classes={{ root: classes.money }}>Money&nbsp;</Typography>
+        </TableCell>
+        <TableCell align="right" classes={{ root: classes.cellNone }}>
+          <Typography classes={{ root: classes.money }}>
+            {numeralWrapper.formatMoney(player.money.toNumber())}
+          </Typography>
+        </TableCell>
+        <TableCell align="right" classes={{ root: classes.cellNone }}>
+          <Typography id="overview-money-hook" classes={{ root: classes.money }}>
+            {/*Hook for player scripts*/}
+          </Typography>
+        </TableCell>
+      </TableRow>
 
-            <TableRow>
-              <TableCell component="th" scope="row" classes={{ root: classes.cell }}>
-                <Typography classes={{ root: classes.hack }}>Hack&nbsp;</Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cell }}>
-                <Typography classes={{ root: classes.hack }}>
-                  {numeralWrapper.formatSkill(player.hacking_skill)}
-                </Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cell }}>
-                <Typography id="overview-hack-hook" classes={{ root: classes.hack }}>
-                  {/*Hook for player scripts*/}
-                </Typography>
-              </TableCell>
-            </TableRow>
+      <TableRow>
+        <TableCell component="th" scope="row" classes={{ root: classes.cell }}>
+          <Typography classes={{ root: classes.hack }}>Hack&nbsp;</Typography>
+        </TableCell>
+        <TableCell align="right" classes={{ root: classes.cell }}>
+          <Typography classes={{ root: classes.hack }}>{numeralWrapper.formatSkill(player.hacking_skill)}</Typography>
+        </TableCell>
+        <TableCell align="right" classes={{ root: classes.cell }}>
+          <Typography id="overview-hack-hook" classes={{ root: classes.hack }}>
+            {/*Hook for player scripts*/}
+          </Typography>
+        </TableCell>
+      </TableRow>
 
-            <TableRow>
-              <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
-                <Typography classes={{ root: classes.combat }}>Str&nbsp;</Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cellNone }}>
-                <Typography classes={{ root: classes.combat }}>
-                  {numeralWrapper.formatSkill(player.strength)}
-                </Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cellNone }}>
-                <Typography id="overview-str-hook" classes={{ root: classes.combat }}>
-                  {/*Hook for player scripts*/}
-                </Typography>
-              </TableCell>
-            </TableRow>
+      <TableRow>
+        <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
+          <Typography classes={{ root: classes.combat }}>Str&nbsp;</Typography>
+        </TableCell>
+        <TableCell align="right" classes={{ root: classes.cellNone }}>
+          <Typography classes={{ root: classes.combat }}>{numeralWrapper.formatSkill(player.strength)}</Typography>
+        </TableCell>
+        <TableCell align="right" classes={{ root: classes.cellNone }}>
+          <Typography id="overview-str-hook" classes={{ root: classes.combat }}>
+            {/*Hook for player scripts*/}
+          </Typography>
+        </TableCell>
+      </TableRow>
 
-            <TableRow>
-              <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
-                <Typography classes={{ root: classes.combat }}>Def&nbsp;</Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cellNone }}>
-                <Typography classes={{ root: classes.combat }}>{numeralWrapper.formatSkill(player.defense)}</Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cellNone }}>
-                <Typography id="overview-def-hook" classes={{ root: classes.combat }}>
-                  {/*Hook for player scripts*/}
-                </Typography>
-              </TableCell>
-            </TableRow>
+      <TableRow>
+        <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
+          <Typography classes={{ root: classes.combat }}>Def&nbsp;</Typography>
+        </TableCell>
+        <TableCell align="right" classes={{ root: classes.cellNone }}>
+          <Typography classes={{ root: classes.combat }}>{numeralWrapper.formatSkill(player.defense)}</Typography>
+        </TableCell>
+        <TableCell align="right" classes={{ root: classes.cellNone }}>
+          <Typography id="overview-def-hook" classes={{ root: classes.combat }}>
+            {/*Hook for player scripts*/}
+          </Typography>
+        </TableCell>
+      </TableRow>
 
-            <TableRow>
-              <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
-                <Typography classes={{ root: classes.combat }}>Dex&nbsp;</Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cellNone }}>
-                <Typography classes={{ root: classes.combat }}>
-                  {numeralWrapper.formatSkill(player.dexterity)}
-                </Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cellNone }}>
-                <Typography id="overview-dex-hook" classes={{ root: classes.combat }}>
-                  {/*Hook for player scripts*/}
-                </Typography>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell component="th" scope="row" classes={{ root: classes.cell }}>
-                <Typography classes={{ root: classes.combat }}>Agi&nbsp;</Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cell }}>
-                <Typography classes={{ root: classes.combat }}>{numeralWrapper.formatSkill(player.agility)}</Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cell }}>
-                <Typography id="overview-agi-hook" classes={{ root: classes.combat }}>
-                  {/*Hook for player scripts*/}
-                </Typography>
-              </TableCell>
-            </TableRow>
+      <TableRow>
+        <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
+          <Typography classes={{ root: classes.combat }}>Dex&nbsp;</Typography>
+        </TableCell>
+        <TableCell align="right" classes={{ root: classes.cellNone }}>
+          <Typography classes={{ root: classes.combat }}>{numeralWrapper.formatSkill(player.dexterity)}</Typography>
+        </TableCell>
+        <TableCell align="right" classes={{ root: classes.cellNone }}>
+          <Typography id="overview-dex-hook" classes={{ root: classes.combat }}>
+            {/*Hook for player scripts*/}
+          </Typography>
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell component="th" scope="row" classes={{ root: classes.cell }}>
+          <Typography classes={{ root: classes.combat }}>Agi&nbsp;</Typography>
+        </TableCell>
+        <TableCell align="right" classes={{ root: classes.cell }}>
+          <Typography classes={{ root: classes.combat }}>{numeralWrapper.formatSkill(player.agility)}</Typography>
+        </TableCell>
+        <TableCell align="right" classes={{ root: classes.cell }}>
+          <Typography id="overview-agi-hook" classes={{ root: classes.combat }}>
+            {/*Hook for player scripts*/}
+          </Typography>
+        </TableCell>
+      </TableRow>
 
-            <TableRow>
-              <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
-                <Typography classes={{ root: classes.cha }}>Cha&nbsp;</Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cellNone }}>
-                <Typography classes={{ root: classes.cha }}>{numeralWrapper.formatSkill(player.charisma)}</Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cellNone }}>
-                <Typography id="overview-cha-hook" classes={{ root: classes.cha }}>
-                  {/*Hook for player scripts*/}
-                </Typography>
-              </TableCell>
-            </TableRow>
-            <Intelligence />
+      <TableRow>
+        <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
+          <Typography classes={{ root: classes.cha }}>Cha&nbsp;</Typography>
+        </TableCell>
+        <TableCell align="right" classes={{ root: classes.cellNone }}>
+          <Typography classes={{ root: classes.cha }}>{numeralWrapper.formatSkill(player.charisma)}</Typography>
+        </TableCell>
+        <TableCell align="right" classes={{ root: classes.cellNone }}>
+          <Typography id="overview-cha-hook" classes={{ root: classes.cha }}>
+            {/*Hook for player scripts*/}
+          </Typography>
+        </TableCell>
+      </TableRow>
+      <Intelligence />
 
-            <TableRow>
-              <TableCell component="th" scope="row" classes={{ root: classes.cell }}>
-                <Typography id="overview-extra-hook-0" classes={{ root: classes.hack }}>
-                  {/*Hook for player scripts*/}
-                </Typography>
-              </TableCell>
-              <TableCell component="th" scope="row" align="right" classes={{ root: classes.cell }}>
-                <Typography id="overview-extra-hook-1" classes={{ root: classes.hack }}>
-                  {/*Hook for player scripts*/}
-                </Typography>
-              </TableCell>
-              <TableCell component="th" scope="row" align="right" classes={{ root: classes.cell }}>
-                <Typography id="overview-extra-hook-2" classes={{ root: classes.hack }}>
-                  {/*Hook for player scripts*/}
-                </Typography>
-              </TableCell>
-            </TableRow>
-            <Work />
-            <Bladeburner />
+      <TableRow>
+        <TableCell component="th" scope="row" classes={{ root: classes.cell }}>
+          <Typography id="overview-extra-hook-0" classes={{ root: classes.hack }}>
+            {/*Hook for player scripts*/}
+          </Typography>
+        </TableCell>
+        <TableCell component="th" scope="row" align="right" classes={{ root: classes.cell }}>
+          <Typography id="overview-extra-hook-1" classes={{ root: classes.hack }}>
+            {/*Hook for player scripts*/}
+          </Typography>
+        </TableCell>
+        <TableCell component="th" scope="row" align="right" classes={{ root: classes.cell }}>
+          <Typography id="overview-extra-hook-2" classes={{ root: classes.hack }}>
+            {/*Hook for player scripts*/}
+          </Typography>
+        </TableCell>
+      </TableRow>
+      <Work />
+      <Bladeburner />
 
-            <TableRow>
-              <TableCell align="center" colSpan={2} classes={{ root: classes.cellNone }}>
-                <IconButton onClick={save}>
-                  <SaveIcon color={Settings.AutosaveInterval !== 0 ? "primary" : "error"} />
-                </IconButton>
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </Box>
-    </Paper>
+      <TableRow>
+        <TableCell align="center" colSpan={2} classes={{ root: classes.cellNone }}>
+          <IconButton onClick={save}>
+            <SaveIcon color={Settings.AutosaveInterval !== 0 ? "primary" : "error"} />
+          </IconButton>
+        </TableCell>
+      </TableRow>
+    </Table>
   );
 }

src/ui/React/Overview.tsx

@@ -1,17 +1,29 @@
 import React, { useState } from "react";
 
 import makeStyles from "@mui/styles/makeStyles";
-import Box from "@mui/material/Box";
 import Collapse from "@mui/material/Collapse";
 import Fab from "@mui/material/Fab";
+import Paper from "@mui/material/Paper";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import { use } from "../Context";
 import { Page } from "../Router";
 
 const useStyles = makeStyles({
-  nobackground: {
-    backgroundColor: "#0000",
+  visibilityToggle: {
+    backgroundColor: "transparent",
+    position: "absolute",
+    top: "100%",
+    right: 0,
+  },
+  overviewContainer: {
+    position: "fixed",
+    top: 0,
+    right: 0,
+    zIndex: 1500,
+    display: "flex",
+    justifyContent: "flex-end",
+    flexDirection: "column",
   },
 });
 
@@ -30,16 +42,13 @@ export function Overview({ children }: IProps): React.ReactElement {
   } else {
     icon = <VisibilityIcon color="primary" />;
   }
+
   return (
-    <div style={{ position: "fixed", top: 0, right: 0, zIndex: 1500 }}>
-      <Box display="flex" justifyContent="flex-end" flexDirection={"column"}>
-        <Collapse in={open}>{children}</Collapse>
-        <Box display="flex" justifyContent="flex-end">
-          <Fab classes={{ root: classes.nobackground }} onClick={() => setOpen((old) => !old)}>
-            {icon}
-          </Fab>
-        </Box>
-      </Box>
-    </div>
+    <Paper square classes={{ root: classes.overviewContainer }}>
+      <Collapse in={open}>{children}</Collapse>
+      <Fab classes={{ root: classes.visibilityToggle }} onClick={() => setOpen((old) => !old)}>
+        {icon}
+      </Fab>
+    </Paper>
   );
-}
+}