diff --git a/site/src/components/ConfirmDialog/ConfirmDialog.tsx b/site/src/components/ConfirmDialog/ConfirmDialog.tsx index 8ff4104f913c4..f7933dd12e9b7 100644 --- 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 index ea9c3fb7796a9..aa222ad4a1985 100644 --- a/site/src/components/Dialog/Dialog.tsx +++ b/site/src/components/Dialog/Dialog.tsx @@ -114,7 +114,7 @@ export const DialogActionButtons: React.FC = ({ })} disabled={confirmLoading} onClick={onCancel} - variant="contained" + variant="outlined" > {cancelText} @@ -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 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, }, }))