From aa3f2a5e42f9c606ac72bd7d014f01a107b80eb7 Mon Sep 17 00:00:00 2001 From: Abhineet Jain Date: Thu, 2 Jun 2022 20:57:13 +0000 Subject: [PATCH 1/4] feat: update success confirmation dialog and snackbar --- .../ConfirmDialog/ConfirmDialog.stories.tsx | 7 +++++ .../ConfirmDialog/ConfirmDialog.tsx | 28 +++++++------------ site/src/components/Dialog/Dialog.tsx | 2 +- .../EnterpriseSnackbar/EnterpriseSnackbar.tsx | 10 +++---- 4 files changed, 22 insertions(+), 25 deletions(-) diff --git a/site/src/components/ConfirmDialog/ConfirmDialog.stories.tsx b/site/src/components/ConfirmDialog/ConfirmDialog.stories.tsx index 9c32bd7610dcf..32214e70387a3 100644 --- a/site/src/components/ConfirmDialog/ConfirmDialog.stories.tsx +++ b/site/src/components/ConfirmDialog/ConfirmDialog.stories.tsx @@ -36,3 +36,10 @@ InfoDialog.args = { hideCancel: true, type: "info", } + +export const InfoDialogWithCancel = Template.bind({}) +InfoDialog.args = { + description: "Information can be cool!", + hideCancel: false, + type: "info", +} diff --git a/site/src/components/ConfirmDialog/ConfirmDialog.tsx b/site/src/components/ConfirmDialog/ConfirmDialog.tsx index f7933dd12e9b7..7e5e742652865 100644 --- a/site/src/components/ConfirmDialog/ConfirmDialog.tsx +++ b/site/src/components/ConfirmDialog/ConfirmDialog.tsx @@ -41,40 +41,32 @@ export interface ConfirmDialogProps extends Omit ({ - dialogWrapper: (props: StyleProps) => ({ + dialogWrapper: { "& .MuiPaper-root": { - background: props.type === "info" ? theme.palette.primary.main : theme.palette.background.paper, + background: 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, + }, + dialogContent: { + color: theme.palette.text.secondary, padding: theme.spacing(6), textAlign: "center", - }), + }, titleText: { marginBottom: theme.spacing(3), }, - description: (props: StyleProps) => ({ - color: - props.type === "info" ? fade(theme.palette.primary.contrastText, 0.75) : fade(theme.palette.text.secondary, 0.75), + description: { + color: fade(theme.palette.text.secondary, 0.75), lineHeight: "160%", "& strong": { - color: - props.type === "info" - ? fade(theme.palette.primary.contrastText, 0.95) - : fade(theme.palette.text.secondary, 0.95), + color: fade(theme.palette.text.secondary, 0.95), }, - }), + }, })) /** diff --git a/site/src/components/Dialog/Dialog.tsx b/site/src/components/Dialog/Dialog.tsx index aa222ad4a1985..c24178252b5fb 100644 --- a/site/src/components/Dialog/Dialog.tsx +++ b/site/src/components/Dialog/Dialog.tsx @@ -180,7 +180,7 @@ const useButtonStyles = makeStyles((theme) => ({ // Override disabled to keep background color, change loading spinner to contrast color "&.Mui-disabled": { "&.MuiButton-containedPrimary": { - background: theme.palette.primary.dark, + background: theme.palette.success.main, "& .MuiCircularProgress-root": { color: theme.palette.primary.contrastText, diff --git a/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx b/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx index 5740ac3088d1a..53636a01ec1c0 100644 --- a/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx +++ b/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx @@ -87,16 +87,14 @@ const useStyles = makeStyles((theme) => ({ padding: `${theme.spacing(1)}px ${theme.spacing(3)}px ${theme.spacing(1)}px ${theme.spacing(2)}px`, boxShadow: theme.shadows[6], alignItems: "inherit", + backgroundColor: theme.palette.background.paper, + color: theme.palette.text.secondary, }, snackbarContentInfo: { - backgroundColor: theme.palette.info.main, - // Use primary color as a highlight - borderLeftColor: theme.palette.primary.main, - color: theme.palette.info.contrastText, + // Use success color as a highlight + borderLeftColor: theme.palette.success.main, }, snackbarContentError: { - backgroundColor: theme.palette.background.paper, borderLeftColor: theme.palette.error.main, - color: theme.palette.text.secondary, }, })) From 065245e6fa9e05b3f34facb761fc01845371f65e Mon Sep 17 00:00:00 2001 From: Abhineet Jain Date: Fri, 3 Jun 2022 14:37:23 +0000 Subject: [PATCH 2/4] add success variants to confirm dialog and snackbar --- .../ConfirmDialog/ConfirmDialog.stories.tsx | 16 ++++- .../ConfirmDialog/ConfirmDialog.tsx | 4 ++ site/src/components/Dialog/Dialog.tsx | 63 +++++++++++++++++-- site/src/components/Dialog/types.ts | 2 +- .../EnterpriseSnackbar.stories.tsx | 7 +++ .../EnterpriseSnackbar/EnterpriseSnackbar.tsx | 17 +++-- 6 files changed, 92 insertions(+), 17 deletions(-) diff --git a/site/src/components/ConfirmDialog/ConfirmDialog.stories.tsx b/site/src/components/ConfirmDialog/ConfirmDialog.stories.tsx index 32214e70387a3..9efaacc8ff6cd 100644 --- a/site/src/components/ConfirmDialog/ConfirmDialog.stories.tsx +++ b/site/src/components/ConfirmDialog/ConfirmDialog.stories.tsx @@ -38,8 +38,22 @@ InfoDialog.args = { } export const InfoDialogWithCancel = Template.bind({}) -InfoDialog.args = { +InfoDialogWithCancel.args = { description: "Information can be cool!", hideCancel: false, type: "info", } + +export const SuccessDialog = Template.bind({}) +SuccessDialog.args = { + description: "I am successful.", + hideCancel: true, + type: "success", +} + +export const SuccessDialogWithCancel = Template.bind({}) +SuccessDialog.args = { + description: "I may be successful.", + hideCancel: false, + type: "success", +} diff --git a/site/src/components/ConfirmDialog/ConfirmDialog.tsx b/site/src/components/ConfirmDialog/ConfirmDialog.tsx index 7e5e742652865..fec223afbd2bb 100644 --- a/site/src/components/ConfirmDialog/ConfirmDialog.tsx +++ b/site/src/components/ConfirmDialog/ConfirmDialog.tsx @@ -19,6 +19,10 @@ const CONFIRM_DIALOG_DEFAULTS: Record { diff --git a/site/src/components/Dialog/Dialog.tsx b/site/src/components/Dialog/Dialog.tsx index c24178252b5fb..411a34c2d8e0a 100644 --- a/site/src/components/Dialog/Dialog.tsx +++ b/site/src/components/Dialog/Dialog.tsx @@ -126,11 +126,12 @@ export const DialogActionButtons: React.FC = ({ color={typeToColor(type)} loading={confirmLoading} type="submit" - className={combineClasses([ - styles.dialogButton, - styles.submitButton, - type === "delete" ? styles.errorButton : "", - ])} + className={combineClasses({ + [styles.dialogButton]: true, + [styles.submitButton]: true, + [styles.errorButton]: type === "delete", + [styles.successButton]: type === "success", + })} > {confirmText} @@ -180,7 +181,7 @@ const useButtonStyles = makeStyles((theme) => ({ // Override disabled to keep background color, change loading spinner to contrast color "&.Mui-disabled": { "&.MuiButton-containedPrimary": { - background: theme.palette.success.main, + background: theme.palette.primary.dark, "& .MuiCircularProgress-root": { color: theme.palette.primary.contrastText, @@ -246,6 +247,56 @@ const useButtonStyles = makeStyles((theme) => ({ }, }, }, + successButton: { + "&.MuiButton-contained": { + backgroundColor: theme.palette.success.main, + color: theme.palette.primary.contrastText, + "&:hover": { + backgroundColor: darken(theme.palette.success.main, 0.3), + "@media (hover: none)": { + backgroundColor: "transparent", + }, + "&.Mui-disabled": { + backgroundColor: "transparent", + }, + }, + "&.Mui-disabled": { + backgroundColor: theme.palette.action.disabledBackground, + color: fade(theme.palette.text.disabled, 0.5), + }, + }, + + "&.MuiButton-outlined": { + color: theme.palette.success.main, + borderColor: theme.palette.success.main, + "&:hover": { + backgroundColor: fade(theme.palette.success.main, theme.palette.action.hoverOpacity), + "@media (hover: none)": { + backgroundColor: "transparent", + }, + "&.Mui-disabled": { + backgroundColor: "transparent", + }, + }, + "&.Mui-disabled": { + color: fade(theme.palette.text.disabled, 0.5), + borderColor: theme.palette.action.disabled, + }, + }, + + "&.MuiButton-text": { + color: theme.palette.success.main, + "&:hover": { + backgroundColor: fade(theme.palette.success.main, theme.palette.action.hoverOpacity), + "@media (hover: none)": { + backgroundColor: "transparent", + }, + }, + "&.Mui-disabled": { + color: fade(theme.palette.text.disabled, 0.5), + }, + }, + }, })) export type DialogSearchProps = Omit diff --git a/site/src/components/Dialog/types.ts b/site/src/components/Dialog/types.ts index bc827e0b6e4b6..a2909db8258e5 100644 --- a/site/src/components/Dialog/types.ts +++ b/site/src/components/Dialog/types.ts @@ -1 +1 @@ -export type ConfirmDialogType = "delete" | "info" +export type ConfirmDialogType = "delete" | "info" | "success" diff --git a/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.stories.tsx b/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.stories.tsx index 2565cab09fc28..751f8544d4e79 100644 --- a/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.stories.tsx +++ b/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.stories.tsx @@ -21,3 +21,10 @@ Info.args = { open: true, message: "Hey, something happened.", } + +export const Success = Template.bind({}) +Success.args = { + variant: "success", + open: true, + message: "Hey, something good happened.", +} diff --git a/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx b/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx index 53636a01ec1c0..03ce89c375624 100644 --- a/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx +++ b/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx @@ -5,7 +5,7 @@ import CloseIcon from "@material-ui/icons/Close" import { FC } from "react" import { combineClasses } from "../../util/combineClasses" -type EnterpriseSnackbarVariant = "error" | "info" +type EnterpriseSnackbarVariant = "error" | "info" | "success" export interface EnterpriseSnackbarProps extends MuiSnackbarProps { /** Called when the snackbar should close, either from timeout or clicking close */ @@ -45,7 +45,7 @@ export const EnterpriseSnackbar: FC = ({
{action} - +
} @@ -55,6 +55,7 @@ export const EnterpriseSnackbar: FC = ({ [styles.snackbarContent]: true, [styles.snackbarContentInfo]: variant === "info", [styles.snackbarContentError]: variant === "error", + [styles.snackbarContentSuccess]: variant === "success", }), }} onClose={onClose} @@ -73,12 +74,7 @@ const useStyles = makeStyles((theme) => ({ closeIcon: { width: 25, height: 25, - color: theme.palette.info.contrastText, - }, - closeIconError: { - width: 25, - height: 25, - color: theme.palette.error.contrastText, + color: theme.palette.primary.contrastText, }, snackbarContent: { border: `1px solid ${theme.palette.divider}`, @@ -92,9 +88,12 @@ const useStyles = makeStyles((theme) => ({ }, snackbarContentInfo: { // Use success color as a highlight - borderLeftColor: theme.palette.success.main, + borderLeftColor: theme.palette.primary.main, }, snackbarContentError: { borderLeftColor: theme.palette.error.main, }, + snackbarContentSuccess: { + borderLeftColor: theme.palette.success.main, + }, })) From 408abd08fb992ddd26b0f08d395e9afd7b9846e2 Mon Sep 17 00:00:00 2001 From: Abhineet Jain Date: Fri, 3 Jun 2022 14:43:11 +0000 Subject: [PATCH 3/4] update story name --- site/src/components/ConfirmDialog/ConfirmDialog.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/ConfirmDialog/ConfirmDialog.stories.tsx b/site/src/components/ConfirmDialog/ConfirmDialog.stories.tsx index 9efaacc8ff6cd..694d131eed99c 100644 --- a/site/src/components/ConfirmDialog/ConfirmDialog.stories.tsx +++ b/site/src/components/ConfirmDialog/ConfirmDialog.stories.tsx @@ -52,7 +52,7 @@ SuccessDialog.args = { } export const SuccessDialogWithCancel = Template.bind({}) -SuccessDialog.args = { +SuccessDialogWithCancel.args = { description: "I may be successful.", hideCancel: false, type: "success", From d4e6096aea79ad9575fd564254dcf5de3187aebc Mon Sep 17 00:00:00 2001 From: Abhineet Jain Date: Fri, 3 Jun 2022 15:07:34 +0000 Subject: [PATCH 4/4] use success variant for snackbar --- .../src/components/GlobalSnackbar/GlobalSnackbar.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx index 873572848da76..e2dd795f806ce 100644 --- a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx +++ b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx @@ -15,6 +15,16 @@ import { SnackbarEventType, } from "./utils" +const variantFromMsgType = (type: MsgType) => { + if (type === MsgType.Error) { + return "error" + } else if (type === MsgType.Success) { + return "success" + } else { + return "info" + } +} + export const GlobalSnackbar: React.FC = () => { const styles = useStyles() const [open, setOpen] = useState(false) @@ -63,7 +73,7 @@ export const GlobalSnackbar: React.FC = () => { return ( {notification.msgType === MsgType.Error && }