refactor(site): add table chosmetic changes (#11977)

BrunoQuaresma · web-flow · commit 1a9468692890 · 2024-02-01T10:41:15.000-03:00
- Set default 14px as the default font size for the table content - Add `xsmall` size for checkboxes - Remove checkbox wrapper padding on the table heading Before: <img width="1512" alt="Screenshot 2024-02-01 at 10 22 10" src="https://github.com/coder/coder/assets/3165839/92b844ae-f2bf-476a-89fe-90b16f19c306"> After: <img width="1512" alt="Screenshot 2024-02-01 at 10 26 00" src="https://github.com/coder/coder/assets/3165839/0f87d098-4b13-4373-96d2-2c18ee2587f6">
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -173,6 +173,7 @@
     "wsjson",
     "xerrors",
     "xlarge",
+    "xsmall",
     "yamux"
   ],
   "cSpell.ignorePaths": ["site/package.json", ".vscode/settings.json"],
diff --git a/site/src/@types/mui.d.ts b/site/src/@types/mui.d.ts
@@ -21,3 +21,9 @@ declare module "@mui/material/Button" {
     xlarge: true;
   }
 }
+
+declare module "@mui/material/Checkbox" {
+  interface CheckboxPropsSizeOverrides {
+    xsmall: true;
+  }
+}
diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/AvatarData/AvatarData.tsx
@@ -52,7 +52,7 @@ export const AvatarData: FC<AvatarDataProps> = ({
         {subtitle && (
           <span
             css={{
-              fontSize: 12,
+              fontSize: 13,
               color: theme.palette.text.secondary,
               lineHeight: "150%",
               maxWidth: 540,
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -66,10 +66,17 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
                   <Checkbox
                     // Remove the extra padding added for the first cell in the
                     // table
-                    css={{ marginLeft: "-20px" }}
+                    css={{
+                      marginLeft: "-20px",
+                      // MUI by default adds 9px padding to enhance the
+                      // clickable area. We aim to prevent this from impacting
+                      // the layout of surrounding elements.
+                      marginTop: -9,
+                      marginBottom: -9,
+                    }}
                     disabled={!workspaces || workspaces.length === 0}
                     checked={checkedWorkspaces.length === workspaces?.length}
-                    size="small"
+                    size="xsmall"
                     onChange={(_, checked) => {
                       if (!workspaces) {
                         return;
@@ -122,9 +129,11 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
                         <Checkbox
                           // Remove the extra padding added for the first cell in the
                           // table
-                          css={{ marginLeft: "-20px" }}
+                          css={{
+                            marginLeft: "-20px",
+                          }}
                           data-testid={`checkbox-${workspace.id}`}
-                          size="small"
+                          size="xsmall"
                           disabled={cantBeChecked(workspace)}
                           checked={checked}
                           onClick={(e) => {
@@ -263,14 +272,18 @@ const WorkspacesRow: FC<WorkspacesRowProps> = ({
       }
     },
   });
-
+  const bgColor = checked ? theme.palette.action.hover : undefined;
   return (
     <TableRow
       {...clickableProps}
       data-testid={`workspace-${workspace.id}`}
       css={{
         ...clickableProps.css,
-        backgroundColor: checked ? theme.palette.action.hover : undefined,
+        backgroundColor: bgColor,
+
+        "&:hover": {
+          backgroundColor: `${bgColor} !important`,
+        },
       }}
     >
       {children}
diff --git a/site/src/theme/mui.ts b/site/src/theme/mui.ts
@@ -203,11 +203,12 @@ export const components = {
       head: ({ theme }) => ({
         fontSize: 14,
         color: theme.palette.text.secondary,
-        fontWeight: 600,
+        fontWeight: 500,
         background: theme.palette.background.paper,
+        borderWidth: 2,
       }),
       root: ({ theme }) => ({
-        fontSize: 16,
+        fontSize: 14,
         background: theme.palette.background.paper,
         borderBottom: `1px solid ${theme.palette.divider}`,
         padding: "12px 8px",
@@ -225,11 +226,15 @@ export const components = {
   },
   MuiTableRow: {
     styleOverrides: {
-      root: {
+      root: ({ theme }) => ({
         "&:last-child .MuiTableCell-body": {
           borderBottom: 0,
         },
-      },
+
+        "&.MuiTableRow-hover:hover": {
+          backgroundColor: theme.palette.background.paper,
+        },
+      }),
     },
   },
   MuiLink: {
@@ -395,6 +400,10 @@ export const components = {
         "&.Mui-disabled": {
           color: tw.zinc[500],
         },
+
+        "& .MuiSvgIcon-fontSizeXsmall": {
+          fontSize: "1rem",
+        },
       },
     },
   },

Original file line number	Diff line number	Diff line change
`@@ -21,3 +21,9 @@ declare module "@mui/material/Button" {`
`21`	`21`	`xlarge: true;`
`22`	`22`	`}`
`23`	`23`	`}`
	`24`	`+`
	`25`	`+declare module "@mui/material/Checkbox" {`
	`26`	`+ interface CheckboxPropsSizeOverrides {`
	`27`	`+ xsmall: true;`
	`28`	`+ }`
	`29`	`+}`