coder · presleyp · Sep 6, 2022 · Sep 2, 2022 · Sep 2, 2022 · Sep 2, 2022
diff --git a/site/src/components/BorderedMenu/BorderedMenu.tsx b/site/src/components/BorderedMenu/BorderedMenu.tsx
@@ -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"
@@ -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],
   },
 }))
diff --git a/site/src/components/BuildsTable/BuildsTable.tsx b/site/src/components/BuildsTable/BuildsTable.tsx
@@ -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"
@@ -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": {
@@ -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,
   },

diff --git a/site/src/components/Dialog/Dialog.tsx b/site/src/components/Dialog/Dialog.tsx
@@ -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"
 
@@ -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
 
 /**

diff --git a/site/src/components/DropdownArrows/DropdownArrows.tsx b/site/src/components/DropdownArrows/DropdownArrows.tsx
@@ -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"

diff --git a/site/src/components/DropdownButton/DropdownButton.tsx b/site/src/components/DropdownButton/DropdownButton.tsx
@@ -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"
@@ -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}>
@@ -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 }}

diff --git a/site/src/components/NavbarView/NavbarView.tsx b/site/src/components/NavbarView/NavbarView.tsx
@@ -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"
@@ -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.

diff --git a/site/src/components/Section/Section.tsx b/site/src/components/Section/Section.tsx
@@ -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"
@@ -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,

diff --git a/site/src/components/SplitButton/SplitButton.test.tsx b/site/src/components/SplitButton/SplitButton.test.tsx