fix: make text colors legible (coder#3250)

presleyp · web-flow · commit a37e61a099c2 · 2022-07-27T13:49:03.000-04:00
* Update color palette

* Edit dialog error colors

* Format

* Lighten links

* Lighten link just in ErrorSummary

* Format
diff --git a/site/src/components/Dialog/Dialog.tsx b/site/src/components/Dialog/Dialog.tsx
@@ -2,7 +2,7 @@ import MuiDialog, { DialogProps as MuiDialogProps } from "@material-ui/core/Dial
 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, makeStyles } from "@material-ui/core/styles"
+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"
@@ -200,10 +200,10 @@ const useButtonStyles = makeStyles((theme) => ({
   },
   errorButton: {
     "&.MuiButton-contained": {
-      backgroundColor: theme.palette.error.main,
+      backgroundColor: lighten(theme.palette.error.dark, 0.15),
       color: theme.palette.error.contrastText,
       "&:hover": {
-        backgroundColor: darken(theme.palette.error.main, 0.3),
+        backgroundColor: theme.palette.error.dark,
         "@media (hover: none)": {
           backgroundColor: "transparent",
         },
diff --git a/site/src/components/ErrorSummary/ErrorSummary.tsx b/site/src/components/ErrorSummary/ErrorSummary.tsx
@@ -2,7 +2,7 @@ import Button from "@material-ui/core/Button"
 import Collapse from "@material-ui/core/Collapse"
 import IconButton from "@material-ui/core/IconButton"
 import Link from "@material-ui/core/Link"
-import { darken, makeStyles, Theme } from "@material-ui/core/styles"
+import { darken, lighten, makeStyles, Theme } from "@material-ui/core/styles"
 import CloseIcon from "@material-ui/icons/Close"
 import RefreshIcon from "@material-ui/icons/Refresh"
 import { ApiError, getErrorDetail, getErrorMessage } from "api/errors"
@@ -103,6 +103,7 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
   },
   detailsLink: {
     cursor: "pointer",
+    color: `${lighten(theme.palette.primary.light, 0.2)}`,
   },
   details: {
     marginTop: `${theme.spacing(2)}px`,
diff --git a/site/src/theme/palettes.ts b/site/src/theme/palettes.ts
@@ -34,9 +34,11 @@ export const darkPalette: PaletteOptions = {
   info: {
     main: colors.blue[11],
     dark: colors.blue[15],
+    contrastText: colors.gray[3],
   },
   error: {
-    main: colors.red[11],
+    main: colors.red[5],
     dark: colors.red[15],
+    contrastText: colors.gray[3],
   },
 }
