8000 Change the primary UI font, darken the background, and show template icons for workspaces by kylecarbs · Pull Request #3863 · coder/coder · GitHub
[go: up one dir, main page]
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.

Sign up for GitHub

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

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
32f9ba8
Use darker colors in the dashboard
kylecarbs Sep 4, 2022
3699ab9
Add icons to workspaces rows and apge
kylecarbs Sep 4, 2022
26d2db8
Add narrowed navbar to tighten up design
kylecarbs Sep 5, 2022
fccab4b
Merge branch 'main' into darker
kylecarbs Sep 6, 2022
8029021
Swap gray[3] for gray[4]
kylecarbs Sep 6, 2022
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
Prev Previous commit
Next Next commit
Add narrowed navbar to tighten up design
  • Loading branch information
@kylecarbs
kylecarbs committed Sep 5, 2022
commit 26d2db8ebad11d82675adb9892f886b7aba7e7db
68 changes: 36 additions & 32 deletions site/src/components/NavbarView/NavbarView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up 8000 @@ -72,53 +72,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 @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion site/src/components/UserDropdown/UsersDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down
0