diff --git a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.stories.tsx b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.stories.tsx index 3d8bb0b4876e5..c0454a11c3b5e 100644 --- a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.stories.tsx +++ b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.stories.tsx @@ -55,3 +55,12 @@ export const SuccessDialogWithCancel: Story = { type: "success", }, }; + +export const SuccessDialogLoading: Story = { + args: { + description: "I am successful.", + hideCancel: true, + type: "success", + confirmLoading: true, + }, +}; diff --git a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx index 50f0c248509d6..8ba40f079b729 100644 --- a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx +++ b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx @@ -32,10 +32,7 @@ const CONFIRM_DIALOG_DEFAULTS: Record< }; export interface ConfirmDialogProps - extends Omit< - DialogActionButtonsProps, - "color" | "confirmDialog" | "onCancel" - > { + extends Omit { readonly description?: ReactNode; /** * hideCancel hides the cancel button when set true, and shows the cancel @@ -135,7 +132,6 @@ export const ConfirmDialog: FC> = ({ = { }; export default meta; + type Story = StoryObj; const Example: Story = {}; +export const Loading: Story = { + args: { + confirmLoading: true, + }, +}; + export { Example as DeleteDialog }; diff --git a/site/src/components/Dialogs/Dialog.tsx b/site/src/components/Dialogs/Dialog.tsx index eba3df2903350..535f151a83dc1 100644 --- a/site/src/components/Dialogs/Dialog.tsx +++ b/site/src/components/Dialogs/Dialog.tsx @@ -12,8 +12,6 @@ export interface DialogActionButtonsProps { confirmText?: ReactNode; /** Whether or not confirm is loading, also disables cancel when true */ confirmLoading?: boolean; - /** Whether or not this is a confirm dialog */ - confirmDialog?: boolean; /** Whether or not the submit button is disabled */ disabled?: boolean; /** Called when cancel is clicked */ @@ -49,6 +47,7 @@ export const DialogActionButtons: React.FC = ({ {cancelText} )} + {onConfirm && ( ({ "&.MuiButton-contained": { backgroundColor: theme.palette.success.main, - color: theme.palette.primary.contrastText, + + "&:not(.MuiLoadingButton-loading)": { + color: theme.palette.primary.contrastText, + }, + "&:hover": { backgroundColor: theme.palette.success.dark, + "@media (hover: none)": { backgroundColor: "transparent", }, + "&.Mui-disabled": { backgroundColor: "transparent", }, }, + "&.Mui-disabled": { - backgroundColor: theme.palette.action.disabledBackground, - color: theme.palette.text.secondary, + backgroundColor: theme.palette.success.dark, + + "&:not(.MuiLoadingButton-loading)": { + color: theme.palette.text.secondary, + }, }, }, diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx index 04c1a70e092e2..d8072bffbc40a 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx @@ -118,7 +118,6 @@ export const ScheduleDialog: FC> = ({