wip: implement new notification settings

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}