From b6a1c273065172f834dff94561070f9729a85d4e Mon Sep 17 00:00:00 2001 From: "Marvin A. Ruder" Date: Mon, 29 Aug 2022 00:09:27 +0200 Subject: [PATCH] Use tighter spacing in tables (#56) * Use smaller font size * Use `maxWidth` in many columns * Remove card * Reduce padding --- src/content/modules/stocklist/StocksTable.tsx | 47 +++++++++++------ src/theme/base.ts | 1 - src/theme/schemes/NebulaFighterTheme.ts | 51 ++++++++++--------- src/theme/schemes/PureLightTheme.ts | 51 ++++++++++--------- 4 files changed, 83 insertions(+), 67 deletions(-) diff --git a/src/content/modules/stocklist/StocksTable.tsx b/src/content/modules/stocklist/StocksTable.tsx index 8b341f2..04631f9 100644 --- a/src/content/modules/stocklist/StocksTable.tsx +++ b/src/content/modules/stocklist/StocksTable.tsx @@ -2,9 +2,7 @@ import { FC, ChangeEvent, useState } from "react"; import PropTypes from "prop-types"; import { Tooltip, - Divider, Box, - Card, Checkbox, IconButton, Table, @@ -16,7 +14,6 @@ import { TableContainer, Typography, useTheme, - CardHeader, } from "@mui/material"; import EditTwoToneIcon from "@mui/icons-material/EditTwoTone"; import DeleteTwoToneIcon from "@mui/icons-material/DeleteTwoTone"; @@ -91,9 +88,7 @@ const RecentOrdersTable: FC = ({ stocks: stocks }) => { const theme = useTheme(); return ( - - - + <> @@ -133,13 +128,17 @@ const RecentOrdersTable: FC = ({ stocks: stocks }) => { variant="body1" fontWeight="bold" color="text.primary" - maxWidth={200} - gutterBottom + maxWidth={160} noWrap > {stock.name} - + {stock.ticker} @@ -148,17 +147,27 @@ const RecentOrdersTable: FC = ({ stocks: stocks }) => { variant="body1" fontWeight="bold" color="text.primary" - gutterBottom + maxWidth={125} noWrap > {emojiFlag(getCountryCode(stock.country)) + " " + stock.country} - + {getRegionFromCountry(stock.country)} - + {getSuperRegionFromCountry(stock.country)} @@ -170,7 +179,7 @@ const RecentOrdersTable: FC = ({ stocks: stocks }) => { imageUrl={`/static/images/sector/${getSectorKey( getSectorFromIndustry(stock.industry) )}.svg`} - gutterBottom + maxWidth={125} noWrap > {getSectorFromIndustry(stock.industry)} @@ -181,6 +190,7 @@ const RecentOrdersTable: FC = ({ stocks: stocks }) => { imageUrl={`/static/images/supersector/${getSuperSectorKey( getSuperSectorFromIndustry(stock.industry) )}.svg`} + maxWidth={125} noWrap > {getSuperSectorFromIndustry(stock.industry)} @@ -191,12 +201,17 @@ const RecentOrdersTable: FC = ({ stocks: stocks }) => { variant="body1" fontWeight="bold" color="text.primary" - gutterBottom + maxWidth={150} noWrap > {stock.industry} - + {getGroupFromIndustry(stock.industry)} @@ -245,7 +260,7 @@ const RecentOrdersTable: FC = ({ stocks: stocks }) => { rowsPerPageOptions={[10, 25, 50, { label: "All", value: -1 }]} /> - + ); }; diff --git a/src/theme/base.ts b/src/theme/base.ts index c50dfbc..c29cb27 100644 --- a/src/theme/base.ts +++ b/src/theme/base.ts @@ -9,7 +9,6 @@ export function themeCreator(theme: string): Theme { } declare module "@mui/material/styles" { - // eslint-disable-next-line no-unused-vars interface Theme { colors: { gradients: { diff --git a/src/theme/schemes/NebulaFighterTheme.ts b/src/theme/schemes/NebulaFighterTheme.ts index 993ad8d..f1ad3e7 100644 --- a/src/theme/schemes/NebulaFighterTheme.ts +++ b/src/theme/schemes/NebulaFighterTheme.ts @@ -459,7 +459,7 @@ export const NebulaFighterTheme = createTheme({ colorPrimary: { fontWeight: "bold", lineHeight: "40px", - fontSize: 13, + fontSize: 11, background: colors.alpha.black[5], color: colors.alpha.black[70], }, @@ -472,7 +472,7 @@ export const NebulaFighterTheme = createTheme({ marginBottom: -5, }, title: { - fontSize: 15, + fontSize: 13, }, }, }, @@ -519,7 +519,7 @@ export const NebulaFighterTheme = createTheme({ MuiAvatar: { styleOverrides: { root: { - fontSize: 14, + fontSize: 12, fontWeight: "bold", }, colorDefault: { @@ -535,7 +535,7 @@ export const NebulaFighterTheme = createTheme({ }, avatar: { background: colors.alpha.black[10], - fontSize: 13, + fontSize: 11, color: colors.alpha.black[70], fontWeight: "bold", @@ -556,7 +556,7 @@ export const NebulaFighterTheme = createTheme({ MuiPaginationItem: { styleOverrides: { page: { - fontSize: 13, + fontSize: 11, fontWeight: "bold", transition: "all .2s", }, @@ -663,7 +663,7 @@ export const NebulaFighterTheme = createTheme({ }, }, sizeSmall: { - padding: 4, + padding: 2, }, }, }, @@ -857,7 +857,7 @@ export const NebulaFighterTheme = createTheme({ padding: 12, "& .MuiMenuItem-root.MuiButtonBase-root": { - fontSize: 14, + fontSize: 12, marginTop: 1, marginBottom: 1, transition: "all .2s", @@ -974,11 +974,12 @@ export const NebulaFighterTheme = createTheme({ styleOverrides: { root: { borderBottomColor: colors.alpha.black[10], - fontSize: 14, + fontSize: 12, + padding: 8, }, head: { textTransform: "uppercase", - fontSize: 13, + fontSize: 11, fontWeight: "bold", color: colors.alpha.black[70], }, @@ -988,7 +989,7 @@ export const NebulaFighterTheme = createTheme({ styleOverrides: { message: { lineHeight: 1.5, - fontSize: 14, + fontSize: 12, }, standardInfo: { color: colors.info.main, @@ -1051,7 +1052,7 @@ export const NebulaFighterTheme = createTheme({ tooltip: { backgroundColor: alpha(colors.alpha.black["100"], 0.95), padding: "8px 16px", - fontSize: 13, + fontSize: 11, }, arrow: { color: alpha(colors.alpha.black["100"], 0.95), @@ -1137,10 +1138,10 @@ export const NebulaFighterTheme = createTheme({ }, styleOverrides: { gutterBottom: { - marginBottom: 4, + marginBottom: 2, }, paragraph: { - fontSize: 17, + fontSize: 15, lineHeight: 1.7, }, }, @@ -1154,54 +1155,54 @@ export const NebulaFighterTheme = createTheme({ '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"', h1: { fontWeight: 700, - fontSize: 35, + fontSize: 30, }, h2: { fontWeight: 700, - fontSize: 30, + fontSize: 26, }, h3: { fontWeight: 700, - fontSize: 25, + fontSize: 21, lineHeight: 1.4, color: colors.alpha.black[100], }, h4: { fontWeight: 700, - fontSize: 16, + fontSize: 14, }, h5: { fontWeight: 700, - fontSize: 14, + fontSize: 12, }, h6: { - fontSize: 15, + fontSize: 13, }, body1: { - fontSize: 14, + fontSize: 12, }, body2: { - fontSize: 14, + fontSize: 12, }, button: { fontWeight: 600, }, caption: { - fontSize: 13, + fontSize: 11, textTransform: "uppercase", color: colors.alpha.black[50], }, subtitle1: { - fontSize: 14, + fontSize: 12, color: colors.alpha.black[70], }, subtitle2: { fontWeight: 400, - fontSize: 15, + fontSize: 13, color: colors.alpha.black[50], }, overline: { - fontSize: 13, + fontSize: 11, fontWeight: 700, textTransform: "uppercase", }, diff --git a/src/theme/schemes/PureLightTheme.ts b/src/theme/schemes/PureLightTheme.ts index 6efe0bb..60591f8 100644 --- a/src/theme/schemes/PureLightTheme.ts +++ b/src/theme/schemes/PureLightTheme.ts @@ -453,7 +453,7 @@ export const PureLightTheme = createTheme({ colorPrimary: { fontWeight: "bold", lineHeight: "40px", - fontSize: 13, + fontSize: 11, background: colors.alpha.black[5], color: colors.alpha.black[70], }, @@ -466,7 +466,7 @@ export const PureLightTheme = createTheme({ marginBottom: -5, }, title: { - fontSize: 15, + fontSize: 13, }, }, }, @@ -513,7 +513,7 @@ export const PureLightTheme = createTheme({ MuiAvatar: { styleOverrides: { root: { - fontSize: 14, + fontSize: 12, fontWeight: "bold", }, colorDefault: { @@ -529,7 +529,7 @@ export const PureLightTheme = createTheme({ }, avatar: { background: colors.alpha.black[10], - fontSize: 13, + fontSize: 11, color: colors.alpha.black[70], fontWeight: "bold", @@ -550,7 +550,7 @@ export const PureLightTheme = createTheme({ MuiPaginationItem: { styleOverrides: { page: { - fontSize: 13, + fontSize: 11, fontWeight: "bold", transition: "all .2s", }, @@ -657,7 +657,7 @@ export const PureLightTheme = createTheme({ }, }, sizeSmall: { - padding: 4, + padding: 2, }, }, }, @@ -850,7 +850,7 @@ export const PureLightTheme = createTheme({ padding: 12, "& .MuiMenuItem-root.MuiButtonBase-root": { - fontSize: 14, + fontSize: 12, marginTop: 1, marginBottom: 1, transition: "all .2s", @@ -969,11 +969,12 @@ export const PureLightTheme = createTheme({ styleOverrides: { root: { borderBottomColor: colors.alpha.black[10], - fontSize: 14, + fontSize: 12, + padding: 8, }, head: { textTransform: "uppercase", - fontSize: 13, + fontSize: 11, fontWeight: "bold", color: colors.alpha.black[70], }, @@ -983,7 +984,7 @@ export const PureLightTheme = createTheme({ styleOverrides: { message: { lineHeight: 1.5, - fontSize: 14, + fontSize: 12, }, standardInfo: { color: colors.info.main, @@ -1046,7 +1047,7 @@ export const PureLightTheme = createTheme({ tooltip: { backgroundColor: alpha(colors.alpha.black["100"], 0.95), padding: "8px 16px", - fontSize: 13, + fontSize: 11, }, arrow: { color: alpha(colors.alpha.black["100"], 0.95), @@ -1132,10 +1133,10 @@ export const PureLightTheme = createTheme({ }, styleOverrides: { gutterBottom: { - marginBottom: 4, + marginBottom: 2, }, paragraph: { - fontSize: 17, + fontSize: 15, lineHeight: 1.7, }, }, @@ -1149,54 +1150,54 @@ export const PureLightTheme = createTheme({ '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"', h1: { fontWeight: 700, - fontSize: 35, + fontSize: 30, }, h2: { fontWeight: 700, - fontSize: 30, + fontSize: 26, }, h3: { fontWeight: 700, - fontSize: 25, + fontSize: 21, lineHeight: 1.4, color: colors.alpha.black[100], }, h4: { fontWeight: 700, - fontSize: 16, + fontSize: 14, }, h5: { fontWeight: 700, - fontSize: 14, + fontSize: 12, }, h6: { - fontSize: 15, + fontSize: 13, }, body1: { - fontSize: 14, + fontSize: 12, }, body2: { - fontSize: 14, + fontSize: 12, }, button: { fontWeight: 600, }, caption: { - fontSize: 13, + fontSize: 11, textTransform: "uppercase", color: colors.alpha.black[50], }, subtitle1: { - fontSize: 14, + fontSize: 12, color: colors.alpha.black[70], }, subtitle2: { fontWeight: 400, - fontSize: 15, + fontSize: 13, color: colors.alpha.black[70], }, overline: { - fontSize: 13, + fontSize: 11, fontWeight: 700, textTransform: "uppercase", },