refactor: Minor design adjustments (#1637)

site/src/components/Footer/Footer.tsx

@@ -42,6 +42,7 @@ const useFooterStyles = makeStyles((theme) => ({
     flex: "0",
     paddingTop: theme.spacing(2),
     paddingBottom: theme.spacing(2),
+    marginTop: theme.spacing(3),
   },
   copyRight: {
     margin: theme.spacing(0.25),

site/src/pages/LoginPage/LoginPage.tsx

@@ -17,7 +17,6 @@ export const useStyles = makeStyles((theme) => ({
   layout: {
     display: "flex",
     flexDirection: "column",
-    gap: theme.spacing(2),
     alignItems: "center",
   },
   container: {

site/src/pages/TemplatesPage/TemplatesPageView.tsx

@@ -77,7 +77,7 @@ export const TemplatesPageView: React.FC<TemplatesPageViewProps> = (props) => {
               </TableRow>
             )}
             {props.templates?.map((template) => (
-              <TableRow key={template.id} className={styles.templateRow}>
+              <TableRow key={template.id}>
                 <TableCell>
                   <Box alignItems="center" display="flex">
                     <Avatar variant="square" className={styles.templateAvatar}>
@@ -127,12 +127,6 @@ const useStyles = makeStyles((theme) => ({
       lineHeight: `${theme.spacing(3)}px`,
     },
   },
-  templateRow: {
-    "& > td": {
-      paddingTop: theme.spacing(2),
-      paddingBottom: theme.spacing(2),
-    },
-  },
   templateAvatar: {
     borderRadius: 2,
     marginRight: theme.spacing(1),

site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.tsx

@@ -48,6 +48,7 @@ export const WorkspaceBuildPage: React.FC = () => {
 
 const useStyles = makeStyles((theme) => ({
   title: {
-    marginTop: theme.spacing(5),
+    paddingTop: theme.spacing(5),
+    paddingBottom: theme.spacing(2),
   },
 }))

site/src/pages/WorkspacesPage/WorkspacesPageView.tsx

@@ -71,7 +71,7 @@ export const WorkspacesPageView: React.FC<WorkspacesPageViewProps> = (props) =>
             {props.workspaces?.map((workspace) => {
               const status = getDisplayStatus(theme, workspace.latest_build)
               return (
-                <TableRow key={workspace.id} className={styles.workspaceRow}>
+                <TableRow key={workspace.id}>
                   <TableCell>
                     <div className={styles.workspaceName}>
                       <Avatar variant="square" className={styles.workspaceAvatar}>
@@ -134,12 +134,6 @@ const useStyles = makeStyles((theme) => ({
       lineHeight: `${theme.spacing(3)}px`,
     },
   },
-  workspaceRow: {
-    "& > td": {
-      paddingTop: theme.spacing(2),
-      paddingBottom: theme.spacing(2),
-    },
-  },
   workspaceAvatar: {
     borderRadius: 2,
     marginRight: theme.spacing(1),

site/src/theme/overrides.ts

@@ -44,6 +44,11 @@ export const getOverrides = (palette: PaletteOptions) => {
         // Gives the appearance of a border!
         borderRadius: 2,
         border: `1px solid ${palette.divider}`,
+
+        "& td": {
+          paddingTop: 16,
+          paddingBottom: 16,
+        },
       },
     },
     MuiTableCell: {