feat: Update UI for error dialog and snackbar (#1971)

AbhineetJain · web-flow · commit e09cd3e9cf27 · 2022-06-02T11:23:52.000-04:00
* feat: update ui for error dialog and snackbar

* update padding for buttons
diff --git a/site/src/components/ConfirmDialog/ConfirmDialog.tsx b/site/src/components/ConfirmDialog/ConfirmDialog.tsx
@@ -48,11 +48,15 @@ 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}`,
+    },
+    "& .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.error.contrastText,
+    color: props.type === "info" ? theme.palette.primary.contrastText : theme.palette.text.secondary,
     padding: theme.spacing(6),
     textAlign: "center",
   }),
@@ -61,16 +65,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
@@ -114,7 +114,7 @@ export const DialogActionButtons: React.FC<DialogActionButtonsProps> = ({
           })}
           disabled={confirmLoading}
           onClick={onCancel}
-          variant="contained"
+          variant="outlined"
         >
           {cancelText}
         </LoadingButton>
@@ -145,10 +145,10 @@ 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),
+    padding: `${theme.spacing(0.75)}px ${theme.spacing(2)}px`,
     width: "100%",
     boxShadow: "none",
   },
diff --git 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,
   },
 }))
