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,23 @@ -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; -} -div.modal-body p { - padding: 1px 3px 4px 3px; - font-size: 14px; - text-align: center; -} -div.modal-body p.confirm-account-password { - margin-bottom: 4px; +.modal-body { + padding: 24px 32px; color: var(--fg); } -div.modal-body div.form-footer { +.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; +.modal-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 { +.warning { + margin-bottom: 8px; font-style: italic; - color: var(--fg); -} - -div.user-settings-current-password { - padding-top: 4px; - margin-top: 5px; + font-size: var(--s-font-14); + text-align: center; } 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 @@ -57,23 +57,6 @@ render() { const { inputDisabled } = this.props; - const mainContent = ( -

- Your account will be permanently deleted. There is no way to reverse - this. -

- ); - - const buttons = ( - - ); let errorMsg; if (this.state.errorMessage) { @@ -86,25 +69,28 @@
- {mainContent} -
-

- Please enter your current password to confirm your identity -

-
Current password
-
- -
-
+

+ Your account will be permanently deleted. +
There is no way to reverse this. +

+
- {buttons} + {errorMsg}