diff --git a/res/css/views/settings/tabs/_SettingsSection.pcss b/res/css/views/settings/tabs/_SettingsSection.pcss index b0388a1d7a9..5f4fd6f0241 100644 --- a/res/css/views/settings/tabs/_SettingsSection.pcss +++ b/res/css/views/settings/tabs/_SettingsSection.pcss @@ -17,7 +17,6 @@ limitations under the License. .mx_SettingsSection { --SettingsTab_section-margin-bottom-preferences-labs: 30px; --SettingsTab_heading_nth_child-margin-top: 30px; /* TODO: Use a spacing variable */ - --SettingsTab_fullWidthField-margin-inline-end: 100px; --SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */ color: $primary-content; diff --git a/res/css/views/settings/tabs/_SettingsTab.pcss b/res/css/views/settings/tabs/_SettingsTab.pcss index 6ab44ec5b24..1de3e947f73 100644 --- a/res/css/views/settings/tabs/_SettingsTab.pcss +++ b/res/css/views/settings/tabs/_SettingsTab.pcss @@ -16,7 +16,6 @@ limitations under the License. .mx_SettingsTab { --SettingsTab_heading_nth_child-margin-top: 30px; /* TODO: Use a spacing variable */ - --SettingsTab_fullWidthField-margin-inline-end: 100px; --SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */ color: $primary-content; diff --git a/res/css/views/settings/tabs/user/_MjolnirUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_MjolnirUserSettingsTab.pcss index 26d0b00080e..160abc9e3e8 100644 --- a/res/css/views/settings/tabs/user/_MjolnirUserSettingsTab.pcss +++ b/res/css/views/settings/tabs/user/_MjolnirUserSettingsTab.pcss @@ -14,10 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_MjolnirUserSettingsTab .mx_Field { - margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end); -} - .mx_MjolnirUserSettingsTab_listItem { margin-bottom: 2px; } diff --git a/src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx b/src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx index 6f9f5382370..150db726a77 100644 --- a/src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx @@ -28,6 +28,9 @@ import ErrorDialog from "../../../dialogs/ErrorDialog"; import QuestionDialog from "../../../dialogs/QuestionDialog"; import AccessibleButton from "../../../elements/AccessibleButton"; import Field from "../../../elements/Field"; +import SettingsTab from "../SettingsTab"; +import { SettingsSection } from "../../shared/SettingsSection"; +import SettingsSubsection, { SettingsSubsectionText } from "../../shared/SettingsSubsection"; interface IState { busy: boolean; @@ -250,33 +253,30 @@ export default class MjolnirUserSettingsTab extends React.Component<{}, IState> const brand = SdkConfig.get().brand; return ( -
-
{_t("Ignored users")}
-
-
+ + + {_t("⚠ These settings are meant for advanced users.")} -
-
- {_t( - "Add users and servers you want to ignore here. Use asterisks " + - "to have %(brand)s match any characters. For example, @bot:* " + - "would ignore all users that have the name 'bot' on any server.", - { brand }, - { code: (s) => {s} }, - )} -
-
- {_t( - "Ignoring people is done through ban lists which contain rules for " + - "who to ban. Subscribing to a ban list means the users/servers blocked by " + - "that list will be hidden from you.", - )} -
-
-
- {_t("Personal ban list")} -
- {_t( +

+ {_t( + "Add users and servers you want to ignore here. Use asterisks " + + "to have %(brand)s match any characters. For example, @bot:* " + + "would ignore all users that have the name 'bot' on any server.", + { brand }, + { code: (s) => {s} }, + )} +

+

+ {_t( + "Ignoring people is done through ban lists which contain rules for " + + "who to ban. Subscribing to a ban list means the users/servers blocked by " + + "that list will be hidden from you.", + )} +

+ + myBanList: _t("My Ban List"), }, )} -
-
{this.renderPersonalBanListRules()}
-
+ > + {this.renderPersonalBanListRules()}
{_t("Ignore")} -
-
-
- {_t("Subscribed lists")} -
- {_t("Subscribing to a ban list will cause you to join it!")} -   - {_t("If this isn't what you want, please use a different tool to ignore users.")} -
-
{this.renderSubscribedBanLists()}
-
+ + + + {_t("Subscribing to a ban list will cause you to join it!")} + +   + + {_t("If this isn't what you want, please use a different tool to ignore users.")} + + + } + > + {this.renderSubscribedBanLists()}
{_t("Subscribe")} -
-
-
+ + + ); } } diff --git a/test/components/views/settings/tabs/user/MjolnirUserSettingsTab-test.tsx b/test/components/views/settings/tabs/user/MjolnirUserSettingsTab-test.tsx new file mode 100644 index 00000000000..5d11735c2a6 --- /dev/null +++ b/test/components/views/settings/tabs/user/MjolnirUserSettingsTab-test.tsx @@ -0,0 +1,45 @@ +/* +Copyright 2023 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from "react"; +import { render } from "@testing-library/react"; + +import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../../../test-utils"; +import MjolnirUserSettingsTab from "../../../../../../src/components/views/settings/tabs/user/MjolnirUserSettingsTab"; +import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext"; +import SettingsStore from "../../../../../../src/settings/SettingsStore"; + +describe("", () => { + const userId = "@alice:server.org"; + const mockClient = getMockClientWithEventEmitter({ + ...mockClientMethodsUser(userId), + getRoom: jest.fn(), + }); + + const getComponent = () => + render(, { + wrapper: ({ children }) => ( + {children} + ), + }); + + it("renders correctly when user has no ignored users", () => { + jest.spyOn(SettingsStore, "getValue").mockReturnValue(null); + const { container } = getComponent(); + + expect(container).toMatchSnapshot(); + }); +}); diff --git a/test/components/views/settings/tabs/user/__snapshots__/MjolnirUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/MjolnirUserSettingsTab-test.tsx.snap new file mode 100644 index 00000000000..8069b71f52f --- /dev/null +++ b/test/components/views/settings/tabs/user/__snapshots__/MjolnirUserSettingsTab-test.tsx.snap @@ -0,0 +1,170 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders correctly when user has no ignored users 1`] = ` +
+
+
+
+

+ Ignored users +

+
+
+ + ⚠ These settings are meant for advanced users. + +

+ + Add users and servers you want to ignore here. Use asterisks to have Element match any characters. For example, + + @bot:* + + would ignore all users that have the name 'bot' on any server. + +

+

+ Ignoring people is done through ban lists which contain rules for who to ban. Subscribing to a ban list means the users/servers blocked by that list will be hidden from you. +

+
+
+
+

+ Personal ban list +

+
+
+
+ Your personal ban list holds all the users/servers you personally don't want to see messages from. After ignoring your first user/server, a new room will show up in your room list named 'My Ban List' - stay in this room to keep the ban list in effect. +
+
+
+ + You have not ignored anyone. + +
+
+ + +
+
+ Ignore +
+
+
+
+
+
+

+ Subscribed lists +

+
+
+
+ + Subscribing to a ban list will cause you to join it! + +   + + If this isn't what you want, please use a different tool to ignore users. + +
+
+
+ + You are not subscribed to any lists + +
+
+ + +
+
+ Subscribe +
+
+
+
+
+
+
+
+
+`;