Page MenuHomePhabricator
Files F3507902

D10317.id34541.diff
No OneTemporary
Actions

D10317.id34541.diff
View Options

diff --git a/web/settings/account-delete-modal.css b/web/settings/account-delete-modal.css
--- a/web/settings/account-delete-modal.css
+++ b/web/settings/account-delete-modal.css
@@ -1,5 +1,4 @@
.modal_body {
- padding: 24px 32px;
color: var(--fg);
}
.modal_body p {
@@ -8,19 +7,18 @@
.deletion_warning {
font-weight: var(--bold);
- margin-bottom: 16px;
}
-.form_footer {
- display: flex;
- flex-direction: row-reverse;
- justify-content: space-between;
- padding-top: 24px;
-}
.form_error {
font-size: var(--xs-font-12);
color: var(--error);
font-style: italic;
- padding-left: 6px;
- align-self: center;
+ height: 24px;
+ display: flex;
+ justify-content: center;
+ align-items: flex-end;
+}
+
+.errorPlaceholder {
+ height: 24px;
}
diff --git a/web/settings/account-delete-modal.react.js b/web/settings/account-delete-modal.react.js
--- a/web/settings/account-delete-modal.react.js
+++ b/web/settings/account-delete-modal.react.js
@@ -34,10 +34,13 @@
const [errorMessage, setErrorMessage] = React.useState('');
- let errorMsg;
- if (errorMessage) {
- errorMsg = <div className={css.form_error}>{errorMessage}</div>;
- }
+ const errorMsg = React.useMemo(() => {
+ if (!errorMessage) {
+ return <div className={css.errorPlaceholder} />;
+ }
+
+ return <div className={css.form_error}>{errorMessage}</div>;
+ }, [errorMessage]);
const deleteAction = React.useCallback(async () => {
try {
@@ -58,12 +61,33 @@
deleteKeyserverAccountActionTypes,
deleteAction(),
);
+ setErrorMessage('unknown error');
},
- [dispatchActionPromise, deleteAction],
+ [deleteAction, dispatchActionPromise],
+ );
+
+ const primaryButton = React.useMemo(
+ () => (
+ <Button
+ variant="filled"
+ buttonColor={buttonThemes.danger}
+ type="submit"
+ onClick={onDelete}
+ disabled={inputDisabled}
+ >
+ Delete Account
+ </Button>
+ ),
+ [inputDisabled, onDelete],
);
return (
- <Modal name="Delete Account" onClose={popModal} size="large">
+ <Modal
+ name="Delete Account"
+ onClose={popModal}
+ size="large"
+ primaryButton={primaryButton}
+ >
<div className={css.modal_body}>
<form method="POST">
<SWMansionIcon icon="warning-circle" size={22} />
@@ -71,18 +95,7 @@
Your account will be permanently deleted. There is no way to
reverse this.
</p>
- <div className={css.form_footer}>
- <Button
- variant="filled"
- buttonColor={buttonThemes.danger}
- type="submit"
- onClick={onDelete}
- disabled={inputDisabled}
- >
- Delete Account
- </Button>
- {errorMsg}
- </div>
+ {errorMsg}
</form>
</div>
</Modal>

File Metadata

Mime Type
text/plain
Expires
Sat, Dec 21, 9:41 PM (21 h, 40 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2689297
Default Alt Text
D10317.id34541.diff (2 KB)

Event Timeline