Skip to content

Commit 1f55135

Browse files
presleyppresleyp
authored
Make color usage more consistent (coder#3842)
* Tweak overrides - should not cause visual change * Use closest color for avatar * Change hover color of contained buttons * Change nav item color (matches avatar now) * Format * Use lighter border for contained button hover This looks more clickable than lightening the background * Delete unused component * Make dropdown arrow consistent Same up as down. Contrast text everywhere except nav, where it matches links and avatar. * No need to fade right arrows * Add hover color * Consistent box shadows * Format * Delete unused DialogSearch * Deleting unused button types to avoid confusion * Use disabled arrow on disabled action buttons
1 parent 8e1dfc2 commit 1f55135

File tree

17 files changed

+52
-271
lines changed

17 files changed

+52
-271
lines changed

‎site/src/components/BorderedMenu/BorderedMenu.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Popover, { PopoverProps } from "@material-ui/core/Popover"
2-
import { fade, makeStyles } from "@material-ui/core/styles"
2+
import { makeStyles } from "@material-ui/core/styles"
33
import { FC, PropsWithChildren } from "react"
44

55
type BorderedMenuVariant = "admin-dropdown" | "user-dropdown"
@@ -41,6 +41,6 @@ const useStyles = makeStyles((theme) => ({
4141
width: "292px",
4242
border: `2px solid ${theme.palette.secondary.dark}`,
4343
borderRadius: theme.shape.borderRadius,
44-
boxShadow: `4px 4px 0px ${fade(theme.palette.secondary.dark, 0.2)}`,
44+
boxShadow: theme.shadows[6],
4545
},
4646
}))

