From a37e61a099c2dcb65a41e28cecd8aba126eb5d3e Mon Sep 17 00:00:00 2001
From: Presley Pizzo <1290996+presleyp@users.noreply.github.com>
Date: Wed, 27 Jul 2022 13:49:03 -0400
Subject: [PATCH] fix: make text colors legible (#3250)

* Update color palette

* Edit dialog error colors

* Format

* Lighten links

* Lighten link just in ErrorSummary

* Format
---
 site/src/components/Dialog/Dialog.tsx             | 6 +++---
 site/src/components/ErrorSummary/ErrorSummary.tsx | 3 ++-
 site/src/theme/palettes.ts                        | 4 +++-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/site/src/components/Dialog/Dialog.tsx b/site/src/components/Dialog/Dialog.tsx
index 8da09f2480..39f2dc1439 100644
--- 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
index ceca96f7d7..f61fb9931c 100644
--- 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
index 7b78334e27..e2e23cdf4d 100644
--- 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],
   },
 }