diff --git a/web/settings/password-change-modal.css b/web/settings/password-change-modal.css --- a/web/settings/password-change-modal.css +++ b/web/settings/password-change-modal.css @@ -1,61 +1,27 @@ -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 { - color: #777777; - margin-bottom: 4px; +.modal-body { + padding: 24px 40px 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; } -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); +.form-content { + display: flex; + flex-direction: column; } -div.modal-body div.form-content input { - margin-bottom: 4px; +.form-content input { + margin-bottom: 16px; } - -div.user-settings-current-password { - padding-top: 4px; - margin-top: 5px; +.form-content input[type='password'] { + width: auto; } diff --git a/web/settings/password-change-modal.js b/web/settings/password-change-modal.js --- a/web/settings/password-change-modal.js +++ b/web/settings/password-change-modal.js @@ -71,45 +71,35 @@ >