Skip to content

Commit 8360357

Browse files
BrunoQuaresmaBrunoQuaresma
authored
refactor(site): Redesign dialogs (#6237)
1 parent 909fbb6 commit 8360357

File tree

7 files changed

+70
-178
lines changed

7 files changed

+70
-178
lines changed

‎site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.stories.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { action } from "@storybook/addon-actions"
12
import { ComponentMeta, Story } from "@storybook/react"
23
import { ConfirmDialog, ConfirmDialogProps } from "./ConfirmDialog"
34

@@ -7,9 +8,11 @@ export default {
78
argTypes: {
89
onClose: {
910
action: "onClose",
11+
defaultValue: action("onClose"),
1012
},
1113
onConfirm: {
1214
action: "onConfirm",
15+
defaultValue: action("onConfirm"),
1316
},
1417
open: {
1518
control: "boolean",

‎site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx

+22-27
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import DialogActions from "@material-ui/core/DialogActions"
2-
import { alpha, makeStyles } from "@material-ui/core/styles"
3-
import Typography from "@material-ui/core/Typography"
2+
import { makeStyles } from "@material-ui/core/styles"
43
import { ReactNode, FC, PropsWithChildren } from "react"
54
import {
65
Dialog,
@@ -61,25 +60,35 @@ const useStyles = makeStyles((theme) => ({
6160
"& .MuiPaper-root": {
6261
background: theme.palette.background.paper,
6362
border: `1px solid ${theme.palette.divider}`,
63+
width: "100%",
64+
maxWidth: theme.spacing(55),
6465
},
6566
"& .MuiDialogActions-spacing": {
66-
padding: `0 ${theme.spacing(3.75)}px ${theme.spacing(3.75)}px`,
67+
padding: `0 ${theme.spacing(5)}px ${theme.spacing(5)}px`,
6768
},
6869
},
6970
dialogContent: {
7071
color: theme.palette.text.secondary,
71-
padding: theme.spacing(6),
72-
textAlign: "center",
72+
padding: theme.spacing(5),
7373
},
74-
titleText: {
75-
marginBottom: theme.spacing(3),
74+
dialogTitle: {
75+
margin: 0,
76+
marginBottom: theme.spacing(2),
77+
color: theme.palette.text.primary,
78+
fontWeight: 400,
79+
fontSize: theme.spacing(2.5),
7680
},
77-
description: {
78-
color: alpha(theme.palette.text.secondary, 0.75),
81+
dialogDescription: {
82+
color: theme.palette.text.secondary,
7983
lineHeight: "160%",
84+
fontSize: 16,
8085

8186
"& strong": {
82-
color: alpha(theme.palette.text.secondary, 0.95),
87+
color: theme.palette.text.primary,
88+
},
89+
90+
"& p": {
91+
margin: theme.spacing(1, 0),
8392
},
8493
},
8594
}))
@@ -110,25 +119,11 @@ export const ConfirmDialog: FC<PropsWithChildren<ConfirmDialogProps>> = ({
110119
}
111120

112121
return (
113-
<Dialog
114-
className={styles.dialogWrapper}
115-
maxWidth="sm"
116-
onClose={onClose}
117-
open={open}
118-
>
122+
<Dialog className={styles.dialogWrapper} onClose={onClose} open={open}>
119123
<div className={styles.dialogContent}>
120-
<Typography className={styles.titleText} variant="h3">
121-
{title}
122-
</Typography>
123-
124+
<h3 className={styles.dialogTitle}>{title}</h3>
124125
{description && (
125-
<Typography
126-
component={typeof description === "string" ? "p" : "div"}
127-
className={styles.description}
128-
variant="body2"
129-
>
130-
{description}
131-
</Typography>
126+
<div className={styles.dialogDescription}>{description}</div>
132127
)}
133128
</div>
134129

‎site/src/components/Dialogs/DeleteDialog/DeleteDialog.stories.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { action } from "@storybook/addon-actions"
12
import { ComponentMeta, Story } from "@storybook/react"
23
import { DeleteDialog, DeleteDialogProps } from "./DeleteDialog"
34

@@ -7,9 +8,11 @@ export default {
78
argTypes: {
89
onCancel: {
910
action: "onClose",
11+
defaultValue: action("onClose"),
1012
},
1113
onConfirm: {
1214
action: "onConfirm",
15+
defaultValue: action("onConfirm"),
1316
},
1417
open: {
1518
control: "boolean",

‎site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx

+26-22
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
import FormHelperText from "@material-ui/core/FormHelperText"
21
import makeStyles from "@material-ui/core/styles/makeStyles"
32
import TextField from "@material-ui/core/TextField"
4-
import Typography from "@material-ui/core/Typography"
53
import { Maybe } from "components/Conditionals/Maybe"
6-
import { Stack } from "components/Stack/Stack"
74
import { ChangeEvent, useState, PropsWithChildren, FC } from "react"
85
import { useTranslation } from "react-i18next"
96
import { ConfirmDialog } from "../ConfirmDialog/ConfirmDialog"
@@ -34,30 +31,33 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
3431
const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
3532
setNameValue(event.target.value)
3633
}
34+
const hasError = nameValue.length > 0 && !confirmed
3735

3836
const content = (
3937
<>
40-
<Typography>{t("deleteDialog.intro", { entity })}</Typography>
38+
<p>{t("deleteDialog.intro", { entity })}</p>
4139
<Maybe condition={info !== undefined}>
42-
<Typography className={styles.warning}>{info}</Typography>
40+
<p className={styles.warning}>{info}</p>
4341
</Maybe>
44-
<Typography>{t("deleteDialog.confirm", { entity })}</Typography>
45-
<Stack spacing={1}>
46-
<TextField
47-
name="confirmation"
48-
autoComplete="off"
49-
id="confirmation"
50-
placeholder={name}
51-
value={nameValue}
52-
onChange={handleChange}
53-
label={t("deleteDialog.confirmLabel", { entity })}
54-
/>
55-
<Maybe condition={nameValue.length > 0 && !confirmed}>
56-
<FormHelperText error>
57-
{t("deleteDialog.incorrectName", { entity })}
58-
</FormHelperText>
59-
</Maybe>
60-
</Stack>
42+
<p>{t("deleteDialog.confirm", { entity })}</p>
43+
44+
<TextField
45+
fullWidth
46+
InputLabelProps={{
47+
shrink: true,
48+
}}
49+
autoFocus
50+
className={styles.textField}
51+
name="confirmation"
52+
autoComplete="off"
53+
id="confirmation"
54+
placeholder={name}
55+
value={nameValue}
56+
onChange={handleChange}
57+
label={t("deleteDialog.confirmLabel", { entity })}
58+
error={hasError}
59+
helperText={hasError && t("deleteDialog.incorrectName", { entity })}
60+
/>
6161
</>
6262
)
6363

@@ -80,4 +80,8 @@ const useStyles = makeStyles((theme) => ({
8080
warning: {
8181
color: theme.palette.warning.light,
8282
},
83+
84+
textField: {
85+
marginTop: theme.spacing(3),
86+
},
8387
}))

‎site/src/components/Dialogs/Dialog.tsx

+9-116
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import MuiDialog, {
22
DialogProps as MuiDialogProps,
33
} from "@material-ui/core/Dialog"
4-
import { alpha, darken, lighten, makeStyles } from "@material-ui/core/styles"
4+
import { alpha, darken, makeStyles } from "@material-ui/core/styles"
55
import * as React from "react"
6+
import { colors } from "theme/colors"
67
import { combineClasses } from "../../util/combineClasses"
78
import {
89
LoadingButton,
@@ -42,7 +43,6 @@ export const DialogActionButtons: React.FC<DialogActionButtonsProps> = ({
4243
cancelText = "Cancel",
4344
confirmText = "Confirm",
4445
confirmLoading = false,
45-
confirmDialog,
4646
disabled = false,
4747
onCancel,
4848
onConfirm,
@@ -54,29 +54,24 @@ export const DialogActionButtons: React.FC<DialogActionButtonsProps> = ({
5454
<>
5555
{onCancel && (
5656
<LoadingButton
57-
className={combineClasses({
58-
[styles.dialogButton]: true,
59-
[styles.cancelButton]: true,
60-
[styles.confirmDialogCancelButton]: confirmDialog,
61-
})}
6257
disabled={confirmLoading}
6358
onClick={onCancel}
6459
variant="outlined"
60+
fullWidth
6561
>
6662
{cancelText}
6763
</LoadingButton>
6864
)}
6965
{onConfirm && (
7066
<LoadingButton
67+
fullWidth
7168
variant="contained"
7269
onClick={onConfirm}
7370
color={typeToColor(type)}
7471
loading={confirmLoading}
7572
disabled={disabled}
7673
type="submit"
7774
className={combineClasses({
78-
[styles.dialogButton]: true,
79-
[styles.submitButton]: true,
8075
[styles.errorButton]: type === "delete",
8176
[styles.successButton]: type === "success",
8277
})}
@@ -88,119 +83,17 @@ export const DialogActionButtons: React.FC<DialogActionButtonsProps> = ({
8883
)
8984
}
9085

91-
interface StyleProps {
92-
type: ConfirmDialogType
93-
}
94-
9586
const useButtonStyles = makeStyles((theme) => ({
96-
dialogButton: {
97-
borderRadius: theme.shape.borderRadius,
98-
fontSize: theme.typography.h6.fontSize,
99-
fontWeight: theme.typography.h5.fontWeight,
100-
padding: `${theme.spacing(0.75)}px ${theme.spacing(2)}px`,
101-
width: "100%",
102-
boxShadow: "none",
103-
},
104-
cancelButton: {
105-
background: alpha(theme.palette.primary.main, 0.1),
106-
color: theme.palette.primary.main,
107-
108-
"&:hover": {
109-
background: alpha(theme.palette.primary.main, 0.3),
110-
},
111-
},
112-
confirmDialogCancelButton: (props: StyleProps) => {
113-
const color =
114-
props.type === "info"
115-
? theme.palette.primary.contrastText
116-
: theme.palette.error.contrastText
117-
return {
118-
background: alpha(color, 0.15),
119-
color,
120-
121-
"&:hover": {
122-
background: alpha(color, 0.3),
123-
},
124-
125-
"&.Mui-disabled": {
126-
background: alpha(color, 0.15),
127-
color: alpha(color, 0.5),
128-
},
129-
}
130-
},
131-
submitButton: {
132-
// Override disabled to keep background color, change loading spinner to contrast color
133-
"&.Mui-disabled": {
134-
"&.MuiButton-containedPrimary": {
135-
background: theme.palette.primary.dark,
136-
137-
"& .MuiCircularProgress-root": {
138-
color: theme.palette.primary.contrastText,
139-
},
140-
},
141-
142-
"&.CdrButton-error.MuiButton-contained": {
143-
background: darken(theme.palette.error.main, 0.3),
144-
145-
"& .MuiCircularProgress-root": {
146-
color: theme.palette.error.contrastText,
147-
},
148-
},
149-
},
150-
},
15187
errorButton: {
15288
"&.MuiButton-contained": {
153-
backgroundColor: lighten(theme.palette.error.dark, 0.15),
154-
color: theme.palette.error.contrastText,
155-
"&:hover": {
156-
backgroundColor: theme.palette.error.dark,
157-
"@media (hover: none)": {
158-
backgroundColor: "transparent",
159-
},
160-
"&.Mui-disabled": {
161-
backgroundColor: "transparent",
162-
},
163-
},
164-
"&.Mui-disabled": {
165-
backgroundColor: theme.palette.action.disabledBackground,
166-
color: alpha(theme.palette.text.disabled, 0.5),
167-
},
168-
},
169-
170-
"&.MuiButton-outlined": {
171-
color: theme.palette.error.main,
172-
borderColor: theme.palette.error.main,
173-
"&:hover": {
174-
backgroundColor: alpha(
175-
theme.palette.error.main,
176-
theme.palette.action.hoverOpacity,
177-
),
178-
"@media (hover: none)": {
179-
backgroundColor: "transparent",
180-
},
181-
"&.Mui-disabled": {
182-
backgroundColor: "transparent",
183-
},
184-
},
185-
"&.Mui-disabled": {
186-
color: alpha(theme.palette.text.disabled, 0.5),
187-
borderColor: theme.palette.action.disabled,
188-
},
189-
},
190-
191-
"&.MuiButton-text": {
192-
color: theme.palette.error.main,
89+
backgroundColor: colors.red[10],
90+
borderColor: colors.red[9],
91+
color: theme.palette.text.primary,
19392
"&:hover": {
194-
backgroundColor: alpha(
195-
theme.palette.error.main,
196-
theme.palette.action.hoverOpacity,
197-
),
198-
"@media (hover: none)": {
199-
backgroundColor: "transparent",
200-
},
93+
backgroundColor: colors.red[9],
20194
},
20295
"&.Mui-disabled": {
203-
color: alpha(theme.palette.text.disabled, 0.5),
96+
opacity: 0.5,
20497
},
20598
},
20699
},

‎site/src/components/Dialogs/ResetPasswordDialog/ResetPasswordDialog.stories.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { action } from "@storybook/addon-actions"
12
import { Story } from "@storybook/react"
23
import { MockUser } from "../../../testHelpers/renderHelpers"
34
import {
@@ -9,8 +10,8 @@ export default {
910
title: "components/Dialogs/ResetPasswordDialog",
1011
component: ResetPasswordDialog,
1112
argTypes: {
12-
onClose: { action: "onClose" },
13-
onConfirm: { action: "onConfirm" },
13+
onClose: { action: "onClose", defaultValue: action("onClose") },
14+
onConfirm: { action: "onConfirm", defaultValue: action("onConfirm") },
1415
},
1516
}
1617

0 commit comments

Comments
 (0)