wip: implement new notification settings

Author: justjanne

res/css/_components.pcss

@@ -323,6 +323,7 @@
 @import "./views/settings/_KeyboardShortcut.pcss";
 @import "./views/settings/_LayoutSwitcher.pcss";
 @import "./views/settings/_Notifications.pcss";
+@import "./views/settings/_Notifications2.pcss";
 @import "./views/settings/_PhoneNumbers.pcss";
 @import "./views/settings/_ProfileSettings.pcss";
 @import "./views/settings/_SecureBackupPanel.pcss";
@@ -332,6 +333,7 @@
 @import "./views/settings/_SpellCheckLanguages.pcss";
 @import "./views/settings/_ThemeChoicePanel.pcss";
 @import "./views/settings/_UpdateCheckButton.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/_Notifications2.pcss

@@ -0,0 +1,92 @@
+.mx_Notifications2 {
+    .mx_SettingsSection_subSections {
+        color: #17191c;
+        gap: 32px;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .mx_Notifications2_banner {
+        background: #F4F8FF;
+        line-height: 2.25rem;
+        border-radius: 8px;
+        padding: 12px 16px;
+        gap: 12px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        p {
+            margin: 0;
+        }
+
+        .mx_AccessibleButton {
+            align-self: initial;
+            white-space: nowrap;
+        }
+    }
+
+    .mx_Notifications2_list {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+
+        .mx_SettingsFlag {
+            margin: 0;
+        }
+    }
+
+    .mx_SettingsSubsection_description .mx_SettingsSubsection_text {
+        font-size: 1.2rem;
+
+        .mx_NotificationBadge {
+            vertical-align: bottom;
+            display: inline-flex;
+            margin: 0 2px;
+        }
+    }
+
+    .mx_SettingsSubsection_content {
+        margin-top: 12px;
+        grid-gap: 12px;
+        justify-items: stretch;
+        justify-content: stretch;
+    }
+
+    .mx_StyledRadioButton_content {
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+
+    .mx_Notifications2_CombinedInput {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .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: rgba(141, 151, 165, 0.15);
+                margin: 0;
+
+                .mx_Tag_delete {
+                    background: #8D97A5;
+                    color: #fff;
+                    align-self: initial;
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,21 @@
+/*
+Copyright 2023 New Vector Ltd
+
+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/TagComposer.tsx

@@ -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";
@@ -67,7 +68,11 @@ 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
                         value={this.state.newTag}