Merge pull request #3283 from matrix-org/jryans/user-settings-toggle-3pid

Update existing 3PID management UX
This commit is contained in:
J. Ryan Stinnett 2019-08-05 18:56:15 +01:00 committed by GitHub
commit ba3e9e3f84
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 14 deletions

View file

@ -15,6 +15,8 @@ limitations under the License.
*/ */
.mx_ExistingEmailAddress { .mx_ExistingEmailAddress {
display: flex;
align-items: center;
margin-bottom: 5px; margin-bottom: 5px;
} }
@ -24,14 +26,12 @@ limitations under the License.
vertical-align: middle; vertical-align: middle;
} }
.mx_ExistingEmailAddress_email { .mx_ExistingEmailAddress_email,
vertical-align: middle;
}
.mx_ExistingEmailAddress_promptText { .mx_ExistingEmailAddress_promptText {
flex: 1;
margin-right: 10px; margin-right: 10px;
} }
.mx_ExistingEmailAddress_confirmBtn { .mx_ExistingEmailAddress_confirmBtn {
margin-right: 5px; margin-left: 5px;
} }

View file

@ -15,6 +15,8 @@ limitations under the License.
*/ */
.mx_ExistingPhoneNumber { .mx_ExistingPhoneNumber {
display: flex;
align-items: center;
margin-bottom: 5px; margin-bottom: 5px;
} }
@ -24,16 +26,14 @@ limitations under the License.
vertical-align: middle; vertical-align: middle;
} }
.mx_ExistingPhoneNumber_address { .mx_ExistingPhoneNumber_address,
vertical-align: middle;
}
.mx_ExistingPhoneNumber_promptText { .mx_ExistingPhoneNumber_promptText {
flex: 1;
margin-right: 10px; margin-right: 10px;
} }
.mx_ExistingPhoneNumber_confirmBtn { .mx_ExistingPhoneNumber_confirmBtn {
margin-right: 5px; margin-left: 5px;
} }
.mx_PhoneNumbers_input { .mx_PhoneNumbers_input {

View file

@ -102,9 +102,10 @@ export class ExistingEmailAddress extends React.Component {
return ( return (
<div className="mx_ExistingEmailAddress"> <div className="mx_ExistingEmailAddress">
<img src={require("../../../../res/img/feather-customised/cancel.svg")} width={14} height={14}
onClick={this._onRemove} className="mx_ExistingEmailAddress_delete" alt={_t("Remove")} />
<span className="mx_ExistingEmailAddress_email">{this.props.email.address}</span> <span className="mx_ExistingEmailAddress_email">{this.props.email.address}</span>
<AccessibleButton onClick={this._onRemove} kind="danger_sm">
{_t("Remove")}
</AccessibleButton>
</div> </div>
); );
} }

View file

@ -97,9 +97,10 @@ export class ExistingPhoneNumber extends React.Component {
return ( return (
<div className="mx_ExistingPhoneNumber"> <div className="mx_ExistingPhoneNumber">
<img src={require("../../../../res/img/feather-customised/cancel.svg")} width={14} height={14}
onClick={this._onRemove} className="mx_ExistingPhoneNumber_delete" alt={_t("Remove")} />
<span className="mx_ExistingPhoneNumber_address">+{this.props.msisdn.address}</span> <span className="mx_ExistingPhoneNumber_address">+{this.props.msisdn.address}</span>
<AccessibleButton onClick={this._onRemove} kind="danger_sm">
{_t("Remove")}
</AccessibleButton>
</div> </div>
); );
} }