‎site/src/components/BuildsTable/BuildsTable.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Box from "@material-ui/core/Box"
2-
import { fade, makeStyles, Theme } from "@material-ui/core/styles"
2+
import { makeStyles, Theme } from "@material-ui/core/styles"
33
import Table from "@material-ui/core/Table"
44
import TableBody from "@material-ui/core/TableBody"
55
import TableCell from "@material-ui/core/TableCell"
@@ -115,7 +115,7 @@ export const BuildsTable: FC<React.PropsWithChildren<BuildsTableProps>> = ({
115115
const useStyles = makeStyles((theme) => ({
116116
clickableTableRow: {
117117
"&:hover td": {
118-
backgroundColor: fade(theme.palette.primary.dark, 0.1),
118+
backgroundColor: theme.palette.action.hover,
119119
},
120120

121121
"&:focus": {
@@ -127,7 +127,7 @@ const useStyles = makeStyles((theme) => ({
127127
},
128128
},
129129
arrowRight: {
130-
color: fade(theme.palette.primary.contrastText, 0.7),
130+
color: theme.palette.text.secondary,
131131
width: 20,
132132
height: 20,
133133
},

‎site/src/components/Dialog/Dialog.tsx

Lines changed: 0 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import MuiDialog, { DialogProps as MuiDialogProps } from "@material-ui/core/Dialog"
22
import MuiDialogTitle from "@material-ui/core/DialogTitle"
3-
import InputAdornment from "@material-ui/core/InputAdornment"
4-
import OutlinedInput, { OutlinedInputProps } from "@material-ui/core/OutlinedInput"
53
import { darken, fade, lighten, makeStyles } from "@material-ui/core/styles"
64
import SvgIcon from "@material-ui/core/SvgIcon"
75
import * as React from "react"
86
import { combineClasses } from "../../util/combineClasses"
9-
import { SearchIcon } from "../Icons/SearchIcon"
107
import { LoadingButton, LoadingButtonProps } from "../LoadingButton/LoadingButton"
118
import { ConfirmDialogType } from "./types"
129

@@ -300,53 +297,6 @@ const useButtonStyles = makeStyles((theme) => ({
300297
},
301298
}))
302299

303-
export type DialogSearchProps = Omit<
304-
OutlinedInputProps,
305-
"className" | "fullWidth" | "labelWidth" | "startAdornment"
306-
>
307-
308-
/**
309-
* Formats a search bar right below the title of a Dialog. Passes all props
310-
* through to the Material UI OutlinedInput component contained within.
311-
*/
312-
export const DialogSearch: React.FC<DialogSearchProps> = (props) => {
313-
const styles = useSearchStyles()
314-
return (
315-
<div className={styles.root}>
316-
<OutlinedInput
317-
{...props}
318-
fullWidth
319-
labelWidth={0}
320-
className={styles.input}
321-
startAdornment={
322-
<InputAdornment position="start">
323-
<SearchIcon className={styles.icon} />
324-
</InputAdornment>
325-
}
326-
/>
327-
</div>
328-
)
329-
}
330-
331-
const useSearchStyles = makeStyles(
332-
(theme) => ({
333-
root: {
334-
position: "relative",
335-
padding: `${theme.spacing(2)}px ${theme.spacing(4)}px`,
336-
boxShadow: `0 2px 6px ${fade("#1D407E", 0.2)}`,
337-
zIndex: 2,
338-
},
339-
input: {
340-
margin: 0,
341-
},
342-
icon: {
343-
width: 16,
344-
height: 16,
345-
},
346-
}),
347-
{ name: "CdrDialogSearch" },
348-
)
349-
350300
export type DialogProps = MuiDialogProps
351301

352302
/**

‎site/src/components/DropdownArrows/DropdownArrows.tsx

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,32 @@
1-
import { fade, makeStyles, Theme } from "@material-ui/core/styles"
1+
import { makeStyles, Theme } from "@material-ui/core/styles"
22
import KeyboardArrowDown from "@material-ui/icons/KeyboardArrowDown"
33
import KeyboardArrowUp from "@material-ui/icons/KeyboardArrowUp"
44
import { FC } from "react"
55

66
const useStyles = makeStyles<Theme, ArrowProps>((theme: Theme) => ({
77
arrowIcon: {
8-
color: fade(theme.palette.primary.contrastText, 0.7),
8+
color: ({ color }) => color ?? theme.palette.primary.contrastText,
99
marginLeft: ({ margin }) => (margin ? theme.spacing(1) : 0),
1010
width: 16,
1111
height: 16,
1212
},
1313
arrowIconUp: {
14-
color: theme.palette.primary.contrastText,
14+
color: ({ color }) => color ?? theme.palette.primary.contrastText,
1515
},
1616
}))
1717

1818
interface ArrowProps {
1919
margin?: boolean
20+
color?: string
2021
}
2122

22-
export const OpenDropdown: FC<ArrowProps> = ({ margin = true }) => {
23-
const styles = useStyles({ margin })
23+
export const OpenDropdown: FC<ArrowProps> = ({ margin = true, color }) => {
24+
const styles = useStyles({ margin, color })
2425
return <KeyboardArrowDown aria-label="open-dropdown" className={styles.arrowIcon} />
2526
}
2627

27-
export const CloseDropdown: FC<ArrowProps> = ({ margin = true }) => {
28-
const styles = useStyles({ margin })
28+
export const CloseDropdown: FC<ArrowProps> = ({ margin = true, color }) => {
29+
const styles = useStyles({ margin, color })
2930
return (
3031
<KeyboardArrowUp
3132
aria-label="close-dropdown"

‎site/src/components/DropdownButton/DropdownButton.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Button from "@material-ui/core/Button"
22
import Popover from "@material-ui/core/Popover"
3-
import { makeStyles } from "@material-ui/core/styles"
3+
import { makeStyles, useTheme } from "@material-ui/core/styles"
44
import { CloseDropdown, OpenDropdown } from "components/DropdownArrows/DropdownArrows"
55
import { DropdownContent } from "components/DropdownButton/DropdownContent/DropdownContent"
66
import { FC, ReactNode, useRef, useState } from "react"
@@ -20,9 +20,11 @@ export const DropdownButton: FC<DropdownButtonProps> = ({
2020
handleCancel,
2121
}) => {
2222
const styles = useStyles()
23+
const theme = useTheme()
2324
const anchorRef = useRef<HTMLButtonElement>(null)
2425
const [isOpen, setIsOpen] = useState(false)
2526
const id = isOpen ? "action-popover" : undefined
27+
const canOpen = secondaryActions.length > 0
2628

2729
return (
2830
<span className={styles.buttonContainer}>
@@ -41,12 +43,16 @@ export const DropdownButton: FC<DropdownButtonProps> = ({
4143
aria-haspopup="true"
4244
className={styles.dropdownButton}
4345
ref={anchorRef}
44-
disabled={!secondaryActions.length}
46+
disabled={!canOpen}
4547
onClick={() => {
4648
setIsOpen(true)
4749
}}
4850
>
49-
{isOpen ? <CloseDropdown /> : <OpenDropdown />}
51+
{isOpen ? (
52+
<CloseDropdown />
53+
) : (
54+
<OpenDropdown color={canOpen ? undefined : theme.palette.action.disabled} />
55+
)}
5056
</Button>
5157
<Popover
5258
classes={{ paper: styles.popoverPaper }}

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import Drawer from "@material-ui/core/Drawer"
22
import IconButton from "@material-ui/core/IconButton"
33
import List from "@material-ui/core/List"
44
import ListItem from "@material-ui/core/ListItem"
5-
import { fade, makeStyles } from "@material-ui/core/styles"
5+
import { makeStyles } from "@material-ui/core/styles"
66
import MenuIcon from "@material-ui/icons/Menu"
77
import { useState } from "react"
88
import { NavLink, useLocation } from "react-router-dom"
9+
import { colors } from "theme/colors"
910
import * as TypesGen from "../../api/typesGenerated"
1011
import { navHeight } from "../../theme/constants"
1112
import { combineClasses } from "../../util/combineClasses"
@@ -169,15 +170,15 @@ const useStyles = makeStyles((theme) => ({
169170
},
170171
link: {
171172
alignItems: "center",
172-
color: "hsl(220, 11%, 71%)",
173+
color: colors.gray[6],
173174
display: "flex",
174175
fontSize: 16,
175176
padding: `${theme.spacing(1.5)}px ${theme.spacing(2)}px`,
176177
textDecoration: "none",
177178
transition: "background-color 0.3s ease",
178179

179180
"&:hover": {
180-
backgroundColor: fade(theme.palette.primary.light, 0.05),
181+
backgroundColor: theme.palette.action.hover,
181182
},
182183

183184
// NavLink adds this class when the current route matches.

‎site/src/components/Section/Section.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { makeStyles } from "@material-ui/core/styles"
2-
import { fade } from "@material-ui/core/styles/colorManipulator"
32
import Typography from "@material-ui/core/Typography"
43
import { FC } from "react"
54
import { combineClasses } from "../../util/combineClasses"
@@ -59,7 +58,7 @@ Section.Action = SectionAction
5958
const useStyles = makeStyles((theme) => ({
6059
root: {
6160
backgroundColor: theme.palette.background.paper,
62-
boxShadow: `0px 18px 12px 6px ${fade(theme.palette.common.black, 0.02)}`,
61+
boxShadow: theme.shadows[6],
6362
marginBottom: theme.spacing(1),
6463
padding: theme.spacing(6),
6564
borderRadius: theme.shape.borderRadius,

‎site/src/components/SplitButton/SplitButton.test.tsx

Lines changed: 0 additions & 57 deletions
This file was deleted.

0 commit comments

Comments
 (0)