Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Sep 6, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 36 additions & 32 deletions site/src/components/NavbarView/NavbarView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -73,53 +73,58 @@ 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>

<Drawer anchor="left" open={isDrawerOpen} onClose={() => setIsDrawerOpen(false)}>
<div className={styles.drawer}>
<div className={styles.drawerHeader}>
<Logo fill="white" opacity={1} width={125} />
<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} />
</div>
<NavItems canViewAuditLog={canViewAuditLog} />
</div>
<NavItems canViewAuditLog={canViewAuditLog} />
</div>
</Drawer>
</Drawer>

<NavLink className={styles.logo} to="/workspaces">
<Logo fill="white" opacity={1} width={125} />
</NavLink>
<NavLink className={styles.logo} to="/workspaces">
<Logo fill="white" opacity={1} width={125} />
</NavLink>

<NavItems className={styles.desktopNavItems} canViewAuditLog={canViewAuditLog} />
<NavItems className={styles.desktopNavItems} canViewAuditLog={canViewAuditLog} />

<div className={styles.profileButton}>
{user && <UserDropdown user={user} onSignOut={onSignOut} />}
<div className={styles.profileButton}>
{user && <UserDropdown user={user} onSignOut={onSignOut} />}
</div>
</div>
</nav>
)
}

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",
},
Expand Down Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion site/src/components/UserDropdown/UsersDropdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
20 changes: 18 additions & 2 deletions site/src/components/Workspace/Workspace.tsx
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -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 />
Expand Down Expand Up @@ -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} />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think for now it's okay to use a generic alt string

Suggested change
<img alt="" src={workspace.template_icon} className={styles.templateIcon} />
<img alt="Template icon" 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}>
Expand Down Expand Up @@ -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,
},
Expand Down
24 changes: 9 additions & 15 deletions site/src/components/WorkspacesTable/WorkspacesRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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}>
Expand All @@ -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} />
Expand Down
9 changes: 3 additions & 6 deletions site/src/theme/overrides.ts
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -78,7 +77,6 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
MuiTableHead: {
root: {
display: "table-header-group",
fontFamily: MONOSPACE_FONT_FAMILY,
},
},
MuiTableContainer: {
Expand All @@ -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",

Expand All @@ -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}`,
Expand Down
14 changes: 7 additions & 7 deletions site/src/theme/palettes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand All @@ -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],
Expand Down