Page MenuHomePhabricator

D10317.id37161.diff
No OneTemporary

D10317.id37161.diff

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,23 @@
.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;
+}
+
+.infoContainer {
+ display: flex;
+ column-gap: 8px;
}
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
@@ -60,30 +60,41 @@
deleteAccountAction(),
);
},
- [dispatchActionPromise, deleteAccountAction],
+ [deleteAccountAction, 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} />
- <p className={css.deletion_warning}>
- 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>
- {error}
+ <div className={css.infoContainer}>
+ <SWMansionIcon icon="warning-circle" size={22} />
+ <p className={css.deletion_warning}>
+ Your account will be permanently deleted. There is no way to
+ reverse this.
+ </p>
</div>
+ {error}
</form>
</div>
</Modal>

File Metadata

Mime Type
text/plain
Expires
Fri, Dec 20, 7:13 PM (13 m, 6 s)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2682565
Default Alt Text
D10317.id37161.diff (2 KB)

Event Timeline