diff --git a/.vscode/settings.json b/.vscode/settings.json index b23f5b14db..107031e5b0 100644 --- 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 index e2cd8d3d14..5ff742276f 100644 --- 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 index 9ed11ebc0b..af90ea5f41 100644 --- a/site/src/components/AvatarData/AvatarData.tsx +++ b/site/src/components/AvatarData/AvatarData.tsx @@ -52,7 +52,7 @@ export const AvatarData: FC = ({ {subtitle && ( = ({ { if (!workspaces) { return; @@ -122,9 +129,11 @@ export const WorkspacesTable: FC = ({ { @@ -263,14 +272,18 @@ const WorkspacesRow: FC = ({ } }, }); - + const bgColor = checked ? theme.palette.action.hover : undefined; return ( {children} diff --git a/site/src/theme/mui.ts b/site/src/theme/mui.ts index 5393ace078..900e1a8f02 100644 --- 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", + }, }, }, },