Page MenuHomePhabricator
Files F3393411

D4119.diff
No OneTemporary
Actions

D4119.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,65 +1,33 @@
-div.modal-body {
- padding: 6px 6px;
- width: 100%;
- box-sizing: border-box;
- background-color: var(--modal-bg);
- border-bottom-left-radius: 15px;
- border-bottom-right-radius: 15px;
- flex: 1;
- display: flex;
- flex-direction: column;
+.modal_body {
+ padding: 24px 32px;
+ color: var(--fg);
}
-div.modal-body p {
- padding: 1px 3px 4px 3px;
- font-size: 14px;
- text-align: center;
+.modal_body p {
+ font-size: var(--s-font-14);
}
-div.modal-body p.confirm-account-password {
- margin-bottom: 4px;
- color: var(--fg);
+
+.deletion_warning {
+ font-weight: var(--bold);
+ margin-bottom: 16px;
+}
+.confirm_password {
+ margin-bottom: 10px;
}
-div.modal-body div.form-footer {
+
+.form_title {
+ font-weight: var(--bold);
+ margin-bottom: 8px;
+}
+.form_footer {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
- padding-top: 8px;
+ padding-top: 24px;
}
-div.modal-body div.form-footer div.modal-form-error {
- font-size: 12px;
- color: red;
+.form_error {
+ font-size: var(--xs-font-12);
+ color: var(--error);
font-style: italic;
padding-left: 6px;
align-self: center;
}
-div.modal-body div.form-title {
- display: inline-block;
- text-align: right;
- padding-right: 5px;
- padding-top: 5px;
- font-size: 14px;
- font-weight: 600;
- vertical-align: top;
- width: 110px;
- color: var(--fg);
-}
-div.large-modal-container div.modal-body div.form-title {
- width: 140px;
-}
-div.modal-body div.form-content {
- display: inline-block;
- font-family: var(--font-stack);
- color: var(--fg);
-}
-div.modal-body div.form-content input {
- margin-bottom: 4px;
-}
-
-.italic {
- font-style: italic;
- color: var(--fg);
-}
-
-div.user-settings-current-password {
- padding-top: 4px;
- margin-top: 5px;
-}
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
@@ -22,6 +22,7 @@
import { useModalContext } from '../modals/modal-provider.react';
import Modal from '../modals/modal.react';
import { useSelector } from '../redux/redux-utils';
+import SWMansionIcon from '../SWMansionIcon.react.js';
import css from './account-delete-modal.css';
type Props = {
@@ -57,54 +58,44 @@
render() {
const { inputDisabled } = this.props;
- const mainContent = (
- <p className={css['italic']}>
- Your account will be permanently deleted. There is no way to reverse
- this.
- </p>
- );
-
- const buttons = (
- <Button
- variant="danger"
- type="submit"
- onClick={this.onDelete}
- disabled={inputDisabled}
- >
- Delete account
- </Button>
- );
let errorMsg;
if (this.state.errorMessage) {
errorMsg = (
- <div className={css['modal-form-error']}>{this.state.errorMessage}</div>
+ <div className={css.form_error}>{this.state.errorMessage}</div>
);
}
return (
<Modal name="Delete Account" onClose={this.props.popModal} size="large">
- <div className={css['modal-body']}>
+ <div className={css.modal_body}>
<form method="POST">
- {mainContent}
- <div className={css['user-settings-current-password']}>
- <p className={css['confirm-account-password']}>
- Please enter your current password to confirm your identity
- </p>
- <div className={css['form-title']}>Current password</div>
- <div className={css['form-content']}>
- <Input
- type="password"
- placeholder="Current password"
- value={this.state.currentPassword}
- onChange={this.onChangeCurrentPassword}
- disabled={inputDisabled}
- ref={this.currentPasswordInputRef}
- />
- </div>
- </div>
- <div className={css['form-footer']}>
- {buttons}
+ <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>
+ <p className={css.confirm_password}>
+ Please enter your account password to confirm your identity.
+ </p>
+ <p className={css.form_title}>Account password</p>
+ <Input
+ type="password"
+ placeholder="Password"
+ value={this.state.currentPassword}
+ onChange={this.onChangeCurrentPassword}
+ disabled={inputDisabled}
+ ref={this.currentPasswordInputRef}
+ />
+ <div className={css.form_footer}>
+ <Button
+ variant="danger"
+ type="submit"
+ onClick={this.onDelete}
+ disabled={inputDisabled}
+ >
+ Delete Account
+ </Button>
{errorMsg}
</div>
</form>

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 1, 1:45 PM (20 h, 47 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2605149
Default Alt Text
D4119.diff (5 KB)

Event Timeline