imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix up remove threepid confirmation UX

Browse source 
Probably still not the best design but hopefully break fewer UX rules:

1. Use red to confirm delete rather than cancel and green to cancel
2. Show the action you're about to perform in the confirmation
3. Label confirmation button with the action rather than yes/no.
This commit is contained in:
David Baker 2019-08-19 15:37:12 +01:00
parent f9e223aec7
commit 93af6cfd8d
3 changed files with 15 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/views/settings/account/EmailAddresses.js
View file

@ -87,15 +87,15 @@ export class ExistingEmailAddress extends React.Component {
return (
<div className="mx_ExistingEmailAddress">
<span className="mx_ExistingEmailAddress_promptText">
{_t("Are you sure?")}
{_t("Remove %(email)s?", {email: this.props.email.address} )}
</span>
<AccessibleButton onClick={this._onActuallyRemove} kind="primary_sm"
<AccessibleButton onClick={this._onActuallyRemove} kind="danger_sm"
className="mx_ExistingEmailAddress_confirmBtn">
{_t("Yes")}
{_t("Remove")}
</AccessibleButton>
<AccessibleButton onClick={this._onDontRemove} kind="danger_sm"
<AccessibleButton onClick={this._onDontRemove} kind="link_sm"
className="mx_ExistingEmailAddress_confirmBtn">
{_t("No")}
{_t("Cancel")}
</AccessibleButton>
</div>
);

10
src/components/views/settings/account/PhoneNumbers.js
View file

@ -82,15 +82,15 @@ export class ExistingPhoneNumber extends React.Component {
return (
<div className="mx_ExistingPhoneNumber">
<span className="mx_ExistingPhoneNumber_promptText">
{_t("Are you sure?")}
{_t("Remove %(phone)s?", {phone: this.props.msisdn.address})}
</span>
<AccessibleButton onClick={this._onActuallyRemove} kind="primary_sm"
<AccessibleButton onClick={this._onActuallyRemove} kind="danger_sm"
className="mx_ExistingPhoneNumber_confirmBtn">
{_t("Yes")}
{_t("Remove")}
</AccessibleButton>
<AccessibleButton onClick={this._onDontRemove} kind="danger_sm"
<AccessibleButton onClick={this._onDontRemove} kind="link_sm"
className="mx_ExistingPhoneNumber_confirmBtn">
{_t("No")}
{_t("Cancel")}
</AccessibleButton>
</div>
);