Change the primary UI font, darken the background, and show template icons for workspaces (#3863)

* Use darker colors in the dashboard

I think this looks a bit nicer. It's pretty subjective, but right now
we sit in-between a light and a dark mode, but more on the dark side.

This essentially transforms us into a dark mode.

* Add icons to workspaces rows and apge

* Add narrowed navbar to tighten up design

* Swap gray[3] for gray[4]

site/src/components/NavbarView/NavbarView.tsx

@@ -8,7 +8,7 @@ import { useState } from "react"
 import { NavLink, useLocation } from "react-router-dom"
 import { colors } from "theme/colors"
 import * as TypesGen from "../../api/typesGenerated"
-import { navHeight } from "../../theme/constants"
+import { containerWidth, navHeight, sidePadding } from "../../theme/constants"
 import { combineClasses } from "../../util/combineClasses"
 import { Logo } from "../Icons/Logo"
 import { UserDropdown } from "../UserDropdown/UsersDropdown"
@@ -73,33 +73,35 @@ export const NavbarView: React.FC<React.PropsWithChildren<NavbarViewProps>> = ({
 
   return (
     <nav className={styles.root}>
-      <IconButton
-        aria-label="Open menu"
-        className={styles.mobileMenuButton}
-        onClick={() => {
-          setIsDrawerOpen(true)
-        }}
-      >
-        <MenuIcon />
-      </IconButton>
+      <div className={styles.wrapper}>
+        <IconButton
+          aria-label="Open menu"
+          className={styles.mobileMenuButton}
+          onClick={() => {
+            setIsDrawerOpen(true)
+          }}
+        >
+          <MenuIcon />
+        </IconButton>
 
-      <Drawer anchor="left" open={isDrawerOpen} onClose={() => setIsDrawerOpen(false)}>
-        <div className={styles.drawer}>
-          <div className={styles.drawerHeader}>
-            <Logo fill="white" opacity={1} width={125} />
+        <Drawer anchor="left" open={isDrawerOpen} onClose={() => setIsDrawerOpen(false)}>
+          <div className={styles.drawer}>
+            <div className={styles.drawerHeader}>
+              <Logo fill="white" opacity={1} width={125} />
+            </div>
+            <NavItems canViewAuditLog={canViewAuditLog} />
           </div>
-          <NavItems canViewAuditLog={canViewAuditLog} />
+        </Drawer>
+
+        <NavLink className={styles.logo} to="/workspaces">
+          <Logo fill="white" opacity={1} width={125} />
+        </NavLink>
+
+        <NavItems className={styles.desktopNavItems} canViewAuditLog={canViewAuditLog} />
+
+        <div className={styles.profileButton}>
+          {user && <UserDropdown user={user} onSignOut={onSignOut} />}
         </div>
-      </Drawer>
-
-      <NavLink className={styles.logo} to="/workspaces">
-        <Logo fill="white" opacity={1} width={125} />
-      </NavLink>
-
-      <NavItems className={styles.desktopNavItems} canViewAuditLog={canViewAuditLog} />
-
-      <div className={styles.profileButton}>
-        {user && <UserDropdown user={user} onSignOut={onSignOut} />}
       </div>
     </nav>
   )
@@ -107,19 +109,22 @@ export const NavbarView: React.FC<React.PropsWithChildren<NavbarViewProps>> = ({
 
 const useStyles = makeStyles((theme) => ({
   root: {
-    position: "relative",
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
     height: navHeight,
     background: theme.palette.background.paper,
-    marginTop: 0,
-    transition: "margin 150ms ease",
     "@media (display-mode: standalone)": {
       borderTop: `1px solid ${theme.palette.divider}`,
     },
     borderBottom: `1px solid ${theme.palette.divider}`,
-
+    transition: "margin 150ms ease",
+  },
+  wrapper: {
+    position: "relative",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    margin: "0 auto",
+    maxWidth: containerWidth,
+    padding: `0 ${sidePadding}px`,
     [theme.breakpoints.up("md")]: {
       justifyContent: "flex-start",
     },
@@ -155,7 +160,6 @@ const useStyles = makeStyles((theme) => ({
     alignItems: "center",
     display: "flex",
     height: navHeight,
-    paddingLeft: theme.spacing(4),
     paddingRight: theme.spacing(4),
     "& svg": {
       width: 109,

site/src/components/UserDropdown/UsersDropdown.tsx

@@ -85,7 +85,7 @@ export const useStyles = makeStyles((theme) => ({
 
   menuItem: {
     height: navHeight,
-    padding: `${theme.spacing(1.5)}px ${theme.spacing(2.75)}px`,
+    padding: `${theme.spacing(1.5)}px 0px ${theme.spacing(1.5)}px ${theme.spacing(2.75)}px`,
 
     "&:hover": {
       backgroundColor: theme.palette.action.hover,

site/src/components/Workspace/Workspace.tsx

@@ -1,3 +1,4 @@
+import Box from "@material-ui/core/Box"
 import { makeStyles } from "@material-ui/core/styles"
 import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
 import { WorkspaceStatusBadge } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge"
@@ -67,6 +68,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
 }) => {
   const styles = useStyles()
   const navigate = useNavigate()
+  const hasTemplateIcon = workspace.template_icon && workspace.template_icon !== ""
 
   const buildError = workspaceErrors[WorkspaceErrors.BUILD_ERROR] ? (
     <ErrorSummary error={workspaceErrors[WorkspaceErrors.BUILD_ERROR]} dismissible />
@@ -104,8 +106,15 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
         }
       >
         <WorkspaceStatusBadge build={workspace.latest_build} className={styles.statusBadge} />
-        <PageHeaderTitle>{workspace.name}</PageHeaderTitle>
-        <PageHeaderSubtitle>{workspace.owner_name}</PageHeaderSubtitle>
+        <Box display="flex">
+          {hasTemplateIcon && (
+            <img alt="" src={workspace.template_icon} className={styles.templateIcon} />
+          )}
+          <div>
+            <PageHeaderTitle>{workspace.name}</PageHeaderTitle>
+            <PageHeaderSubtitle>{workspace.owner_name}</PageHeaderSubtitle>
+          </div>
+        </Box>
       </PageHeader>
 
       <Stack direction="column" className={styles.firstColumnSpacer} spacing={2.5}>
@@ -174,6 +183,13 @@ export const useStyles = makeStyles((theme) => {
       width: "100%",
     },
 
+    templateIcon: {
+      width: 40,
+      height: 40,
+      marginRight: theme.spacing(2),
+      marginTop: theme.spacing(0.5),
+    },
+
     timelineContents: {
       margin: 0,
     },

site/src/components/WorkspacesTable/WorkspacesRow.tsx

@@ -3,16 +3,12 @@ import TableRow from "@material-ui/core/TableRow"
 import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"
 import useTheme from "@material-ui/styles/useTheme"
 import { useActor } from "@xstate/react"
+import { AvatarData } from "components/AvatarData/AvatarData"
 import { WorkspaceStatusBadge } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge"
 import { FC } from "react"
 import { useNavigate } from "react-router-dom"
 import { WorkspaceItemMachineRef } from "../../xServices/workspaces/workspacesXService"
-import { AvatarData } from "../AvatarData/AvatarData"
-import {
-  TableCellData,
-  TableCellDataPrimary,
-  TableCellDataSecondary,
-} from "../TableCellData/TableCellData"
+import { TableCellData, TableCellDataPrimary } from "../TableCellData/TableCellData"
 import { TableCellLink } from "../TableCellLink/TableCellLink"
 import { OutdatedHelpTooltip } from "../Tooltips"
 import { WorkspaceLastUsed } from "./WorkspaceLastUsed"
@@ -45,17 +41,11 @@ export const WorkspacesRow: FC<
       }}
       className={styles.clickableTableRow}
     >
-      <TableCellLink to={workspacePageLink}>
-        <TableCellData>
-          <TableCellDataPrimary highlight>{workspace.name}</TableCellDataPrimary>
-          <TableCellDataSecondary>{workspace.owner_name}</TableCellDataSecondary>
-        </TableCellData>
-      </TableCellLink>
-
       <TableCellLink to={workspacePageLink}>
         <AvatarData
-          title={workspace.template_name}
-          highlightTitle={false}
+          highlightTitle
+          title={workspace.name}
+          subtitle={workspace.owner_name}
           avatar={
             hasTemplateIcon ? (
               <div className={styles.templateIconWrapper}>
@@ -65,6 +55,10 @@ export const WorkspacesRow: FC<
           }
         />
       </TableCellLink>
+
+      <TableCellLink to={workspacePageLink}>
+        <TableCellDataPrimary>{workspace.template_name}</TableCellDataPrimary>
+      </TableCellLink>
       <TableCellLink to={workspacePageLink}>
         <TableCellData>
           <WorkspaceLastUsed lastUsedAt={workspace.last_used_at} />

site/src/theme/overrides.ts

@@ -1,7 +1,7 @@
 import { lighten, Theme } from "@material-ui/core/styles"
 import { Overrides } from "@material-ui/core/styles/overrides"
 import { colors } from "./colors"
-import { borderRadius, MONOSPACE_FONT_FAMILY } from "./constants"
+import { borderRadius } from "./constants"
 
 export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
   return {
@@ -33,7 +33,6 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
         // Prevents a loading button from collapsing!
         minHeight: 42,
         fontWeight: "normal",
-        fontFamily: MONOSPACE_FONT_FAMILY,
         fontSize: 16,
         textTransform: "none",
         letterSpacing: "none",
@@ -78,7 +77,6 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
     MuiTableHead: {
       root: {
         display: "table-header-group",
-        fontFamily: MONOSPACE_FONT_FAMILY,
       },
     },
     MuiTableContainer: {
@@ -89,9 +87,9 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
     },
     MuiTable: {
       root: {
-        borderCollapse: "collapse",
+        borderCollapse: "unset",
         border: "none",
-        background: palette.background.default,
+        background: palette.background.paper,
         boxShadow: `0 0 0 1px ${palette.background.default} inset`,
         overflow: "hidden",
 
@@ -116,7 +114,6 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
         fontWeight: 600,
       },
       root: {
-        fontFamily: MONOSPACE_FONT_FAMILY,
         fontSize: 16,
         background: palette.background.paper,
         borderBottom: `1px solid ${palette.divider}`,

site/src/theme/palettes.ts

@@ -8,21 +8,21 @@ export const darkPalette: PaletteOptions = {
   type: "dark",
   primary: {
     main: colors.blue[7],
-    contrastText: colors.gray[3],
+    contrastText: colors.gray[4],
     light: colors.blue[6],
     dark: colors.blue[9],
   },
   secondary: {
     main: colors.green[11],
-    contrastText: colors.gray[3],
+    contrastText: colors.gray[4],
     dark: colors.indigo[7],
   },
   background: {
-    default: colors.gray[15],
-    paper: colors.gray[14],
+    default: colors.gray[17],
+    paper: colors.gray[16],
   },
   text: {
-    primary: colors.gray[3],
+    primary: colors.gray[4],
     secondary: colors.gray[5],
   },
   divider: colors.gray[13],
@@ -38,12 +38,12 @@ export const darkPalette: PaletteOptions = {
   info: {
     main: colors.blue[11],
     dark: colors.blue[15],
-    contrastText: colors.gray[3],
+    contrastText: colors.gray[4],
   },
   error: {
     main: colors.red[5],
     dark: colors.red[15],
-    contrastText: colors.gray[3],
+    contrastText: colors.gray[4],
   },
   action: {
     hover: colors.gray[13],