From 32f9ba89b6c8da0046b6e52eba207a291637c9ba Mon Sep 17 00:00:00 2001 From: Kyle Carberry Date: Sun, 4 Sep 2022 17:15:07 +0000 Subject: [PATCH 1/4] 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. --- site/src/theme/overrides.ts | 4 ++-- site/src/theme/palettes.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/site/src/theme/overrides.ts b/site/src/theme/overrides.ts index ac52c32ec5c17..56906d4d29b80 100644 --- a/site/src/theme/overrides.ts +++ b/site/src/theme/overrides.ts @@ -89,9 +89,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", diff --git a/site/src/theme/palettes.ts b/site/src/theme/palettes.ts index eb2fd91294893..3687cecd9ecdc 100644 --- a/site/src/theme/palettes.ts +++ b/site/src/theme/palettes.ts @@ -18,8 +18,8 @@ export const darkPalette: PaletteOptions = { 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], From 3699ab96765df47b10c4b5fc648cf87f2013fcb4 Mon Sep 17 00:00:00 2001 From: Kyle Carberry Date: Sun, 4 Sep 2022 18:32:16 +0000 Subject: [PATCH 2/4] Add icons to workspaces rows and apge --- site/src/components/Workspace/Workspace.tsx | 20 ++++++++++++++-- .../WorkspacesTable/WorkspacesRow.tsx | 24 +++++++------------ site/src/theme/overrides.ts | 5 +--- 3 files changed, 28 insertions(+), 21 deletions(-) diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx index 647d031efad54..a5897cd2778f1 100644 --- a/site/src/components/Workspace/Workspace.tsx +++ b/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> = ({ }) => { const styles = useStyles() const navigate = useNavigate() + const hasTemplateIcon = workspace.template_icon && workspace.template_icon !== "" const buildError = workspaceErrors[WorkspaceErrors.BUILD_ERROR] ? ( @@ -104,8 +106,15 @@ export const Workspace: FC> = ({ } > - {workspace.name} - {workspace.owner_name} + + {hasTemplateIcon && ( + + )} +
+ {workspace.name} + {workspace.owner_name} +
+ @@ -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, }, diff --git a/site/src/components/WorkspacesTable/WorkspacesRow.tsx b/site/src/components/WorkspacesTable/WorkspacesRow.tsx index cf6b92d1da480..5e6f78c6b7df0 100644 --- a/site/src/components/WorkspacesTable/WorkspacesRow.tsx +++ b/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} > - - - {workspace.name} - {workspace.owner_name} - - - @@ -65,6 +55,10 @@ export const WorkspacesRow: FC< } /> + + + {workspace.template_name} + diff --git a/site/src/theme/overrides.ts b/site/src/theme/overrides.ts index 56906d4d29b80..8a5ce2b198f28 100644 --- a/site/src/theme/overrides.ts +++ b/site/src/theme/overrides.ts @@ -2,7 +2,7 @@ import { Theme } from "@material-ui/core/styles" import { SimplePaletteColorOptions } from "@material-ui/core/styles/createPalette" 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 { @@ -34,7 +34,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: { @@ -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}`, From 26d2db8ebad11d82675adb9892f886b7aba7e7db Mon Sep 17 00:00:00 2001 From: Kyle Carberry Date: Mon, 5 Sep 2022 14:51:53 +0000 Subject: [PATCH 3/4] Add narrowed navbar to tighten up design --- site/src/components/NavbarView/NavbarView.tsx | 68 ++++++++++--------- .../components/UserDropdown/UsersDropdown.tsx | 2 +- 2 files changed, 37 insertions(+), 33 deletions(-) diff --git a/site/src/components/NavbarView/NavbarView.tsx b/site/src/components/NavbarView/NavbarView.tsx index b6c68f72b73c9..80da2a2c6fbf1 100644 --- a/site/src/components/NavbarView/NavbarView.tsx +++ b/site/src/components/NavbarView/NavbarView.tsx @@ -7,7 +7,7 @@ import MenuIcon from "@material-ui/icons/Menu" import { useState } from "react" import { NavLink, useLocation } from "react-router-dom" 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" @@ -72,33 +72,35 @@ export const NavbarView: React.FC> = ({ return ( ) @@ -106,19 +108,22 @@ export const NavbarView: React.FC> = ({ 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", }, @@ -154,7 +159,6 @@ const useStyles = makeStyles((theme) => ({ alignItems: "center", display: "flex", height: navHeight, - paddingLeft: theme.spacing(4), paddingRight: theme.spacing(4), "& svg": { width: 109, diff --git a/site/src/components/UserDropdown/UsersDropdown.tsx b/site/src/components/UserDropdown/UsersDropdown.tsx index d165cb3e12a73..70d81f1feb597 100644 --- a/site/src/components/UserDropdown/UsersDropdown.tsx +++ b/site/src/components/UserDropdown/UsersDropdown.tsx @@ -80,7 +80,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: fade(theme.palette.primary.light, 0.05), From 8029021a2b5b57dc24673914ce7a0380a0ab177a Mon Sep 17 00:00:00 2001 From: Kyle Carberry Date: Tue, 6 Sep 2022 12:40:20 -0500 Subject: [PATCH 4/4] Swap gray[3] for gray[4] --- site/src/theme/palettes.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/site/src/theme/palettes.ts b/site/src/theme/palettes.ts index d59c70259931b..e17f53fe6c6ee 100644 --- a/site/src/theme/palettes.ts +++ b/site/src/theme/palettes.ts @@ -8,13 +8,13 @@ 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: { @@ -22,7 +22,7 @@ export const darkPalette: PaletteOptions = { 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],