UI: Tweak Hacknet summary (#1466)

This commit is contained in:
catloversg 2024-07-08 04:33:49 +07:00 committed by GitHub
parent c4adbfc0ad
commit b7a996718b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 7 additions and 5 deletions

@ -55,7 +55,7 @@ export function PlayerInfo(props: IProps): React.ReactElement {
return ( return (
<Paper sx={{ display: "inline-block", padding: "0.5em 1em", margin: "0.5em 0" }}> <Paper sx={{ display: "inline-block", padding: "0.5em 1em", margin: "0.5em 0" }}>
<Typography variant="h6">Hacknet Summary</Typography> <Typography variant="h6">Hacknet Summary</Typography>
<StatsTable rows={rows} /> <StatsTable rows={rows} textAlign="left" />
</Paper> </Paper>
); );
} }

@ -3,23 +3,25 @@ import React, { ReactNode, ReactElement } from "react";
import { Table, TableCell } from "./Table"; import { Table, TableCell } from "./Table";
import { TableBody, TableRow, Table as MuiTable, Typography } from "@mui/material"; import { TableBody, TableRow, Table as MuiTable, Typography } from "@mui/material";
import { makeStyles } from "tss-react/mui"; import { makeStyles } from "tss-react/mui";
import type { Property } from "csstype";
interface StatsTableProps { interface StatsTableProps {
rows: ReactNode[][]; rows: ReactNode[][];
title?: string; title?: string;
wide?: boolean; wide?: boolean;
textAlign?: Property.TextAlign;
paddingLeft?: string; paddingLeft?: string;
} }
const useStyles = (paddingLeft: string) => const useStyles = (textAlign: Property.TextAlign, paddingLeft: string) =>
makeStyles()({ makeStyles()({
firstCell: { textAlign: "left" }, 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 T = wide ? MuiTable : Table;
const { classes } = useStyles(paddingLeft ?? "0.5em"); const { classes } = useStyles(textAlign ?? "right", paddingLeft ?? "0.5em");
return ( return (
<> <>
{title && <Typography>{title}</Typography>} {title && <Typography>{title}</Typography>}