GYU: Account Notification Settings

res/css/_components.pcss

@@ -321,6 +321,8 @@
 @import "./views/settings/_JoinRuleSettings.pcss";
 @import "./views/settings/_KeyboardShortcut.pcss";
 @import "./views/settings/_LayoutSwitcher.pcss";
+@import "./views/settings/_NotificationPusherSettings.pcss";
+@import "./views/settings/_NotificationSettings2.pcss";
 @import "./views/settings/_Notifications.pcss";
 @import "./views/settings/_PhoneNumbers.pcss";
 @import "./views/settings/_ProfileSettings.pcss";
@@ -331,6 +333,8 @@
 @import "./views/settings/_SpellCheckLanguages.pcss";
 @import "./views/settings/_ThemeChoicePanel.pcss";
 @import "./views/settings/_UpdateCheckButton.pcss";
+@import "./views/settings/tabs/_SettingsBanner.pcss";
+@import "./views/settings/tabs/_SettingsIndent.pcss";
 @import "./views/settings/tabs/_SettingsSection.pcss";
 @import "./views/settings/tabs/_SettingsTab.pcss";
 @import "./views/settings/tabs/room/_NotificationSettingsTab.pcss";

res/css/views/settings/_NotificationPusherSettings.pcss

@@ -0,0 +1,26 @@
+/*
+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.
+*/
+
+.mx_NotificationPusherSettings {
+    .mx_NotificationPusherSettings_description {
+        color: $primary-content;
+    }
+
+    .mx_NotificationPusherSettings_detail {
+        margin-top: -4px;
+        margin-bottom: 12px;
+    }
+}

res/css/views/settings/_NotificationSettings2.pcss

@@ -0,0 +1,85 @@
+/*
+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.
+*/
+
+.mx_NotificationSettings2 {
+    .mx_SettingsSection_subSections {
+        color: $primary-content;
+        gap: 32px;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .mx_SettingsSubsection_description {
+        margin-bottom: 20px;
+
+        .mx_SettingsSubsection_text {
+            font-size: 1.2rem;
+
+            .mx_NotificationBadge {
+                vertical-align: baseline;
+                display: inline-flex;
+                margin: 0 2px;
+            }
+        }
+    }
+
+    .mx_SettingsSubsection_content {
+        margin-top: 12px;
+        grid-gap: 12px;
+        justify-items: stretch;
+        justify-content: stretch;
+    }
+
+    .mx_SettingsBanner {
+        margin-bottom: 32px;
+    }
+
+    .mx_NotificationSettings2_flags {
+        grid-gap: 4px;
+    }
+
+    .mx_StyledRadioButton_content {
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+
+    .mx_TagComposer {
+        margin-top: 16px;
+
+        &.mx_TagComposer_disabled {
+            opacity: 0.7;
+        }
+
+        .mx_TagComposer_tags {
+            margin-top: 16px;
+            gap: 8px;
+
+            .mx_Tag {
+                border-radius: 18px;
+                line-height: 2.4rem;
+                padding: 6px 12px;
+                background: $panel-actions;
+                margin: 0;
+
+                .mx_Tag_delete {
+                    background: $tertiary-content;
+                    color: #fff;
+                    align-self: initial;
+                }
+            }
+        }
+    }
+}

res/css/views/settings/tabs/_SettingsBanner.pcss

@@ -0,0 +1,35 @@
+/*
+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.
+*/
+
+.mx_SettingsBanner {
+    background: $system;
+    line-height: 2.25rem;
+    border-radius: 8px;
+    padding: 12px 16px;
+    gap: 12px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .mx_SettingsBanner_content {
+        margin: 0;
+    }
+
+    .mx_AccessibleButton {
+        align-self: initial;
+        white-space: nowrap;
+    }
+}

res/css/views/settings/tabs/_SettingsIndent.pcss

@@ -0,0 +1,22 @@
+/*
+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.
+*/
+
+.mx_SettingsIndent {
+    padding-left: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}

src/components/views/elements/Tag.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 The Matrix.org Foundation C.I.C.
+Copyright 2022-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.
@@ -14,21 +14,21 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { DetailedHTMLProps, HTMLAttributes } from "react";
 
 import AccessibleButton from "./AccessibleButton";
 import { Icon as CancelRounded } from "../../../../res/img/element-icons/cancel-rounded.svg";
 
-interface IProps {
+interface IProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     icon?: () => JSX.Element;
     label: string;
     onDeleteClick?: () => void;
     disabled?: boolean;
 }
 
-export const Tag: React.FC<IProps> = ({ icon, label, onDeleteClick, disabled = false }) => {
+export const Tag: React.FC<IProps> = ({ icon, label, onDeleteClick, disabled = false, ...other }) => {
     return (
-        <div className="mx_Tag">
+        <div className="mx_Tag" {...other}>
             {icon?.()}
             {label}
             {onDeleteClick && (

src/components/views/elements/TagComposer.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2021 The Matrix.org Foundation C.I.C.
+Copyright 2021-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.
@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import classNames from "classnames";
 import React, { ChangeEvent, FormEvent } from "react";
 
 import Field from "./Field";
@@ -22,6 +23,7 @@ import AccessibleButton from "./AccessibleButton";
 import { Tag } from "./Tag";
 
 interface IProps {
+    id?: string;
     tags: string[];
     onAdd: (tag: string) => void;
     onRemove: (tag: string) => void;
@@ -67,9 +69,14 @@ export default class TagComposer extends React.PureComponent<IProps, IState> {
 
     public render(): React.ReactNode {
         return (
-            <div className="mx_TagComposer">
+            <div
+                className={classNames("mx_TagComposer", {
+                    mx_TagComposer_disabled: this.props.disabled,
+                })}
+            >
                 <form className="mx_TagComposer_input" onSubmit={this.onAdd}>
                     <Field
+                        id={this.props.id ? this.props.id + "_field" : undefined}
                         value={this.state.newTag}
                         onChange={this.onInputChange}
                         label={this.props.label || _t("Keyword")}
@@ -81,13 +88,14 @@ export default class TagComposer extends React.PureComponent<IProps, IState> {
                         {_t("Add")}
                     </AccessibleButton>
                 </form>
-                <div className="mx_TagComposer_tags">
+                <div className="mx_TagComposer_tags" role="list">
                     {this.props.tags.map((t, i) => (
                         <Tag
                             label={t}
                             key={t}
                             onDeleteClick={this.onRemove.bind(this, t)}
                             disabled={this.props.disabled}
+                            role="listitem"
                         />
                     ))}
                 </div>