Notification settings UI refresh

res/css/_components.scss

@@ -149,6 +149,7 @@
 @import "./views/elements/_StyledCheckbox.scss";
 @import "./views/elements/_StyledRadioButton.scss";
 @import "./views/elements/_SyntaxHighlight.scss";
+@import "./views/elements/_TagComposer.scss";
 @import "./views/elements/_TextWithTooltip.scss";
 @import "./views/elements/_ToggleSwitch.scss";
 @import "./views/elements/_Tooltip.scss";
@@ -263,9 +264,9 @@
 @import "./views/toasts/_NonUrgentEchoFailureToast.scss";
 @import "./views/verification/_VerificationShowSas.scss";
 @import "./views/voip/_CallContainer.scss";
+@import "./views/voip/_CallPreview.scss";
 @import "./views/voip/_CallView.scss";
 @import "./views/voip/_CallViewForRoom.scss";
-@import "./views/voip/_CallPreview.scss";
 @import "./views/voip/_DialPad.scss";
 @import "./views/voip/_DialPadContextMenu.scss";
 @import "./views/voip/_DialPadModal.scss";

res/css/views/elements/_TagComposer.scss

@@ -0,0 +1,77 @@
+/*
+Copyright 2021 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_TagComposer {
+    .mx_TagComposer_input {
+        display: flex;
+
+        .mx_Field {
+            flex: 1;
+            margin: 0; // override from field styles
+        }
+
+        .mx_AccessibleButton {
+            min-width: 70px;
+            padding: 0; // override from button styles
+            margin-left: 16px; // distance from <Field>
+        }
+
+        .mx_Field, .mx_Field input, .mx_AccessibleButton {
+            // So they look related to each other by feeling the same
+            border-radius: 8px;
+        }
+    }
+
+    .mx_TagComposer_tags {
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 12px; // this plus 12px from the tags makes 24px from the input
+
+        .mx_TagComposer_tag {
+            padding: 6px 8px 8px 12px;
+            position: relative;
+            margin-right: 12px;
+            margin-top: 12px;
+
+            // Cheaty way to get an opacified variable colour background
+            &::before {
+                content: '';
+                border-radius: 20px;
+                background-color: $tertiary-fg-color;
+                opacity: 0.15;
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+
+                // Pass through the pointer otherwise we have effectively put a whole div
+                // on top of the component, which makes it hard to interact with buttons.
+                pointer-events: none;
+            }
+        }
+
+        .mx_AccessibleButton {
+            background-image: url('$(res)/img/subtract.svg');
+            width: 16px;
+            height: 16px;
+            margin-left: 8px;
+            display: inline-block;
+            vertical-align: middle;
+            cursor: pointer;
+        }
+    }
+}

res/css/views/settings/_Notifications.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 - 2021 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,82 +14,79 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_UserNotifSettings_tableRow {
-    display: table-row;
-}
-
-.mx_UserNotifSettings_inputCell {
-    display: table-cell;
-    padding-bottom: 8px;
-    padding-right: 8px;
-    width: 16px;
-}
-
-.mx_UserNotifSettings_labelCell {
-    padding-bottom: 8px;
-    width: 400px;
-    display: table-cell;
-}
-
-.mx_UserNotifSettings_pushRulesTableWrapper {
-    padding-bottom: 8px;
-}
-
-.mx_UserNotifSettings_pushRulesTable {
-    width: 100%;
-    table-layout: fixed;
-}
-
-.mx_UserNotifSettings_pushRulesTable thead {
-    font-weight: bold;
-}
-
-.mx_UserNotifSettings_pushRulesTable tbody th {
-    font-weight: 400;
-}
-
-.mx_UserNotifSettings_pushRulesTable tbody th:first-child {
-    text-align: left;
-}
-
-.mx_UserNotifSettings_keywords {
-    cursor: pointer;
-    color: $accent-color;
-}
-
-.mx_UserNotifSettings_devicesTable td {
-    padding-left: 20px;
-    padding-right: 20px;
-}
-
-.mx_UserNotifSettings_notifTable {
-    display: table;
-    position: relative;
-}
-
-.mx_UserNotifSettings_notifTable .mx_Spinner {
-    position: absolute;
-}
-
-.mx_NotificationSound_soundUpload {
-    display: none;
-}
-
-.mx_NotificationSound_browse {
-    color: $accent-color;
-    border: 1px solid $accent-color;
-    background-color: transparent;
-}
-
-.mx_NotificationSound_save {
-    margin-left: 5px;
-    color: white;
-    background-color: $accent-color;
-}
-
-.mx_NotificationSound_resetSound {
-    margin-top: 5px;
-    color: white;
-    border: $warning-color;
-    background-color: $warning-color;
+.mx_UserNotifSettings {
+    color: $primary-fg-color; // override from default settings page styles
+
+    .mx_UserNotifSettings_pushRulesTable {
+        width: calc(100% + 12px); // +12px to line up center of 'Noisy' column with toggle switches
+        table-layout: fixed;
+        border-collapse: collapse;
+        border-spacing: 0;
+        margin-top: 40px;
+
+        tr > th {
+            font-weight: 600; // semi bold
+        }
+
+        tr > th:first-child {
+            text-align: left;
+            font-size: $font-18px;
+        }
+
+        tr > th:nth-child(n + 2) {
+            color: $secondary-fg-color;
+            font-size: $font-12px;
+            vertical-align: middle;
+            width: 66px;
+        }
+
+        tr > td:nth-child(n + 2) {
+            text-align: center;
+        }
+
+        tr > td {
+            padding-top: 8px;
+        }
+
+        // Override StyledRadioButton default styles
+        .mx_RadioButton {
+            justify-content: center;
+
+            .mx_RadioButton_content {
+                display: none;
+            }
+
+            .mx_RadioButton_spacer {
+                display: none;
+            }
+        }
+    }
+
+    .mx_UserNotifSettings_floatingSection {
+        margin-top: 40px;
+
+        & > div:first-child { // section header
+            font-size: $font-18px;
+            font-weight: 600; // semi bold
+        }
+
+        > table {
+            border-collapse: collapse;
+            border-spacing: 0;
+            margin-top: 8px;
+
+            tr > td:first-child {
+                // Just for a bit of spacing
+                padding-right: 8px;
+            }
+        }
+    }
+
+    .mx_UserNotifSettings_clearNotifsButton {
+        margin-top: 8px;
+    }
+
+    .mx_TagComposer {
+        margin-top: 35px; // lots of distance from the last line of the table
+    }
 }

src/components/views/elements/Spinner.tsx

@@ -0,0 +1,45 @@
+/*
+Copyright 2015-2021 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 { _t } from "../../../languageHandler";
+
+interface IProps {
+    w?: number;
+    h?: number;
+    message?: string;
+}
+
+export default class Spinner extends React.PureComponent<IProps> {
+    public static defaultProps: Partial<IProps> = {
+        w: 32,
+        h: 32,
+    };
+
+    public render() {
+        const { w, h, message } = this.props;
+        return (
+            <div className="mx_Spinner">
+                { message && <React.Fragment><div className="mx_Spinner_Msg">{ message }</div>&nbsp;</React.Fragment> }
+                <div
+                    className="mx_Spinner_icon"
+                    style={{ width: w, height: h }}
+                    aria-label={_t("Loading...")}
+                />
+            </div>
+        );
+    }
+}