Use tighter spacing in tables (#56)

* Use smaller font size * Use `maxWidth` in many columns * Remove card * Reduce padding
marvinruder · Aug 28, 2022 · b6a1c27 · b6a1c27
1 parent 69e87b3
commit b6a1c27
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 67 deletions.
diff --git 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<StocksTableProps> = ({ stocks: stocks }) => {
   const theme = useTheme();
 
   return (
-    <Card>
-      <CardHeader title="Recent Orders" />
-      <Divider />
+    <>
       <TableContainer>
         <Table>
           <TableHead>
@@ -133,13 +128,17 @@ const RecentOrdersTable: FC<StocksTableProps> = ({ stocks: stocks }) => {
                       variant="body1"
                       fontWeight="bold"
                       color="text.primary"
-                      maxWidth={200}
-                      gutterBottom
+                      maxWidth={160}
                       noWrap
                     >
                       {stock.name}
                     </Typography>
-                    <Typography variant="body2" color="text.secondary" noWrap>
+                    <Typography
+                      variant="body2"
+                      color="text.secondary"
+                      maxWidth={160}
+                      noWrap
+                    >
                       {stock.ticker}
                     </Typography>
                   </TableCell>
@@ -148,17 +147,27 @@ const RecentOrdersTable: FC<StocksTableProps> = ({ stocks: stocks }) => {
                       variant="body1"
                       fontWeight="bold"
                       color="text.primary"
-                      gutterBottom
+                      maxWidth={125}
                       noWrap
                     >
                       {emojiFlag(getCountryCode(stock.country)) +
                         " " +
                         stock.country}
                     </Typography>
-                    <Typography variant="body2" color="text.secondary" noWrap>
+                    <Typography
+                      variant="body2"
+                      color="text.secondary"
+                      maxWidth={125}
+                      noWrap
+                    >
                       {getRegionFromCountry(stock.country)}
                     </Typography>
-                    <Typography variant="body2" color="text.secondary" noWrap>
+                    <Typography
+                      variant="body2"
+                      color="text.secondary"
+                      maxWidth={125}
+                      noWrap
+                    >
                       {getSuperRegionFromCountry(stock.country)}
                     </Typography>
                   </TableCell>
@@ -170,7 +179,7 @@ const RecentOrdersTable: FC<StocksTableProps> = ({ 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<StocksTableProps> = ({ stocks: stocks }) => {
                       imageUrl={`/static/images/supersector/${getSuperSectorKey(
                         getSuperSectorFromIndustry(stock.industry)
                       )}.svg`}
+                      maxWidth={125}
                       noWrap
                     >
                       {getSuperSectorFromIndustry(stock.industry)}
@@ -191,12 +201,17 @@ const RecentOrdersTable: FC<StocksTableProps> = ({ stocks: stocks }) => {
                       variant="body1"
                       fontWeight="bold"
                       color="text.primary"
-                      gutterBottom
+                      maxWidth={150}
                       noWrap
                     >
                       {stock.industry}
                     </Typography>
-                    <Typography variant="body2" color="text.secondary" noWrap>
+                    <Typography
+                      variant="body2"
+                      color="text.secondary"
+                      maxWidth={150}
+                      noWrap
+                    >
                       {getGroupFromIndustry(stock.industry)}
                     </Typography>
                   </TableCell>
@@ -245,7 +260,7 @@ const RecentOrdersTable: FC<StocksTableProps> = ({ stocks: stocks }) => {
           rowsPerPageOptions={[10, 25, 50, { label: "All", value: -1 }]}
         />
       </Box>
-    </Card>
+    </>
   );
 };
 

diff --git 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
@@ -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",
     },