ux: negative button for confirm-dialogs
Massimo Melina committed
Sep 3, 2022 at 22:31 UTC
dee6e84f19d263806d685d0170c45a40454cba9a
2 files changed
+19
-7
admin/src/dialog.ts
+4
-2
@@ -22,6 +22,7 @@ import { Check, Close, Error as ErrorIcon, Forward, Info, Warning } from '@mui/i
22
import { newDialog, closeDialog, dialogsDefaults, DialogOptions } from '@hfs/shared'
23
import { Form, FormProps } from '@hfs/mui-grid-form'
24
import { useBreakpoint } from './misc'
25
+import { Flex } from '@hfs/frontend/src/components'
26
export * from '@hfs/shared/lib/dialogs'
27
28
dialogsDefaults.Container = function Container(d:DialogOptions) {
@@ -99,11 +100,12 @@ export async function confirmDialog(msg: string | ReactElement, { href }: Confir
100
function Content() {
101
return h(Fragment, {},
102
h(Box, { mb: 2 }, msg),
102
- h(Box, { textAlign: 'right' },
103
+ h(Flex, {},
104
h('a', {
105
href,
106
onClick: () => closeDialog(true),
106
- }, h(Button, {}, 'Confirm'))
107
+ }, h(Button, { variant: 'contained' }, "Confirm")),
108
+ h(Button, { onClick: () => closeDialog(false) }, "Don't"),
109
),
110
)
111
}
frontend/src/dialog.ts
+15
-5
@@ -83,11 +83,21 @@ export async function confirmDialog(msg: ReactElement | string, { href }: Confir
83
function Content() {
84
return h('div', {},
85
msg,
86
- h('a', {
87
- href,
88
- style: { float: 'right' },
89
- onClick() { closeDialog(true) },
90
- }, h('button', {}, 'Confirm'))
86
+ h('div', {
87
+ style: {
88
+ display: 'flex',
89
+ justifyContent: 'flex-end',
90
+ gap: '1em'
91
+ },
92
+ },
93
+ h('a', {
94
+ href,
95
+ onClick() { closeDialog(true) },
96
+ }, h('button', {}, "Confirm")),
97
+ h('button', {
98
+ onClick() { closeDialog(false) },
99
+ }, "Don't"),
100
+ )
101
)
102
}
103
}