Skip to content

Commit 3264960

Browse files
kylecarbskylecarbs
authored
Change the primary UI font, darken the background, and show template icons for workspaces (coder#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]
1 parent 3c94ca9 commit 3264960

File tree

6 files changed

+74
-63
lines changed

6 files changed

+74
-63
lines changed

‎site/src/components/NavbarView/NavbarView.tsx

Lines changed: 36 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { useState } from "react"
88
import { NavLink, useLocation } from "react-router-dom"
99
import { colors } from "theme/colors"
1010
import * as TypesGen from "../../api/typesGenerated"
11-
import { navHeight } from "../../theme/constants"
11+
import { containerWidth, navHeight, sidePadding } from "../../theme/constants"
1212
import { combineClasses } from "../../util/combineClasses"
1313
import { Logo } from "../Icons/Logo"
1414
import { UserDropdown } from "../UserDropdown/UsersDropdown"
@@ -73,53 +73,58 @@ export const NavbarView: React.FC<React.PropsWithChildren<NavbarViewProps>> = ({
7373

7474
return (
7575
<nav className={styles.root}>
76-
<IconButton
77-
aria-label="Open menu"
78-
className={styles.mobileMenuButton}
79-
onClick={() => {
80-
setIsDrawerOpen(true)
81-
}}
82-
>
83-
<MenuIcon />
84-
</IconButton>
85-
86-
<Drawer anchor="left" open={isDrawerOpen} onClose={() => setIsDrawerOpen(false)}>
87-
<div className={styles.drawer}>
88-
<div className={styles.drawerHeader}>
89-
<Logo fill="white" opacity={1} width={125} />
76+
<div className={styles.wrapper}>
77+
<IconButton
78+
aria-label="Open menu"
79+
className={styles.mobileMenuButton}
80+
onClick={() => {
81+
setIsDrawerOpen(true)
82+
}}
83+
>
84+
<MenuIcon />
85+
</IconButton>
86+
87+
<Drawer anchor="left" open={isDrawerOpen} onClose={() => setIsDrawerOpen(false)}>
88+
<div className={styles.drawer}>
89+
<div className={styles.drawerHeader}>
90+
<Logo fill="white" opacity={1} width={125} />
91+
</div>
92+
<NavItems canViewAuditLog={canViewAuditLog} />
9093
</div>
91-
<NavItems canViewAuditLog={canViewAuditLog} />
92-
</div>
93-
</Drawer>
94+
</Drawer>
9495

95-
<NavLink className={styles.logo} to="/workspaces">
96-
<Logo fill="white" opacity={1} width={125} />
97-
</NavLink>
96+
<NavLink className={styles.logo} to="/workspaces">
97+
<Logo fill="white" opacity={1} width={125} />
98+
</NavLink>
9899

99-
<NavItems className={styles.desktopNavItems} canViewAuditLog={canViewAuditLog} />
100+
<NavItems className={styles.desktopNavItems} canViewAuditLog={canViewAuditLog} />
100101

101-
<div className={styles.profileButton}>
102-
{user && <UserDropdown user={user} onSignOut={onSignOut} />}
102+
<div className={styles.profileButton}>
103+
{user && <UserDropdown user={user} onSignOut={onSignOut} />}
104+
</div>
103105
</div>
104106
</nav>
105107
)
106108
}
107109

108110
const useStyles = makeStyles((theme) => ({
109111
root: {
110-
position: "relative",
111-
display: "flex",
112-
justifyContent: "space-between",
113-
alignItems: "center",
114112
height: navHeight,
115113
background: theme.palette.background.paper,
116-
marginTop: 0,
117-
transition: "margin 150ms ease",
118114
"@media (display-mode: standalone)": {
119115
borderTop: `1px solid ${theme.palette.divider}`,
120116
},
121117
borderBottom: `1px solid ${theme.palette.divider}`,
122-
118+
transition: "margin 150ms ease",
119+
},
120+
wrapper: {
121+
position: "relative",
122+
display: "flex",
123+
justifyContent: "space-between",
124+
alignItems: "center",
125+
margin: "0 auto",
126+
maxWidth: containerWidth,
127+
padding: `0 ${sidePadding}px`,
123128
[theme.breakpoints.up("md")]: {
124129
justifyContent: "flex-start",
125130
},
@@ -155,7 +160,6 @@ const useStyles = makeStyles((theme) => ({
155160
alignItems: "center",
156161
display: "flex",
157162
height: navHeight,
158-
paddingLeft: theme.spacing(4),
159163
paddingRight: theme.spacing(4),
160164
"& svg": {
161165
width: 109,

‎site/src/components/UserDropdown/UsersDropdown.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ export const useStyles = makeStyles((theme) => ({
8585

8686
menuItem: {
8787
height: navHeight,
88-
padding: `${theme.spacing(1.5)}px ${theme.spacing(2.75)}px`,
88+
padding: `${theme.spacing(1.5)}px 0px ${theme.spacing(1.5)}px ${theme.spacing(2.75)}px`,
8989

9090
"&:hover": {
9191
backgroundColor: theme.palette.action.hover,

‎site/src/components/Workspace/Workspace.tsx

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Box from "@material-ui/core/Box"
12
import { makeStyles } from "@material-ui/core/styles"
23
import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
34
import { WorkspaceStatusBadge } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge"
@@ -67,6 +68,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
6768
}) => {
6869
const styles = useStyles()
6970
const navigate = useNavigate()
71+
const hasTemplateIcon = workspace.template_icon && workspace.template_icon !== ""
7072

7173
const buildError = workspaceErrors[WorkspaceErrors.BUILD_ERROR] ? (
7274
<ErrorSummary error={workspaceErrors[WorkspaceErrors.BUILD_ERROR]} dismissible />
@@ -104,8 +106,15 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
104106
}
105107
>
106108
<WorkspaceStatusBadge build={workspace.latest_build} className={styles.statusBadge} />
107-
<PageHeaderTitle>{workspace.name}</PageHeaderTitle>
108-
<PageHeaderSubtitle>{workspace.owner_name}</PageHeaderSubtitle>
109+
<Box display="flex">
110+
{hasTemplateIcon && (
111+
<img alt="" src={workspace.template_icon} className={styles.templateIcon} />
112+
)}
113+
<div>
114+
<PageHeaderTitle>{workspace.name}</PageHeaderTitle>
115+
<PageHeaderSubtitle>{workspace.owner_name}</PageHeaderSubtitle>
116+
</div>
117+
</Box>
109118
</PageHeader>
110119

111120
<Stack direction="column" className={styles.firstColumnSpacer} spacing={2.5}>
@@ -174,6 +183,13 @@ export const useStyles = makeStyles((theme) => {
174183
width: "100%",
175184
},
176185

186+
templateIcon: {
187+
width: 40,
188+
height: 40,
189+
marginRight: theme.spacing(2),
190+
marginTop: theme.spacing(0.5),
191+
},
192+
177193
timelineContents: {
178194
margin: 0,
179195
},

‎site/src/components/WorkspacesTable/WorkspacesRow.tsx

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,12 @@ import TableRow from "@material-ui/core/TableRow"
33
import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"
44
import useTheme from "@material-ui/styles/useTheme"
55
import { useActor } from "@xstate/react"
6+
import { AvatarData } from "components/AvatarData/AvatarData"
67
import { WorkspaceStatusBadge } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge"
78
import { FC } from "react"
89
import { useNavigate } from "react-router-dom"
910
import { WorkspaceItemMachineRef } from "../../xServices/workspaces/workspacesXService"
10-
import { AvatarData } from "../AvatarData/AvatarData"
11-
import {
12-
TableCellData,
13-
TableCellDataPrimary,
14-
TableCellDataSecondary,
15-
} from "../TableCellData/TableCellData"
11+
import { TableCellData, TableCellDataPrimary } from "../TableCellData/TableCellData"
1612
import { TableCellLink } from "../TableCellLink/TableCellLink"
1713
import { OutdatedHelpTooltip } from "../Tooltips"
1814
import { WorkspaceLastUsed } from "./WorkspaceLastUsed"
@@ -45,17 +41,11 @@ export const WorkspacesRow: FC<
4541
}}
4642
className={styles.clickableTableRow}
4743
>
48-
<TableCellLink to={workspacePageLink}>
49-
<TableCellData>
50-
<TableCellDataPrimary highlight>{workspace.name}</TableCellDataPrimary>
51-
<TableCellDataSecondary>{workspace.owner_name}</TableCellDataSecondary>
52-
</TableCellData>
53-
</TableCellLink>
54-
5544
<TableCellLink to={workspacePageLink}>
5645
<AvatarData
57-
title={workspace.template_name}
58-
highlightTitle={false}
46+
highlightTitle
47+
title={workspace.name}
48+
subtitle={workspace.owner_name}
5949
avatar={
6050
hasTemplateIcon ? (
6151
<div className={styles.templateIconWrapper}>
@@ -65,6 +55,10 @@ export const WorkspacesRow: FC<
6555
}
6656
/>
6757
</TableCellLink>
58+
59+
<TableCellLink to={workspacePageLink}>
60+
<TableCellDataPrimary>{workspace.template_name}</TableCellDataPrimary>
61+
</TableCellLink>
6862
<TableCellLink to={workspacePageLink}>
6963
<TableCellData>
7064
<WorkspaceLastUsed lastUsedAt={workspace.last_used_at} />

‎site/src/theme/overrides.ts

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { lighten, Theme } from "@material-ui/core/styles"
22
import { Overrides } from "@material-ui/core/styles/overrides"
33
import { colors } from "./colors"
4-
import { borderRadius, MONOSPACE_FONT_FAMILY } from "./constants"
4+
import { borderRadius } from "./constants"
55

66
export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
77
return {
@@ -33,7 +33,6 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
3333
// Prevents a loading button from collapsing!
3434
minHeight: 42,
3535
fontWeight: "normal",
36-
fontFamily: MONOSPACE_FONT_FAMILY,
3736
fontSize: 16,
3837
textTransform: "none",
3938
letterSpacing: "none",
@@ -78,7 +77,6 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
7877
MuiTableHead: {
7978
root: {
8079
display: "table-header-group",
81-
fontFamily: MONOSPACE_FONT_FAMILY,
8280
},
8381
},
8482
MuiTableContainer: {
@@ -89,9 +87,9 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
8987
},
9088
MuiTable: {
9189
root: {
92-
borderCollapse: "collapse",
90+
borderCollapse: "unset",
9391
border: "none",
94-
background: palette.background.default,
92+
background: palette.background.paper,
9593
boxShadow: `0 0 0 1px ${palette.background.default} inset`,
9694
overflow: "hidden",
9795

@@ -116,7 +114,6 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
116114
fontWeight: 600,
117115
},
118116
root: {
119-
fontFamily: MONOSPACE_FONT_FAMILY,
120117
fontSize: 16,
121118
background: palette.background.paper,
122119
borderBottom: `1px solid ${palette.divider}`,

‎site/src/theme/palettes.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,21 @@ export const darkPalette: PaletteOptions = {
88
type: "dark",
99
primary: {
1010
main: colors.blue[7],
11-
contrastText: colors.gray[3],
11+
contrastText: colors.gray[4],
1212
light: colors.blue[6],
1313
dark: colors.blue[9],
1414
},
1515
secondary: {
1616
main: colors.green[11],
17-
contrastText: colors.gray[3],
17+
contrastText: colors.gray[4],
1818
dark: colors.indigo[7],
1919
},
2020
background: {
21-
default: colors.gray[15],
22-
paper: colors.gray[14],
21+
default: colors.gray[17],
22+
paper: colors.gray[16],
2323
},
2424
text: {
25-
primary: colors.gray[3],
25+
primary: colors.gray[4],
2626
secondary: colors.gray[5],
2727
},
2828
divider: colors.gray[13],
@@ -38,12 +38,12 @@ export const darkPalette: PaletteOptions = {
3838
info: {
3939
main: colors.blue[11],
4040
dark: colors.blue[15],
41-
contrastText: colors.gray[3],
41+
contrastText: colors.gray[4],
4242
},
4343
error: {
4444
main: colors.red[5],
4545
dark: colors.red[15],
46-
contrastText: colors.gray[3],
46+
contrastText: colors.gray[4],
4747
},
4848
action: {
4949
hover: colors.gray[13],

0 commit comments

Comments
 (0)