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

Commit accbe07

Browse files
dbkrdbkr
authored
Merge pull request #12857 from matrix-org/dbkr/email_phone_css_temporary_move
Move General user settings styles to more specific places
2 parents 67f5c08 + 3c490fa commit accbe07

File tree

13 files changed

+75
-61
lines changed

13 files changed

+75
-61
lines changed

‎playwright/e2e/settings/preferences-user-settings-tab.spec.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,20 +36,20 @@ test.describe("Preferences user settings tab", () => {
3636

3737
test("should be able to change the app language", async ({ uut, user }) => {
3838
// Check language and region setting dropdown
39-
const languageInput = uut.locator(".mx_GeneralUserSettingsTab_section_languageInput");
39+
const languageInput = uut.getByRole("button", { name: "Language Dropdown" });
4040
await languageInput.scrollIntoViewIfNeeded();
4141
// Check the default value
4242
await expect(languageInput.getByText("English")).toBeVisible();
4343
// Click the button to display the dropdown menu
44-
await languageInput.getByRole("button", { name: "Language Dropdown" }).click();
44+
await languageInput.click();
4545
// Assert that the default option is rendered and highlighted
4646
languageInput.getByRole("option", { name: /Albanian/ });
4747
await expect(languageInput.getByRole("option", { name: /Albanian/ })).toHaveClass(
4848
/mx_Dropdown_option_highlight/,
4949
);
5050
await expect(languageInput.getByRole("option", { name: /Deutsch/ })).toBeVisible();
5151
// Click again to close the dropdown
52-
await languageInput.getByRole("button", { name: "Language Dropdown" }).click();
52+
await languageInput.click();
5353
// Assert that the default value is rendered again
5454
await expect(languageInput.getByText("English")).toBeVisible();
5555
});

‎res/css/_components.pcss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
@import "./components/views/messages/shared/_MediaProcessingError.pcss";
3838
@import "./components/views/pips/_WidgetPip.pcss";
3939
@import "./components/views/polls/_PollOption.pcss";
40+
@import "./components/views/settings/_EmailAddressesPhoneNumbers.pcss";
4041
@import "./components/views/settings/devices/_CurrentDeviceSection.pcss";
4142
@import "./components/views/settings/devices/_DeviceDetailHeading.pcss";
4243
@import "./components/views/settings/devices/_DeviceDetails.pcss";
@@ -356,10 +357,10 @@
356357
@import "./views/settings/tabs/room/_RolesRoomSettingsTab.pcss";
357358
@import "./views/settings/tabs/room/_SecurityRoomSettingsTab.pcss";
358359
@import "./views/settings/tabs/user/_AppearanceUserSettingsTab.pcss";
359-
@import "./views/settings/tabs/user/_GeneralUserSettingsTab.pcss";
360360
@import "./views/settings/tabs/user/_HelpUserSettingsTab.pcss";
361361
@import "./views/settings/tabs/user/_KeyboardUserSettingsTab.pcss";
362362
@import "./views/settings/tabs/user/_MjolnirUserSettingsTab.pcss";
363+
@import "./views/settings/tabs/user/_PreferencesUserSettingsTab.pcss";
363364
@import "./views/settings/tabs/user/_SecurityUserSettingsTab.pcss";
364365
@import "./views/settings/tabs/user/_SidebarUserSettingsTab.pcss";
365366
@import "./views/spaces/_SpaceBasicSettings.pcss";

‎res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss‎ renamed to ‎res/css/components/views/settings/_EmailAddressesPhoneNumbers.pcss‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/*
22
Copyright 2019 New Vector Ltd
3+
Copyright 2024 The Matrix.org Foundation C.I.C.
34
45
Licensed under the Apache License, Version 2.0 (the "License");
56
you may not use this file except in compliance with the License.
@@ -14,28 +15,23 @@ See the License for the specific language governing permissions and
1415
limitations under the License.
1516
*/
1617

17-
.mx_GeneralUserSettingsTab_section--discovery_existing {
18+
/*
19+
* These used to live in General User Settings. These components are horribly duplicative
20+
* but share the same styles. For now I'm putting them here so I can renamed the general
21+
* tab sensibly and before I can refactor these components.
22+
*/
23+
24+
.mx_EmailAddressesPhoneNumbers_discovery_existing {
1825
display: flex;
1926
align-items: center;
2027
}
2128

22-
.mx_GeneralUserSettingsTab_section--discovery_existing_address,
23-
.mx_GeneralUserSettingsTab_section--discovery_existing_promptText {
29+
.mx_EmailAddressesPhoneNumbers_discovery_existing_address,
30+
.mx_EmailAddressesPhoneNumbers_discovery_existing_promptText {
2431
flex: 1;
2532
margin-right: 10px;
2633
}
2734

28-
.mx_GeneralUserSettingsTab_section--discovery_existing_button {
35+
.mx_EmailAddressesPhoneNumbers_discovery_existing_button {
2936
margin-left: 5px;
3037
}
31-
32-
.mx_GeneralUserSettingsTab_warningIcon {
33-
vertical-align: middle;
34-
margin-right: $spacing-8;
35-
margin-bottom: 2px;
36-
}
37-
38-
.mx_GeneralUserSettingsTab_section_hint {
39-
font: var(--cpd-font-body-sm-regular);
40-
color: var(--cpd-color-text-secondary);
41-
}

‎res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/*
2+
Copyright 2019 New Vector Ltd
3+
Copyright 2024 The Matrix.org Foundation C.I.C.
4+
5+
Licensed under the Apache License, Version 2.0 (the "License");
6+
you may not use this file except in compliance with the License.
7+
You may obtain a copy of the License at
8+
9+
http://www.apache.org/licenses/LICENSE-2.0
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS,
13+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
See the License for the specific language governing permissions and
15+
limitations under the License.
16+
*/
17+
18+
.mx_PreferencesUserSettingsTab_section_hint {
19+
font: var(--cpd-font-body-sm-regular);
20+
color: var(--cpd-color-text-secondary);
21+
}

‎src/components/views/settings/account/EmailAddresses.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -97,21 +97,21 @@ export class ExistingEmailAddress extends React.Component<IExistingEmailAddressP
9797
public render(): React.ReactNode {
9898
if (this.state.verifyRemove) {
9999
return (
100-
<div className="mx_GeneralUserSettingsTab_section--discovery_existing">
101-
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_promptText">
100+
<div className="mx_EmailAddressesPhoneNumbers_discovery_existing">
101+
<span className="mx_EmailAddressesPhoneNumbers_discovery_existing_promptText">
102102
{_t("settings|general|remove_email_prompt", { email: this.props.email.address })}
103103
</span>
104104
<AccessibleButton
105105
onClick={this.onActuallyRemove}
106106
kind="danger_sm"
107-
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
107+
className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
108108
>
109109
{_t("action|remove")}
110110
</AccessibleButton>
111111
<AccessibleButton
112112
onClick={this.onDontRemove}
113113
kind="link_sm"
114-
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
114+
className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
115115
>
116116
{_t("action|cancel")}
117117
</AccessibleButton>
@@ -120,8 +120,8 @@ export class ExistingEmailAddress extends React.Component<IExistingEmailAddressP
120120
}
121121

122122
return (
123-
<div className="mx_GeneralUserSettingsTab_section--discovery_existing">
124-
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">
123+
<div className="mx_EmailAddressesPhoneNumbers_discovery_existing">
124+
<span className="mx_EmailAddressesPhoneNumbers_discovery_existing_address">
125125
{this.props.email.address}
126126
</span>
127127
<AccessibleButton onClick={this.onRemove} kind="danger_sm" disabled={this.props.disabled}>

‎src/components/views/settings/account/PhoneNumbers.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -93,21 +93,21 @@ export class ExistingPhoneNumber extends React.Component<IExistingPhoneNumberPro
9393
public render(): React.ReactNode {
9494
if (this.state.verifyRemove) {
9595
return (
96-
<div className="mx_GeneralUserSettingsTab_section--discovery_existing">
97-
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_promptText">
96+
<div className="mx_EmailAddressesPhoneNumbers_discovery_existing">
97+
<span className="mx_EmailAddressesPhoneNumbers_discovery_existing_promptText">
9898
{_t("settings|general|remove_msisdn_prompt", { phone: this.props.msisdn.address })}
9999
</span>
100100
<AccessibleButton
101101
onClick={this.onActuallyRemove}
102102
kind="danger_sm"
103-
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
103+
className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
104104
>
105105
{_t("action|remove")}
106106
</AccessibleButton>
107107
<AccessibleButton
108108
onClick={this.onDontRemove}
109109
kind="link_sm"
110-
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
110+
className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
111111
>
112112
{_t("action|cancel")}
113113
</AccessibleButton>
@@ -116,8 +116,8 @@ export class ExistingPhoneNumber extends React.Component<IExistingPhoneNumberPro
116116
}
117117

118118
return (
119-
<div className="mx_GeneralUserSettingsTab_section--discovery_existing">
120-
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">
119+
<div className="mx_EmailAddressesPhoneNumbers_discovery_existing">
120+
<span className="mx_EmailAddressesPhoneNumbers_discovery_existing_address">
121121
+{this.props.msisdn.address}
122122
</span>
123123
<AccessibleButton onClick={this.onRemove} kind="danger_sm" disabled={this.props.disabled}>

‎src/components/views/settings/discovery/EmailAddresses.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
178178
<span>
179179
{_t("settings|general|discovery_email_verification_instructions")}
180180
<AccessibleButton
181-
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
181+
className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
182182
kind="primary_sm"
183183
onClick={this.onContinueClick}
184184
disabled={this.state.continueDisabled}
@@ -190,7 +190,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
190190
} else if (bound) {
191191
status = (
192192
<AccessibleButton
193-
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
193+
className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
194194
kind="danger_sm"
195195
onClick={this.onRevokeClick}
196196
disabled={this.props.disabled}
@@ -201,7 +201,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
201201
} else {
202202
status = (
203203
<AccessibleButton
204-
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
204+
className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
205205
kind="primary_sm"
206206
onClick={this.onShareClick}
207207
disabled={this.props.disabled}
@@ -212,8 +212,8 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
212212
}
213213

214214
return (
215-
<div className="mx_GeneralUserSettingsTab_section--discovery_existing">
216-
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">{address}</span>
215+
<div className="mx_EmailAddressesPhoneNumbers_discovery_existing">
216+
<span className="mx_EmailAddressesPhoneNumbers_discovery_existing_address">{address}</span>
217217
{status}
218218
</div>
219219
);

‎src/components/views/settings/discovery/PhoneNumbers.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
179179
let status;
180180
if (verifying) {
181181
status = (
182-
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_verification">
182+
<span className="mx_EmailAddressesPhoneNumbers_discovery_existing_verification">
183183
<span>
184184
{_t("settings|general|msisdn_verification_instructions")}
185185
<br />
@@ -200,7 +200,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
200200
} else if (bound) {
201201
status = (
202202
<AccessibleButton
203-
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
203+
className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
204204
kind="danger_sm"
205205
onClick={this.onRevokeClick}
206206
disabled={this.props.disabled}
@@ -211,7 +211,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
211211
} else {
212212
status = (
213213
<AccessibleButton
214-
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
214+
className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
215215
kind="primary_sm"
216216
onClick={this.onShareClick}
217217
disabled={this.props.disabled}
@@ -222,8 +222,8 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
222222
}
223223

224224
return (
225-
<div className="mx_GeneralUserSettingsTab_section--discovery_existing">
226-
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">+{address}</span>
225+
<div className="mx_EmailAddressesPhoneNumbers_discovery_existing">
226+
<span className="mx_EmailAddressesPhoneNumbers_discovery_existing_address">+{address}</span>
227227
{status}
228228
</div>
229229
);

‎src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -70,12 +70,8 @@ const LanguageSection: React.FC = () => {
7070
return (
7171
<div className="mx_SettingsSubsection_contentStretch">
7272
{_t("settings|general|application_language")}
73-
<LanguageDropdown
74-
className="mx_GeneralUserSettingsTab_section_languageInput"
75-
onOptionChange={onLanguageChange}
76-
value={language}
77-
/>
78-
<div className="mx_GeneralUserSettingsTab_section_hint">
73+
<LanguageDropdown onOptionChange={onLanguageChange} value={language} />
74+
<div className="mx_PreferencesUserSettingsTab_section_hint">
7975
{_t("settings|general|application_language_reload_hint")}
8076
</div>
8177
</div>

‎test/components/views/settings/discovery/__snapshots__/EmailAddresses-test.tsx.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -76,15 +76,15 @@ exports[`<EmailAddresses /> should render email addresses 1`] = `
7676
class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
7777
>
7878
<div
79-
class="mx_GeneralUserSettingsTab_section--discovery_existing"
79+
class="mx_EmailAddressesPhoneNumbers_discovery_existing"
8080
>
8181
<span
82-
class="mx_GeneralUserSettingsTab_section--discovery_existing_address"
82+
class="mx_EmailAddressesPhoneNumbers_discovery_existing_address"
8383
>
8484
[email protected]
8585
</span>
8686
<div
87-
class="mx_AccessibleButton mx_GeneralUserSettingsTab_section--discovery_existing_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_sm"
87+
class="mx_AccessibleButton mx_EmailAddressesPhoneNumbers_discovery_existing_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_sm"
8888
role="button"
8989
tabindex="0"
9090
>

0 commit comments

Comments
 (0)