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,92 +1,41 @@ -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); -} -div.modal-body div.form-content input { - margin-bottom: 4px; -} - -div.form-text { +.form-content { display: flex; - align-items: baseline; + flex-direction: column; } -div.form-text > div.form-title { - vertical-align: initial; - flex-shrink: 0; +.form-content input { + margin-bottom: 16px; } -div.form-text > div.form-content { - margin-left: 3px; - margin-bottom: 3px; - word-break: break-word; +.form-content input[type='password'] { + width: auto; } -div.form-text > div.form-float-title { - float: left; - text-align: right; - padding-right: 5px; - font-size: 14px; - font-weight: 600; - width: 110px; -} -div.form-text > div.form-float-content { +.username-container { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - font-size: 14px; - padding: 1px 20px 3px 4px; - margin-top: 5px; + color: var(--fg); + margin-bottom: 16px; } - -div.user-settings-current-password { - padding-top: 4px; - margin-top: 5px; +.username-label { + color: var(--account-settings-label); +} +.username { + color: var(--fg); } 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 @@ -81,62 +81,49 @@ >