From b7a996718b8010e3f047b7e2455201b878b5023f Mon Sep 17 00:00:00 2001
From: catloversg <152669316+catloversg@users.noreply.github.com>
Date: Mon, 8 Jul 2024 04:33:49 +0700
Subject: [PATCH] UI: Tweak Hacknet summary (#1466)

---
 src/Hacknet/ui/PlayerInfo.tsx |  2 +-
 src/ui/React/StatsTable.tsx   | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/Hacknet/ui/PlayerInfo.tsx b/src/Hacknet/ui/PlayerInfo.tsx
index ec8401122..d863e0599 100644
--- a/src/Hacknet/ui/PlayerInfo.tsx
+++ b/src/Hacknet/ui/PlayerInfo.tsx
@@ -55,7 +55,7 @@ export function PlayerInfo(props: IProps): React.ReactElement {
   return (
     <Paper sx={{ display: "inline-block", padding: "0.5em 1em", margin: "0.5em 0" }}>
       <Typography variant="h6">Hacknet Summary</Typography>
-      <StatsTable rows={rows} />
+      <StatsTable rows={rows} textAlign="left" />
     </Paper>
   );
 }
diff --git a/src/ui/React/StatsTable.tsx b/src/ui/React/StatsTable.tsx
index 4c1c781ca..ffbb31619 100644
--- a/src/ui/React/StatsTable.tsx
+++ b/src/ui/React/StatsTable.tsx
@@ -3,23 +3,25 @@ import React, { ReactNode, ReactElement } from "react";
 import { Table, TableCell } from "./Table";
 import { TableBody, TableRow, Table as MuiTable, Typography } from "@mui/material";
 import { makeStyles } from "tss-react/mui";
+import type { Property } from "csstype";
 
 interface StatsTableProps {
   rows: ReactNode[][];
   title?: string;
   wide?: boolean;
+  textAlign?: Property.TextAlign;
   paddingLeft?: string;
 }
 
-const useStyles = (paddingLeft: string) =>
+const useStyles = (textAlign: Property.TextAlign, paddingLeft: string) =>
   makeStyles()({
     firstCell: { textAlign: "left" },
-    nonFirstCell: { textAlign: "right", paddingLeft: paddingLeft },
+    nonFirstCell: { textAlign: textAlign, paddingLeft: paddingLeft },
   })();
 
-export function StatsTable({ rows, title, wide, paddingLeft }: StatsTableProps): ReactElement {
+export function StatsTable({ rows, title, wide, textAlign, paddingLeft }: StatsTableProps): ReactElement {
   const T = wide ? MuiTable : Table;
-  const { classes } = useStyles(paddingLeft ?? "0.5em");
+  const { classes } = useStyles(textAlign ?? "right", paddingLeft ?? "0.5em");
   return (
     <>
       {title && <Typography>{title}</Typography>}