From 4ab980e52c41ea55b858117c741e0d96e9da5876 Mon Sep 17 00:00:00 2001
From: Abhineet Jain <abhineet@coder.com>
Date: Wed, 1 Jun 2022 23:30:00 +0000
Subject: [PATCH 1/2] feat: update ui for error dialog and snackbar

---
 site/src/components/ConfirmDialog/ConfirmDialog.tsx   | 11 +++++------
 site/src/components/Dialog/Dialog.tsx                 |  4 ++--
 .../EnterpriseSnackbar/EnterpriseSnackbar.tsx         |  7 ++++---
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/site/src/components/ConfirmDialog/ConfirmDialog.tsx b/site/src/components/ConfirmDialog/ConfirmDialog.tsx
index 8ff4104f913c4..63ef81b3784a5 100644
--- a/site/src/components/ConfirmDialog/ConfirmDialog.tsx
+++ b/site/src/components/ConfirmDialog/ConfirmDialog.tsx
@@ -48,11 +48,12 @@ interface StyleProps {
 const useStyles = makeStyles((theme) => ({
   dialogWrapper: (props: StyleProps) => ({
     "& .MuiPaper-root": {
-      background: props.type === "info" ? theme.palette.primary.main : theme.palette.error.dark,
+      background: props.type === "info" ? theme.palette.primary.main : theme.palette.background.paper,
+      border: `1px solid ${theme.palette.divider}`,
     },
   }),
   dialogContent: (props: StyleProps) => ({
-    color: props.type === "info" ? theme.palette.primary.contrastText : theme.palette.error.contrastText,
+    color: props.type === "info" ? theme.palette.primary.contrastText : theme.palette.text.secondary,
     padding: theme.spacing(6),
     textAlign: "center",
   }),
@@ -61,16 +62,14 @@ const useStyles = makeStyles((theme) => ({
   },
   description: (props: StyleProps) => ({
     color:
-      props.type === "info"
-        ? fade(theme.palette.primary.contrastText, 0.75)
-        : fade(theme.palette.error.contrastText, 0.75),
+      props.type === "info" ? fade(theme.palette.primary.contrastText, 0.75) : fade(theme.palette.text.secondary, 0.75),
     lineHeight: "160%",
 
     "& strong": {
       color:
         props.type === "info"
           ? fade(theme.palette.primary.contrastText, 0.95)
-          : fade(theme.palette.error.contrastText, 0.95),
+          : fade(theme.palette.text.secondary, 0.95),
     },
   }),
 }))
diff --git a/site/src/components/Dialog/Dialog.tsx b/site/src/components/Dialog/Dialog.tsx
index ea9c3fb7796a9..13e5e72a56485 100644
--- a/site/src/components/Dialog/Dialog.tsx
+++ b/site/src/components/Dialog/Dialog.tsx
@@ -114,7 +114,7 @@ export const DialogActionButtons: React.FC<DialogActionButtonsProps> = ({
           })}
           disabled={confirmLoading}
           onClick={onCancel}
-          variant="contained"
+          variant="outlined"
         >
           {cancelText}
         </LoadingButton>
@@ -145,7 +145,7 @@ interface StyleProps {
 
 const useButtonStyles = makeStyles((theme) => ({
   dialogButton: {
-    borderRadius: 0,
+    borderRadius: theme.shape.borderRadius,
     fontSize: theme.typography.h6.fontSize,
     fontWeight: theme.typography.h5.fontWeight,
     padding: theme.spacing(2.25),
diff --git a/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx b/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx
index 070e255b34751..5740ac3088d1a 100644
--- a/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx
+++ b/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx
@@ -81,8 +81,9 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.error.contrastText,
   },
   snackbarContent: {
+    border: `1px solid ${theme.palette.divider}`,
     borderLeft: `4px solid ${theme.palette.primary.main}`,
-    borderRadius: 0,
+    borderRadius: theme.shape.borderRadius,
     padding: `${theme.spacing(1)}px ${theme.spacing(3)}px ${theme.spacing(1)}px ${theme.spacing(2)}px`,
     boxShadow: theme.shadows[6],
     alignItems: "inherit",
@@ -94,8 +95,8 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.info.contrastText,
   },
   snackbarContentError: {
-    backgroundColor: theme.palette.error.dark,
+    backgroundColor: theme.palette.background.paper,
     borderLeftColor: theme.palette.error.main,
-    color: theme.palette.error.contrastText,
+    color: theme.palette.text.secondary,
   },
 }))

From 0d5e026cf2d081a40ab505279a65dc54e3622dd8 Mon Sep 17 00:00:00 2001
From: Abhineet Jain <abhineet@coder.com>
Date: Thu, 2 Jun 2022 00:29:20 +0000
Subject: [PATCH 2/2] update padding for buttons

---
 site/src/components/ConfirmDialog/ConfirmDialog.tsx | 3 +++
 site/src/components/Dialog/Dialog.tsx               | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/site/src/components/ConfirmDialog/ConfirmDialog.tsx b/site/src/components/ConfirmDialog/ConfirmDialog.tsx
index 63ef81b3784a5..f7933dd12e9b7 100644
--- a/site/src/components/ConfirmDialog/ConfirmDialog.tsx
+++ b/site/src/components/ConfirmDialog/ConfirmDialog.tsx
@@ -51,6 +51,9 @@ const useStyles = makeStyles((theme) => ({
       background: props.type === "info" ? theme.palette.primary.main : theme.palette.background.paper,
       border: `1px solid ${theme.palette.divider}`,
     },
+    "& .MuiDialogActions-spacing": {
+      padding: `0 ${theme.spacing(3.75)}px ${theme.spacing(3.75)}px`,
+    },
   }),
   dialogContent: (props: StyleProps) => ({
     color: props.type === "info" ? theme.palette.primary.contrastText : theme.palette.text.secondary,
diff --git a/site/src/components/Dialog/Dialog.tsx b/site/src/components/Dialog/Dialog.tsx
index 13e5e72a56485..aa222ad4a1985 100644
--- a/site/src/components/Dialog/Dialog.tsx
+++ b/site/src/components/Dialog/Dialog.tsx
@@ -148,7 +148,7 @@ const useButtonStyles = makeStyles((theme) => ({
     borderRadius: theme.shape.borderRadius,
     fontSize: theme.typography.h6.fontSize,
     fontWeight: theme.typography.h5.fontWeight,
-    padding: theme.spacing(2.25),
+    padding: `${theme.spacing(0.75)}px ${theme.spacing(2)}px`,
     width: "100%",
     boxShadow: "none",
   },