Rewrite Notifications component for modern UI & processing

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

src/i18n/strings/en_EN.json

@@ -1158,6 +1158,16 @@
     "Off": "Off",
     "On": "On",
     "Noisy": "Noisy",
+    "Messages containing keywords": "Messages containing keywords",
+    "Error saving notification preferences": "Error saving notification preferences",
+    "An error occurred whilst saving your notification preferences.": "An error occurred whilst saving your notification preferences.",
+    "Enable for this account": "Enable for this account",
+    "Enable email notifications for %(email)s": "Enable email notifications for %(email)s",
+    "Keyword": "Keyword",
+    "New keyword": "New keyword",
+    "Global": "Global",
+    "Mentions & keywords": "Mentions & keywords",
+    "There was an error loading your notification settings.": "There was an error loading your notification settings.",
     "Failed to save your profile": "Failed to save your profile",
     "The operation could not be completed": "The operation could not be completed",
     "<a>Upgrade</a> to your own domain": "<a>Upgrade</a> to your own domain",
@@ -1656,7 +1666,6 @@
     "Show %(count)s more|other": "Show %(count)s more",
     "Show %(count)s more|one": "Show %(count)s more",
     "Show less": "Show less",
-    "Global": "Global",
     "All messages": "All messages",
     "Mentions & Keywords": "Mentions & Keywords",
     "Notification options": "Notification options",