Page MenuHomePhabricator
Files F3725141

D3476.diff
No OneTemporary
Actions

D3476.diff
View Options

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 @@
>
<div className={css['modal-body']}>
<form method="POST">
- <div>
- <div className={css['form-text']}>
- <div className={css['form-title']}>Username</div>
- <div className={css['form-content']}>{this.username}</div>
- </div>
- <div>
- <div className={css['form-title']}>New password</div>
- <div className={css['form-content']}>
- <div>
- <Input
- type="password"
- placeholder="New password"
- value={this.state.newPassword}
- onChange={this.onChangeNewPassword}
- ref={this.newPasswordInputRef}
- disabled={inputDisabled}
- />
- </div>
- <div>
- <Input
- type="password"
- placeholder="Confirm new password"
- value={this.state.confirmNewPassword}
- onChange={this.onChangeConfirmNewPassword}
- disabled={inputDisabled}
- />
- </div>
- </div>
- </div>
- <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']}>
- <Button
- type="submit"
- variant="primary"
- onClick={this.onSubmit}
- disabled={inputDisabled}
- >
- Change Password
- </Button>
- {errorMsg}
- </div>
+ <div className={css['form-content']}>
+ <p className={css['username-container']}>
+ <span className={css['username-label']}>{'Logged in as '}</span>
+ <span className={css['username']}>{this.username}</span>
+ </p>
+ <Input
+ type="password"
+ placeholder="New password"
+ value={this.state.newPassword}
+ onChange={this.onChangeNewPassword}
+ ref={this.newPasswordInputRef}
+ disabled={inputDisabled}
+ label="New password"
+ />
+ <Input
+ type="password"
+ placeholder="Confirm new password"
+ value={this.state.confirmNewPassword}
+ onChange={this.onChangeConfirmNewPassword}
+ disabled={inputDisabled}
+ />
+ </div>
+ <div className={css['form-content']}>
+ <Input
+ type="password"
+ placeholder="Current password"
+ value={this.state.currentPassword}
+ onChange={this.onChangeCurrentPassword}
+ disabled={inputDisabled}
+ ref={this.currentPasswordInputRef}
+ label="Current password"
+ />
+ </div>
+ <div className={css['form-footer']}>
+ <Button
+ type="submit"
+ variant="primary"
+ onClick={this.onSubmit}
+ disabled={inputDisabled}
+ >
+ Change Password
+ </Button>
+ {errorMsg}
</div>
</form>
</div>

File Metadata

Mime Type
text/plain
Expires
Thu, Jan 9, 6:22 PM (7 h, 39 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2833727
Default Alt Text
D3476.diff (6 KB)

Event Timeline