Skip to content

Make color usage more consistent #3842

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 17 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
4 changes: 2 additions & 2 deletions site/src/components/BorderedMenu/BorderedMenu.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import Popover, { PopoverProps } from "@material-ui/core/Popover"
import { fade, makeStyles } from "@material-ui/core/styles"
import { makeStyles } from "@material-ui/core/styles"
import { FC, PropsWithChildren } from "react"

type BorderedMenuVariant = "admin-dropdown" | "user-dropdown"
Expand Down Expand Up @@ -41,6 +41,6 @@ const useStyles = makeStyles((theme) => ({
width: "292px",
border: `2px solid ${theme.palette.secondary.dark}`,
borderRadius: theme.shape.borderRadius,
boxShadow: `4px 4px 0px ${fade(theme.palette.secondary.dark, 0.2)}`,
boxShadow: theme.shadows[6],
},
}))
6 changes: 3 additions & 3 deletions site/src/components/BuildsTable/BuildsTable.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import Box from "@material-ui/core/Box"
import { fade, makeStyles, Theme } from "@material-ui/core/styles"
import { makeStyles, Theme } from "@material-ui/core/styles"
import Table from "@material-ui/core/Table"
import TableBody from "@material-ui/core/TableBody"
import TableCell from "@material-ui/core/TableCell"
Expand Down Expand Up @@ -115,7 +115,7 @@ export const BuildsTable: FC<React.PropsWithChildren<BuildsTableProps>> = ({
const useStyles = makeStyles((theme) => ({
clickableTableRow: {
"&:hover td": {
backgroundColor: fade(theme.palette.primary.dark, 0.1),
backgroundColor: theme.palette.action.hover,
},

"&:focus": {
Expand All @@ -127,7 +127,7 @@ const useStyles = makeStyles((theme) => ({
},
},
arrowRight: {
color: fade(theme.palette.primary.contrastText, 0.7),
color: theme.palette.text.secondary,
width: 20,
height: 20,
},
Expand Down
50 changes: 0 additions & 50 deletions site/src/components/Dialog/Dialog.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
import MuiDialog, { DialogProps as MuiDialogProps } from "@material-ui/core/Dialog"
import MuiDialogTitle from "@material-ui/core/DialogTitle"
import InputAdornment from "@material-ui/core/InputAdornment"
import OutlinedInput, { OutlinedInputProps } from "@material-ui/core/OutlinedInput"
import { darken, fade, lighten, makeStyles } from "@material-ui/core/styles"
import SvgIcon from "@material-ui/core/SvgIcon"
import * as React from "react"
import { combineClasses } from "../../util/combineClasses"
import { SearchIcon } from "../Icons/SearchIcon"
import { LoadingButton, LoadingButtonProps } from "../LoadingButton/LoadingButton"
import { ConfirmDialogType } from "./types"

Expand Down Expand Up @@ -300,53 +297,6 @@ const useButtonStyles = makeStyles((theme) => ({
},
}))

export type DialogSearchProps = Omit<
OutlinedInputProps,
"className" | "fullWidth" | "labelWidth" | "startAdornment"
>

/**
* Formats a search bar right below the title of a Dialog. Passes all props
* through to the Material UI OutlinedInput component contained within.
*/
export const DialogSearch: React.FC<DialogSearchProps> = (props) => {
const styles = useSearchStyles()
return (
<div className={styles.root}>
<OutlinedInput
{...props}
fullWidth
labelWidth={0}
className={styles.input}
startAdornment={
<InputAdornment position="start">
<SearchIcon className={styles.icon} />
</InputAdornment>
}
/>
</div>
)
}

const useSearchStyles = makeStyles(
(theme) => ({
root: {
position: "relative",
padding: `${theme.spacing(2)}px ${theme.spacing(4)}px`,
boxShadow: `0 2px 6px ${fade("#1D407E", 0.2)}`,
zIndex: 2,
},
input: {
margin: 0,
},
icon: {
width: 16,
height: 16,
},
}),
{ name: "CdrDialogSearch" },
)

export type DialogProps = MuiDialogProps

/**
Expand Down
15 changes: 8 additions & 7 deletions site/src/components/DropdownArrows/DropdownArrows.tsx
Original file line number Diff line number Diff line change
@@ -1,31 +1,32 @@
import { fade, makeStyles, Theme } from "@material-ui/core/styles"
import { makeStyles, Theme } from "@material-ui/core/styles"
import KeyboardArrowDown from "@material-ui/icons/KeyboardArrowDown"
import KeyboardArrowUp from "@material-ui/icons/KeyboardArrowUp"
import { FC } from "react"

const useStyles = makeStyles<Theme, ArrowProps>((theme: Theme) => ({
arrowIcon: {
color: fade(theme.palette.primary.contrastText, 0.7),
color: ({ color }) => color ?? theme.palette.primary.contrastText,
marginLeft: ({ margin }) => (margin ? theme.spacing(1) : 0),
width: 16,
height: 16,
},
arrowIconUp: {
color: theme.palette.primary.contrastText,
color: ({ color }) => color ?? theme.palette.primary.contrastText,
},
}))

interface ArrowProps {
margin?: boolean
color?: string
}

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

export const CloseDropdown: FC<ArrowProps> = ({ margin = true }) => {
const styles = useStyles({ margin })
export const CloseDropdown: FC<ArrowProps> = ({ margin = true, color }) => {
const styles = useStyles({ margin, color })
return (
<KeyboardArrowUp
aria-label="close-dropdown"
Expand Down
12 changes: 9 additions & 3 deletions site/src/components/DropdownButton/DropdownButton.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import Button from "@material-ui/core/Button"
import Popover from "@material-ui/core/Popover"
import { makeStyles } from "@material-ui/core/styles"
import { makeStyles, useTheme } from "@material-ui/core/styles"
import { CloseDropdown, OpenDropdown } from "components/DropdownArrows/DropdownArrows"
import { DropdownContent } from "components/DropdownButton/DropdownContent/DropdownContent"
import { FC, ReactNode, useRef, useState } from "react"
Expand All @@ -20,9 +20,11 @@ export const DropdownButton: FC<DropdownButtonProps> = ({
handleCancel,
}) => {
const styles = useStyles()
const theme = useTheme()
const anchorRef = useRef<HTMLButtonElement>(null)
const [isOpen, setIsOpen] = useState(false)
const id = isOpen ? "action-popover" : undefined
const canOpen = secondaryActions.length > 0

return (
<span className={styles.buttonContainer}>
Expand All @@ -41,12 +43,16 @@ export const DropdownButton: FC<DropdownButtonProps> = ({
aria-haspopup="true"
className={styles.dropdownButton}
ref={anchorRef}
disabled={!secondaryActions.length}
disabled={!canOpen}
onClick={() => {
setIsOpen(true)
}}
>
{isOpen ? <CloseDropdown /> : <OpenDropdown />}
{isOpen ? (
<CloseDropdown />
) : (
<OpenDropdown color={canOpen ? undefined : theme.palette.action.disabled} />
)}
</Button>
<Popover
classes={{ paper: styles.popoverPaper }}
Expand Down
7 changes: 4 additions & 3 deletions site/src/components/NavbarView/NavbarView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@ import Drawer from "@material-ui/core/Drawer"
import IconButton from "@material-ui/core/IconButton"
import List from "@material-ui/core/List"
import ListItem from "@material-ui/core/ListItem"
import { fade, makeStyles } from "@material-ui/core/styles"
import { makeStyles } from "@material-ui/core/styles"
import MenuIcon from "@material-ui/icons/Menu"
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 { combineClasses } from "../../util/combineClasses"
Expand Down Expand Up @@ -169,15 +170,15 @@ const useStyles = makeStyles((theme) => ({
},
link: {
alignItems: "center",
color: "hsl(220, 11%, 71%)",
color: colors.gray[6],
display: "flex",
fontSize: 16,
padding: `${theme.spacing(1.5)}px ${theme.spacing(2)}px`,
textDecoration: "none",
transition: "background-color 0.3s ease",

"&:hover": {
backgroundColor: fade(theme.palette.primary.light, 0.05),
backgroundColor: theme.palette.action.hover,
},

// NavLink adds this class when the current route matches.
Expand Down
3 changes: 1 addition & 2 deletions site/src/components/Section/Section.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { makeStyles } from "@material-ui/core/styles"
import { fade } from "@material-ui/core/styles/colorManipulator"
import Typography from "@material-ui/core/Typography"
import { FC } from "react"
import { combineClasses } from "../../util/combineClasses"
Expand Down Expand Up @@ -59,7 +58,7 @@ Section.Action = SectionAction
const useStyles = makeStyles((theme) => ({
root: {
backgroundColor: theme.palette.background.paper,
boxShadow: `0px 18px 12px 6px ${fade(theme.palette.common.black, 0.02)}`,
boxShadow: theme.shadows[6],
marginBottom: theme.spacing(1),
padding: theme.spacing(6),
borderRadius: theme.shape.borderRadius,
Expand Down
57 changes: 0 additions & 57 deletions site/src/components/SplitButton/SplitButton.test.tsx

This file was deleted.

Loading