Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Conform the style rules of GeneralUserSettingsTab.tsx to the style guide #10595

Merged
merged 4 commits into from
May 12, 2023
+65 −59
Merged

Conform the style rules of GeneralUserSettingsTab.tsx to the style guide #10595

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
797cfd9
Nesting: `mx_GeneralUserSettingsTab_changePassword`
luixxiul Jun 22, 2022
f74df19
Nesting: `mx_Spinner`
luixxiul Jun 22, 2022
d8e4d23
Conform the style rules to the naming policy
luixxiul Apr 13, 2023
fdb939a
Conform `mx_GeneralUserSettingsTab_discovery_existing*` to the naming…
luixxiul May 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions cypress/e2e/settings/general-user-settings-tab.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,12 +83,12 @@ describe("General user settings tab", () => {
});

// Wait until spinners disappear
cy.get(".mx_GeneralUserSettingsTab_accountSection .mx_Spinner").should("not.exist");
cy.get(".mx_GeneralUserSettingsTab_discovery .mx_Spinner").should("not.exist");
cy.get(".mx_GeneralUserSettingsTab_section--account .mx_Spinner").should("not.exist");
cy.get(".mx_GeneralUserSettingsTab_section--discovery .mx_Spinner").should("not.exist");

cy.get(".mx_GeneralUserSettingsTab_accountSection").within(() => {
cy.get(".mx_GeneralUserSettingsTab_section--account").within(() => {
// Assert that input areas for changing a password exists
cy.get("form.mx_GeneralUserSettingsTab_changePassword")
cy.get("form.mx_GeneralUserSettingsTab_section--account_changePassword")
.scrollIntoView()
.within(() => {
cy.findByLabelText("Current password").should("be.visible");
Expand Down Expand Up @@ -120,7 +120,7 @@ describe("General user settings tab", () => {
});

// Check language and region setting dropdown
cy.get(".mx_GeneralUserSettingsTab_languageInput")
cy.get(".mx_GeneralUserSettingsTab_section_languageInput")
.scrollIntoView()
.within(() => {
// Check the default value
Expand Down
2 changes: 1 addition & 1 deletion res/css/views/settings/_PhoneNumbers.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_GeneralUserSettingsTab_discovery_existing_verification {
.mx_GeneralUserSettingsTab_section--discovery_existing_verification {
display: inline-flex;
align-items: center;

Expand Down
50 changes: 27 additions & 23 deletions res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,54 +14,58 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_GeneralUserSettingsTab_changePassword .mx_Field {
margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
}
.mx_GeneralUserSettingsTab_section--account_changePassword {
.mx_Field {
margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);

.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child {
margin-top: 0;
&:first-child {
margin-top: 0;
}
}
}

/* TODO: Make this selector less painful */
.mx_GeneralUserSettingsTab_accountSection .mx_SettingsTab_subheading:nth-child(n + 1),
.mx_GeneralUserSettingsTab_discovery .mx_SettingsTab_subheading:nth-child(n + 2),
.mx_GeneralUserSettingsTab_section--account .mx_SettingsTab_subheading:nth-child(n + 1),
.mx_GeneralUserSettingsTab_section--discovery .mx_SettingsTab_subheading:nth-child(n + 2),
.mx_SetIdServer .mx_SettingsTab_subheading {
margin-top: 24px;
}

.mx_GeneralUserSettingsTab_accountSection .mx_Spinner,
.mx_GeneralUserSettingsTab_discovery .mx_Spinner {
/* Move the spinner to the left side of the container (default center) */
justify-content: left;
.mx_GeneralUserSettingsTab_section--account,
.mx_GeneralUserSettingsTab_section--discovery {
.mx_Spinner {
/* Move the spinner to the left side of the container (default center) */
justify-content: flex-start;
}
}

.mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,
.mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,
.mx_GeneralUserSettingsTab_discovery .mx_GeneralUserSettingsTab_discovery_existing,
.mx_GeneralUserSettingsTab_languageInput {
.mx_GeneralUserSettingsTab_section--account .mx_EmailAddresses,
.mx_GeneralUserSettingsTab_section--account .mx_PhoneNumbers,
.mx_GeneralUserSettingsTab_section--discovery .mx_GeneralUserSettingsTab_section--discovery_existing,
.mx_GeneralUserSettingsTab_section_languageInput {
margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
}

.mx_GeneralUserSettingsTab_discovery_existing {
.mx_GeneralUserSettingsTab_section--discovery_existing {
display: flex;
align-items: center;
margin-bottom: 5px;
}

.mx_GeneralUserSettingsTab_discovery_existing_address,
.mx_GeneralUserSettingsTab_discovery_existing_promptText {
.mx_GeneralUserSettingsTab_section--discovery_existing_address,
.mx_GeneralUserSettingsTab_section--discovery_existing_promptText {
flex: 1;
margin-right: 10px;
}

.mx_GeneralUserSettingsTab_discovery_existing_button {
.mx_GeneralUserSettingsTab_section--discovery_existing_button {
margin-left: 5px;
}

.mx_GeneralUserSettingsTab_warningIcon {
vertical-align: middle;
.mx_GeneralUserSettingsTab_section--spellcheck .mx_ToggleSwitch {
float: right;
}

.mx_SettingsTab_section_spellcheck .mx_ToggleSwitch {
float: right;
.mx_GeneralUserSettingsTab_heading_warningIcon {
vertical-align: middle;
}
14 changes: 8 additions & 6 deletions src/components/views/settings/account/EmailAddresses.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,21 +94,21 @@ export class ExistingEmailAddress extends React.Component<IExistingEmailAddressP
public render(): React.ReactNode {
if (this.state.verifyRemove) {
return (
<div className="mx_GeneralUserSettingsTab_discovery_existing">
<span className="mx_GeneralUserSettingsTab_discovery_existing_promptText">
<div className="mx_GeneralUserSettingsTab_section--discovery_existing">
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_promptText">
{_t("Remove %(email)s?", { email: this.props.email.address })}
</span>
<AccessibleButton
onClick={this.onActuallyRemove}
kind="danger_sm"
className="mx_GeneralUserSettingsTab_discovery_existing_button"
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
>
{_t("Remove")}
</AccessibleButton>
<AccessibleButton
onClick={this.onDontRemove}
kind="link_sm"
className="mx_GeneralUserSettingsTab_discovery_existing_button"
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
>
{_t("Cancel")}
</AccessibleButton>
Expand All @@ -117,8 +117,10 @@ export class ExistingEmailAddress extends React.Component<IExistingEmailAddressP
}

return (
<div className="mx_GeneralUserSettingsTab_discovery_existing">
<span className="mx_GeneralUserSettingsTab_discovery_existing_address">{this.props.email.address}</span>
<div className="mx_GeneralUserSettingsTab_section--discovery_existing">
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">
{this.props.email.address}
</span>
<AccessibleButton onClick={this.onRemove} kind="danger_sm">
{_t("Remove")}
</AccessibleButton>
Expand Down
12 changes: 6 additions & 6 deletions src/components/views/settings/account/PhoneNumbers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,21 +89,21 @@ export class ExistingPhoneNumber extends React.Component<IExistingPhoneNumberPro
public render(): React.ReactNode {
if (this.state.verifyRemove) {
return (
<div className="mx_GeneralUserSettingsTab_discovery_existing">
<span className="mx_GeneralUserSettingsTab_discovery_existing_promptText">
<div className="mx_GeneralUserSettingsTab_section--discovery_existing">
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_promptText">
{_t("Remove %(phone)s?", { phone: this.props.msisdn.address })}
</span>
<AccessibleButton
onClick={this.onActuallyRemove}
kind="danger_sm"
className="mx_GeneralUserSettingsTab_discovery_existing_button"
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
>
{_t("Remove")}
</AccessibleButton>
<AccessibleButton
onClick={this.onDontRemove}
kind="link_sm"
className="mx_GeneralUserSettingsTab_discovery_existing_button"
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
>
{_t("Cancel")}
</AccessibleButton>
Expand All @@ -112,8 +112,8 @@ export class ExistingPhoneNumber extends React.Component<IExistingPhoneNumberPro
}

return (
<div className="mx_GeneralUserSettingsTab_discovery_existing">
<span className="mx_GeneralUserSettingsTab_discovery_existing_address">
<div className="mx_GeneralUserSettingsTab_section--discovery_existing">
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">
+{this.props.msisdn.address}
</span>
<AccessibleButton onClick={this.onRemove} kind="danger_sm">
Expand Down
10 changes: 5 additions & 5 deletions src/components/views/settings/discovery/EmailAddresses.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
<span>
{_t("Verify the link in your inbox")}
<AccessibleButton
className="mx_GeneralUserSettingsTab_discovery_existing_button"
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
kind="primary_sm"
onClick={this.onContinueClick}
disabled={this.state.continueDisabled}
Expand All @@ -229,7 +229,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
} else if (bound) {
status = (
<AccessibleButton
className="mx_GeneralUserSettingsTab_discovery_existing_button"
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
kind="danger_sm"
onClick={this.onRevokeClick}
>
Expand All @@ -239,7 +239,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
} else {
status = (
<AccessibleButton
className="mx_GeneralUserSettingsTab_discovery_existing_button"
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
kind="primary_sm"
onClick={this.onShareClick}
>
Expand All @@ -249,8 +249,8 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
}

return (
<div className="mx_GeneralUserSettingsTab_discovery_existing">
<span className="mx_GeneralUserSettingsTab_discovery_existing_address">{address}</span>
<div className="mx_GeneralUserSettingsTab_section--discovery_existing">
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">{address}</span>
{status}
</div>
);
Expand Down
10 changes: 5 additions & 5 deletions src/components/views/settings/discovery/PhoneNumbers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
let status;
if (verifying) {
status = (
<span className="mx_GeneralUserSettingsTab_discovery_existing_verification">
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_verification">
<span>
{_t("Please enter verification code sent via text.")}
<br />
Expand All @@ -243,7 +243,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
} else if (bound) {
status = (
<AccessibleButton
className="mx_GeneralUserSettingsTab_discovery_existing_button"
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
kind="danger_sm"
onClick={this.onRevokeClick}
>
Expand All @@ -253,7 +253,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
} else {
status = (
<AccessibleButton
className="mx_GeneralUserSettingsTab_discovery_existing_button"
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
kind="primary_sm"
onClick={this.onShareClick}
>
Expand All @@ -263,8 +263,8 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
}

return (
<div className="mx_GeneralUserSettingsTab_discovery_existing">
<span className="mx_GeneralUserSettingsTab_discovery_existing_address">+{address}</span>
<div className="mx_GeneralUserSettingsTab_section--discovery_existing">
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">+{address}</span>
{status}
</div>
);
Expand Down
16 changes: 8 additions & 8 deletions src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,7 +324,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
private renderAccountSection(): JSX.Element {
let passwordChangeForm: ReactNode = (
<ChangePassword
className="mx_GeneralUserSettingsTab_changePassword"
className="mx_GeneralUserSettingsTab_section--account_changePassword"
rowClassName=""
buttonKind="primary"
onError={this.onPasswordChangeError}
Expand Down Expand Up @@ -401,7 +401,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
);
}
return (
<div className="mx_SettingsTab_section mx_GeneralUserSettingsTab_accountSection">
<div className="mx_SettingsTab_section mx_GeneralUserSettingsTab_section--account">
<span className="mx_SettingsTab_subheading">{_t("Account")}</span>
{externalAccountManagement}
<p className="mx_SettingsTab_subsectionText">{passwordChangeText}</p>
Expand All @@ -417,7 +417,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Language and region")}</span>
<LanguageDropdown
className="mx_GeneralUserSettingsTab_languageInput"
className="mx_GeneralUserSettingsTab_section_languageInput"
onOptionChange={this.onLanguageChange}
value={this.state.language}
/>
Expand All @@ -427,7 +427,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta

private renderSpellCheckSection(): JSX.Element {
return (
<div className="mx_SettingsTab_section mx_SettingsTab_section_spellcheck">
<div className="mx_SettingsTab_section mx_GeneralUserSettingsTab_section--spellcheck">
<span className="mx_SettingsTab_subheading">
{_t("Spell check")}
<ToggleSwitch checked={!!this.state.spellCheckEnabled} onChange={this.onSpellCheckEnabledChange} />
Expand Down Expand Up @@ -471,17 +471,17 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
const msisdns = this.state.loading3pids ? <Spinner /> : <DiscoveryPhoneNumbers msisdns={this.state.msisdns} />;

const threepidSection = this.state.haveIdServer ? (
<div className="mx_GeneralUserSettingsTab_discovery">
<>
<span className="mx_SettingsTab_subheading">{_t("Email addresses")}</span>
{emails}

<span className="mx_SettingsTab_subheading">{_t("Phone numbers")}</span>
{msisdns}
</div>
</>
) : null;

return (
<div className="mx_SettingsTab_section">
<div className="mx_SettingsTab_section mx_GeneralUserSettingsTab_section--discovery">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should not change how .mx_SettingsTab_subheading and .mx_Spinner are displayed, as both of them are elements inside threepidSection, which this element consists.

{threepidSection}
{/* has its own heading as it includes the current identity server */}
<SetIdServer missingTerms={false} />
Expand Down Expand Up @@ -521,7 +521,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta

const discoWarning = this.state.requiredPolicyInfo.hasTerms ? (
<img
className="mx_GeneralUserSettingsTab_warningIcon"
className="mx_GeneralUserSettingsTab_heading_warningIcon"
src={require("../../../../../../res/img/feather-customised/warning-triangle.svg").default}
width="18"
height="18"
Expand Down