Merge branch 'develop' into stop-sending-fallback

matrix-org · Oct 20, 2021 · bc2fd99 · bc2fd99
2 parents 566f797 + 1fa4c40
commit bc2fd99
Show file tree

Hide file tree

Showing 261 changed files with 3,923 additions and 1,380 deletions.
diff --git a/package.json b/package.json
@@ -76,7 +76,7 @@
     "focus-visible": "^5.2.0",
     "gfm.css": "^1.1.2",
     "glob-to-regexp": "^0.4.1",
-    "highlight.js": "^10.5.0",
+    "highlight.js": "^11.3.1",
     "html-entities": "^1.4.0",
     "is-ip": "^3.1.0",
     "jszip": "^3.7.0",
@@ -154,7 +154,7 @@
     "@typescript-eslint/eslint-plugin": "^4.17.0",
     "@typescript-eslint/parser": "^4.17.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
-    "allchange": "^1.0.3",
+    "allchange": "^1.0.4",
     "babel-jest": "^26.6.3",
     "chokidar": "^3.5.1",
     "concurrently": "^5.3.0",
@@ -188,7 +188,9 @@
     "@types/react": "17.0.14"
   },
   "jest": {
-    "snapshotSerializers": ["enzyme-to-json/serializer"],
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ],
     "testEnvironment": "./__test-utils__/environment.js",
     "testMatch": [
       "<rootDir>/test/**/*-test.[jt]s?(x)"

diff --git a/res/css/_components.scss b/res/css/_components.scss
@@ -148,7 +148,7 @@
 @import "./views/elements/_PowerSelector.scss";
 @import "./views/elements/_ProgressBar.scss";
 @import "./views/elements/_QRCode.scss";
-@import "./views/elements/_ReplyThread.scss";
+@import "./views/elements/_ReplyChain.scss";
 @import "./views/elements/_ResizeHandle.scss";
 @import "./views/elements/_RichText.scss";
 @import "./views/elements/_RoleButton.scss";
@@ -244,9 +244,11 @@
 @import "./views/rooms/_WhoIsTypingTile.scss";
 @import "./views/settings/_AvatarSetting.scss";
 @import "./views/settings/_CrossSigningPanel.scss";
+@import "./views/settings/_CryptographyPanel.scss";
 @import "./views/settings/_DevicesPanel.scss";
 @import "./views/settings/_E2eAdvancedPanel.scss";
 @import "./views/settings/_EmailAddresses.scss";
+@import "./views/settings/_FontScalingPanel.scss";
 @import "./views/settings/_IntegrationManager.scss";
 @import "./views/settings/_JoinRuleSettings.scss";
 @import "./views/settings/_LayoutSwitcher.scss";

diff --git a/res/css/structures/_GroupFilterPanel.scss b/res/css/structures/_GroupFilterPanel.scss
@@ -51,7 +51,7 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
     height: 0px;
     width: 90%;
     border: none;
-    border-bottom: 1px solid $groupFilterPanel-divider-color;
+    border-bottom: 1px solid $tertiary-content;
 }
 
 .mx_GroupFilterPanel .mx_GroupFilterPanel_scroller {

diff --git a/res/css/structures/_HomePage.scss b/res/css/structures/_HomePage.scss
@@ -56,14 +56,15 @@ limitations under the License.
     }
 
     .mx_HomePage_default_buttons {
+        display: flex;
         margin: 60px auto 0;
         width: fit-content;
 
         .mx_AccessibleButton {
             padding: 73px 8px 15px; // top: 20px top padding + 40px icon + 13px margin
 
             width: 160px;
-            height: 132px;
+            min-height: 132px;
             margin: 20px;
             position: relative;
             display: inline-block;

diff --git a/res/css/structures/_LeftPanelWidget.scss b/res/css/structures/_LeftPanelWidget.scss
@@ -24,7 +24,7 @@ limitations under the License.
         align-items: center;
 
         height: 24px;
-        color: $roomlist-header-color;
+        color: $tertiary-content;
         margin-top: 4px;
 
         .mx_LeftPanelWidget_stickable {
@@ -62,7 +62,7 @@ limitations under the License.
                     mask-position: center;
                     mask-size: contain;
                     mask-repeat: no-repeat;
-                    background-color: $roomlist-header-color;
+                    background-color: $tertiary-content;
                     mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
                 }
 

diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss
@@ -19,7 +19,7 @@ $nestedHeight: 24px;
 $gutterSize: 16px;
 $activeBorderTransparentGap: 1px;
 
-$activeBackgroundColor: $roomtile-selected-bg-color;
+$activeBackgroundColor: $panel-actions;
 $activeBorderColor: $secondary-content;
 
 .mx_SpacePanel {
@@ -49,7 +49,7 @@ $activeBorderColor: $secondary-content;
         mask-repeat: no-repeat;
         margin-left: $gutterSize;
         margin-bottom: 12px;
-        background-color: $roomlist-header-color;
+        background-color: $tertiary-content;
         mask-image: url('$(res)/img/element-icons/expand-space-panel.svg');
 
         &.expanded {
@@ -146,13 +146,6 @@ $activeBorderColor: $secondary-content;
             padding: 4px;
         }
 
-        &:not(.mx_SpaceButton_narrow) {
-            .mx_SpaceButton_selectionWrapper {
-                width: 100%;
-                overflow: hidden;
-            }
-        }
-
         .mx_SpaceButton_name {
             flex: 1;
             margin-left: 8px;
@@ -170,7 +163,7 @@ $activeBorderColor: $secondary-content;
             mask-position: center;
             mask-size: 20px;
             mask-repeat: no-repeat;
-            background-color: $roomlist-header-color;
+            background-color: $tertiary-content;
             mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
         }
 
@@ -227,7 +220,7 @@ $activeBorderColor: $secondary-content;
             height: 20px;
             margin-top: auto;
             margin-bottom: auto;
-            display: none;
+            visibility: hidden;
             position: relative;
 
             &::before {
@@ -246,67 +239,45 @@ $activeBorderColor: $secondary-content;
         }
     }
 
+    .mx_SpaceButton_avatarWrapper {
+        position: relative;
+    }
+
     .mx_SpacePanel_badgeContainer {
         // Create a flexbox to make aligning dot badges easier
         display: flex;
         align-items: center;
+        position: absolute;
+        right: -3px;
+        top: -3px;
 
         .mx_NotificationBadge {
             margin: 0 2px; // centering
+            background-clip: padding-box;
         }
 
         .mx_NotificationBadge_dot {
             // make the smaller dot occupy the same width for centering
-            margin: 0 7px;
+            margin: 0 -1px 0 0;
+            border: 3px solid $groupFilterPanel-bg-color;
         }
-    }
 
-    &.collapsed {
-        .mx_SpaceButton {
-            .mx_SpacePanel_badgeContainer {
-                position: absolute;
-                right: 0;
-                top: 0;
-
-                .mx_NotificationBadge {
-                    background-clip: padding-box;
-                }
-
-                .mx_NotificationBadge_dot {
-                    margin: 0 -1px 0 0;
-                    border: 3px solid $groupFilterPanel-bg-color;
-                }
-
-                .mx_NotificationBadge_2char,
-                .mx_NotificationBadge_3char {
-                    margin: -5px -5px 0 0;
-                    border: 2px solid $groupFilterPanel-bg-color;
-                }
-            }
-
-            &.mx_SpaceButton_active .mx_SpacePanel_badgeContainer {
-                // when we draw the selection border we move the relative bounds of our parent
-                // so update our position within the bounds of the parent to maintain position overall
-                right: -3px;
-                top: -3px;
-            }
+        .mx_NotificationBadge_2char,
+        .mx_NotificationBadge_3char {
+            margin: -5px -5px 0 0;
+            border: 2px solid $groupFilterPanel-bg-color;
         }
     }
 
-    &:not(.collapsed) {
-        .mx_SpaceButton:hover,
-        .mx_SpaceButton:focus-within,
-        .mx_SpaceButton_hasMenuOpen {
-            &:not(.mx_SpaceButton_invite) {
-                // Hide the badge container on hover because it'll be a menu button
-                .mx_SpacePanel_badgeContainer {
-                    display: none;
-                }
-
-                .mx_SpaceButton_menuButton {
-                    display: block;
-                }
-            }
+    .mx_SpaceButton_narrow .mx_SpaceButton_menuButton {
+        display: none;
+    }
+
+    .mx_SpaceButton:hover,
+    .mx_SpaceButton:focus-within,
+    .mx_SpaceButton_hasMenuOpen {
+        &:not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton {
+            visibility: visible;
         }
     }
 

diff --git a/res/css/structures/_SpaceRoomView.scss b/res/css/structures/_SpaceRoomView.scss
@@ -511,10 +511,11 @@ $SpaceRoomViewInnerWidth: 428px;
         mask-image: url("$(res)/img/element-icons/lock.svg");
     }
 
-    .mx_AccessibleButton_kind_link {
+    .mx_SpaceRoomView_info_memberCount {
         color: inherit;
         position: relative;
-        padding-left: 16px;
+        padding: 0 0 0 16px;
+        font-size: $font-15px;
 
         &::before {
             content: "·"; // visual separator

diff --git a/res/css/structures/auth/_CompleteSecurity.scss b/res/css/structures/auth/_CompleteSecurity.scss
@@ -51,7 +51,7 @@ limitations under the License.
 }
 
 .mx_CompleteSecurity_waiting {
-    color: $notice-secondary-color;
+    color: $tertiary-content;
 }
 
 .mx_CompleteSecurity_actionRow {

diff --git a/res/css/views/audio_messages/_PlayPauseButton.scss b/res/css/views/audio_messages/_PlayPauseButton.scss
@@ -21,12 +21,12 @@ limitations under the License.
     min-width: 32px; // for when the button is used in a flexbox
     min-height: 32px; // for when the button is used in a flexbox
     border-radius: 32px;
-    background-color: $voice-playback-button-bg-color;
+    background-color: $system;
 
     &::before {
         content: '';
         position: absolute; // sizing varies by icon
-        background-color: $voice-playback-button-fg-color;
+        background-color: $secondary-content;
         mask-repeat: no-repeat;
         mask-size: contain;
     }

diff --git a/res/css/views/audio_messages/_PlaybackContainer.scss b/res/css/views/audio_messages/_PlaybackContainer.scss
@@ -31,7 +31,7 @@ limitations under the License.
 
     .mx_Waveform {
         .mx_Waveform_bar {
-            background-color: $voice-record-waveform-incomplete-fg-color;
+            background-color: $quaternary-content;
             height: 100%;
             /* Variable set by a JS component */
             transform: scaleY(max(0.05, var(--barHeight)));

diff --git a/res/css/views/beta/_BetaCard.scss b/res/css/views/beta/_BetaCard.scss
@@ -17,7 +17,7 @@ limitations under the License.
 .mx_BetaCard {
     margin-bottom: 20px;
     padding: 24px;
-    background-color: $settings-profile-placeholder-bg-color;
+    background-color: $system;
     border-radius: 8px;
     box-sizing: border-box;
 

diff --git a/res/css/views/context_menus/_MessageContextMenu.scss b/res/css/views/context_menus/_MessageContextMenu.scss
@@ -81,4 +81,8 @@ limitations under the License.
     .mx_MessageContextMenu_iconUnpin::before {
         mask-image: url('$(res)/img/element-icons/room/pin.svg');
     }
+
+    .mx_MessageContextMenu_iconViewInRoom::before {
+        mask-image: url('$(res)/img/element-icons/view-in-room.svg');
+    }
 }
diff --git a/res/css/views/dialogs/_NewSessionReviewDialog.scss b/res/css/views/dialogs/_NewSessionReviewDialog.scss
@@ -33,5 +33,5 @@ limitations under the License.
 
 .mx_NewSessionReviewDialog_deviceID {
     font-size: $font-12px;
-    color: $notice-secondary-color;
+    color: $tertiary-content;
 }
diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss
@@ -128,7 +128,7 @@ limitations under the License.
     font-size: $font-10px;
     transform: translateY(-13px);
     padding: 0 2px;
-    background-color: $field-focused-label-bg-color;
+    background-color: $background;
     pointer-events: initial;
 }
 
@@ -144,7 +144,7 @@ limitations under the License.
 .mx_Field input:disabled + label,
 .mx_Field textarea:disabled,
 .mx_Field textarea:disabled + label {
-    background-color: $field-focused-label-bg-color;
+    background-color: $background;
     color: $greyed-fg-color;
 }
 

diff --git a/res/css/views/elements/_ReplyThread.scss → res/css/views/elements/_ReplyChain.scss b/res/css/views/elements/_ReplyThread.scss → res/css/views/elements/_ReplyChain.scss
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_ReplyThread {
+.mx_ReplyChain {
     margin-top: 0;
     margin-left: 0;
     margin-right: 0;
@@ -23,44 +23,44 @@ limitations under the License.
     border-left: 2px solid $button-bg-color;
     border-radius: 2px;
 
-    .mx_ReplyThread_show {
+    .mx_ReplyChain_show {
         cursor: pointer;
     }
 
-    &.mx_ReplyThread_color1 {
+    &.mx_ReplyChain_color1 {
         border-left-color: $username-variant1-color;
     }
 
-    &.mx_ReplyThread_color2 {
+    &.mx_ReplyChain_color2 {
         border-left-color: $username-variant2-color;
     }
 
-    &.mx_ReplyThread_color3 {
+    &.mx_ReplyChain_color3 {
         border-left-color: $username-variant3-color;
     }
 
-    &.mx_ReplyThread_color4 {
+    &.mx_ReplyChain_color4 {
         border-left-color: $username-variant4-color;
     }
 
-    &.mx_ReplyThread_color5 {
+    &.mx_ReplyChain_color5 {
         border-left-color: $username-variant5-color;
     }
 
-    &.mx_ReplyThread_color6 {
+    &.mx_ReplyChain_color6 {
         border-left-color: $username-variant6-color;
     }
 
-    &.mx_ReplyThread_color7 {
+    &.mx_ReplyChain_color7 {
         border-left-color: $username-variant7-color;
     }
 
-    &.mx_ReplyThread_color8 {
+    &.mx_ReplyChain_color8 {
         border-left-color: $username-variant8-color;
     }
 }
 
-.mx_ReplyThread--expanded {
+.mx_ReplyChain--expanded {
     .mx_EventTile_body {
         display: block;
         overflow-y: scroll !important;

diff --git a/res/css/views/messages/_common_CryptoEvent.scss b/res/css/views/messages/_common_CryptoEvent.scss
@@ -56,7 +56,7 @@ limitations under the License.
         padding: 10px 20px;
         margin: auto 0;
         text-align: center;
-        color: $notice-secondary-color;
+        color: $tertiary-content;
         overflow-wrap: break-word;
         font-size: $font-12px;
     }