Merge branches 'develop' and 't3chguy/qrcode' of github.com:matrix-org/matrix-react-sdk into t3chguy/qrcode

 Conflicts:

	package.json

res/css/_components.scss

@@ -133,12 +133,14 @@
 @import "./views/messages/_MNoticeBody.scss";
 @import "./views/messages/_MStickerBody.scss";
 @import "./views/messages/_MTextBody.scss";
+@import "./views/messages/_MVideoBody.scss";
 @import "./views/messages/_MessageActionBar.scss";
 @import "./views/messages/_MessageTimestamp.scss";
 @import "./views/messages/_MjolnirBody.scss";
 @import "./views/messages/_ReactionsRow.scss";
 @import "./views/messages/_ReactionsRowButton.scss";
 @import "./views/messages/_ReactionsRowButtonTooltip.scss";
+@import "./views/messages/_RedactedBody.scss";
 @import "./views/messages/_RoomAvatarEvent.scss";
 @import "./views/messages/_SenderProfile.scss";
 @import "./views/messages/_TextualEvent.scss";

res/css/_font-sizes.scss

@@ -14,6 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+$font-1px: 0.067rem;
+$font-2px: 0.133rem;
+$font-3px: 0.200rem;
+$font-4px: 0.267rem;
+$font-5px: 0.333rem;
+$font-6px: 0.400rem;
+$font-7px: 0.467rem;
 $font-8px: 0.533rem;
 $font-9px: 0.600rem;
 $font-10px: 0.667rem;
@@ -27,7 +34,7 @@ $font-16px: 1.067rem;
 $font-17px: 1.133rem;
 $font-18px: 1.200rem;
 $font-19px: 1.267rem;
-$font-20px: 1.333rem;
+$font-20px: 1.3333333rem;
 $font-21px: 1.400rem;
 $font-22px: 1.467rem;
 $font-23px: 1.533rem;
@@ -60,4 +67,5 @@ $font-49px: 3.267rem;
 $font-50px: 3.333rem;
 $font-51px: 3.400rem;
 $font-52px: 3.467rem;
+$font-88px: 5.887rem;
 $font-400px: 26.667rem;

res/css/structures/_RoomSubList.scss

@@ -74,7 +74,7 @@ limitations under the License.
 
 .mx_RoomSubList_badge > div {
     flex: 0 0 auto;
-    border-radius: 8px;
+    border-radius: $font-16px;
     font-weight: 600;
     font-size: $font-12px;
     padding: 0 5px;

res/css/structures/_TagPanel.scss

@@ -69,7 +69,7 @@ limitations under the License.
     height: 100%;
 }
 .mx_TagPanel .mx_TagPanel_tagTileContainer > div {
-    height: 40px;
+    height: $font-40px;
     padding: 10px 0 9px 0;
 }
 
@@ -110,13 +110,13 @@ limitations under the License.
 
 .mx_TagPanel .mx_TagTile.mx_TagTile_selected::before {
     content: '';
-    height: 56px;
+    height: calc(100% + 16px);
     background-color: $accent-color;
     width: 5px;
     position: absolute;
     left: -15px;
     border-radius: 0 3px 3px 0;
-    top: -8px; // (56 - 40)/2
+    top: -8px; // (16px / 2)
 }
 
 .mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {

res/css/structures/_ToastContainer.scss

@@ -91,9 +91,8 @@ limitations under the License.
         }
 
         .mx_Toast_description {
-            max-width: 400px;
+            max-width: 272px;
             overflow: hidden;
-            white-space: nowrap;
             text-overflow: ellipsis;
             margin: 4px 0 11px 0;
             font-size: $font-12px;

res/css/structures/auth/_CompleteSecurity.scss

@@ -26,6 +26,50 @@ limitations under the License.
     position: relative;
 }
 
+.mx_CompleteSecurity_clients {
+    width: max-content;
+    margin: 36px auto 0;
+
+    .mx_CompleteSecurity_clients_desktop, .mx_CompleteSecurity_clients_mobile {
+        position: relative;
+        width: 160px;
+        text-align: center;
+        padding-top: 64px;
+        display: inline-block;
+
+        &::before {
+            content: '';
+            position: absolute;
+            height: 48px;
+            width: 48px;
+            left: 56px;
+            top: 0;
+            background-color: $muted-fg-color;
+            mask-repeat: no-repeat;
+            mask-size: contain;
+        }
+    }
+
+    .mx_CompleteSecurity_clients_desktop {
+        margin-right: 56px;
+    }
+
+    .mx_CompleteSecurity_clients_desktop::before {
+        mask-image: url('$(res)/img/feather-customised/monitor.svg');
+    }
+
+    .mx_CompleteSecurity_clients_mobile::before {
+        mask-image: url('$(res)/img/feather-customised/smartphone.svg');
+    }
+
+    p {
+        margin-top: 16px;
+        font-size: $font-12px;
+        color: $muted-fg-color;
+        text-align: center;
+    }
+}
+
 .mx_CompleteSecurity_heroIcon {
     width: 128px;
     height: 128px;
@@ -44,6 +88,7 @@ limitations under the License.
 .mx_CompleteSecurity_actionRow {
     display: flex;
     justify-content: flex-end;
+    margin-top: $font-28px;
 
     .mx_AccessibleButton {
         margin-inline-start: 18px;

res/css/structures/auth/_Login.scss

@@ -89,3 +89,13 @@ limitations under the License.
 .mx_Login_underlinedServerName {
     border-bottom: 1px dashed $accent-color;
 }
+
+div.mx_AccessibleButton_kind_link.mx_Login_forgot {
+    // style it as a link
+    font-size: inherit;
+    padding: 0;
+
+    &.mx_AccessibleButton_disabled {
+        cursor: not-allowed;
+    }
+}

res/css/views/auth/_AuthBody.scss

@@ -119,6 +119,24 @@ limitations under the License.
     margin-right: 0;
 }
 
+.mx_AuthBody_paddedFooter {
+    height: 80px; // height of the submit button + register link
+    padding-top: 28px;
+    text-align: center;
+
+    .mx_AuthBody_paddedFooter_title {
+        margin-top: 16px;
+        font-size: $font-15px;
+        line-height: $font-24px;
+    }
+
+    .mx_AuthBody_paddedFooter_subtitle {
+        margin-top: 8px;
+        font-size: $font-10px;
+        line-height: $font-14px;
+    }
+}
+
 .mx_AuthBody_changeFlow {
     display: block;
     text-align: center;

res/css/views/avatars/_MemberStatusMessageAvatar.scss

@@ -17,7 +17,7 @@ limitations under the License.
 .mx_MessageComposer_avatar .mx_BaseAvatar {
     padding: 2px;
     border: 1px solid transparent;
-    border-radius: 15px;
+    border-radius: 100%;
 }
 
 .mx_MessageComposer_avatar .mx_BaseAvatar_initial {

res/css/views/context_menus/_MessageContextMenu.scss

@@ -19,6 +19,7 @@ limitations under the License.
 }
 
 .mx_MessageContextMenu_field {
+    display: block;
     padding: 3px 6px 3px 6px;
     cursor: pointer;
     white-space: nowrap;

res/css/views/context_menus/_TopLeftMenu.scss

@@ -72,10 +72,10 @@ limitations under the License.
         .mx_AccessibleButton::after {
             mask-repeat: no-repeat;
             mask-position: 0 center;
-            mask-size: 16px;
+            mask-size: $font-16px;
             position: absolute;
-            width: 16px;
-            height: 16px;
+            width: $font-16px;
+            height: $font-16px;
             content: "";
             top: 5px;
             left: 14px;

res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss

@@ -32,3 +32,9 @@ limitations under the License.
     padding: 10px;
 }
 
+.mx_RestoreKeyBackupDialog_content > div {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-height: 110px; /* Empirically measured */
+}

res/css/views/directory/_NetworkDropdown.scss

@@ -35,6 +35,8 @@ limitations under the License.
     border-radius: 4px;
     border: 1px solid $dialog-close-fg-color;
     background-color: $primary-bg-color;
+    max-height: calc(100vh - 20px); // allow 10px padding on both top and bottom
+    overflow-y: auto;
 }
 
 .mx_NetworkDropdown_menu_network {
@@ -51,15 +53,16 @@ limitations under the License.
         font-weight: 600;
         line-height: $font-20px;
         margin-bottom: 4px;
+        position: relative;
 
         // remove server button
         .mx_AccessibleButton {
             position: absolute;
             display: inline;
-            right: 12px;
+            right: 10px;
             height: 16px;
             width: 16px;
-            margin-top: 4px;
+            margin-top: 2px;
 
             &::after {
                 content: "";

res/css/views/elements/_Dropdown.scss

@@ -33,6 +33,10 @@ limitations under the License.
     user-select: none;
 }
 
+.mx_Dropdown_input.mx_AccessibleButton_disabled {
+    cursor: not-allowed;
+}
+
 .mx_Dropdown_input:focus {
     border-color: $input-focused-border-color;
 }
@@ -63,6 +67,8 @@ limitations under the License.
     text-overflow: ellipsis;
     white-space: nowrap;
     flex: 1;
+    display: inline-flex;
+    align-items: center;
 }
 
 .mx_Dropdown_option div {
@@ -71,12 +77,18 @@ limitations under the License.
     white-space: nowrap;
 }
 
-.mx_Dropdown_option img {
+.mx_Dropdown_option img,
+.mx_Dropdown_option .mx_Dropdown_option_emoji {
     margin: 5px;
     width: 16px;
     vertical-align: middle;
 }
 
+.mx_Dropdown_option_emoji {
+    font-size: $font-16px;
+    line-height: $font-16px;
+}
+
 input.mx_Dropdown_option,
 input.mx_Dropdown_option:focus {
     font-weight: normal;

res/css/views/elements/_EditableItemList.scss

@@ -53,6 +53,9 @@ limitations under the License.
 .mx_EditableItem_item {
     flex: auto 1 0;
     order: 1;
+    width: calc(100% - 14px); // leave space for the remove button
+    overflow-x: hidden;
+    text-overflow: ellipsis;
 }
 
 .mx_EditableItemList_label {

res/css/views/elements/_ImageView.scss

@@ -37,7 +37,7 @@ limitations under the License.
     order: 2;
     /* min-width hack needed for FF */
     min-width: 0px;
-    height: 90%;
+    max-height: 90%;
     flex: 15 15 0;
     display: flex;
     align-items: center;

res/css/views/elements/_RichText.scss

@@ -6,16 +6,33 @@
 .mx_RoomPill,
 .mx_GroupPill,
 .mx_AtRoomPill {
-    border-radius: 16px;
-    display: inline-block;
-    height: 20px;
-    line-height: $font-20px;
-    padding-left: 5px;
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+    border-radius: $font-16px;
+    line-height: $font-15px;
+    padding-left: 0;
 }
 
 a.mx_Pill {
-    word-break: break-all;
-    display: inline;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    max-width: calc(100% - 1ch);
+}
+
+.mx_Pill {
+    padding: $font-1px;
+    padding-right: 0.4em;
+    vertical-align: text-top;
+    line-height: $font-17px;
+}
+
+/* More specific to override `.markdown-body a` color */
+.mx_EventTile_content .markdown-body a.mx_GroupPill,
+.mx_GroupPill {
+    color: $accent-fg-color;
+    background-color: $rte-group-pill-color;
 }
 
 /* More specific to override `.markdown-body a` text-decoration */
@@ -28,7 +45,6 @@ a.mx_Pill {
 .mx_UserPill {
     color: $primary-fg-color;
     background-color: $other-user-pill-bg-color;
-    padding-right: 5px;
 }
 
 .mx_UserPill_selected {
@@ -42,7 +58,6 @@ a.mx_Pill {
 .mx_MessageComposer_input .mx_AtRoomPill {
     color: $accent-fg-color;
     background-color: $mention-user-pill-bg-color;
-    padding-right: 5px;
 }
 
 /* More specific to override `.markdown-body a` color */
@@ -52,15 +67,6 @@ a.mx_Pill {
 .mx_GroupPill {
     color: $accent-fg-color;
     background-color: $rte-room-pill-color;
-    padding-right: 5px;
-}
-
-/* More specific to override `.markdown-body a` color */
-.mx_EventTile_content .markdown-body a.mx_GroupPill,
-.mx_GroupPill {
-    color: $accent-fg-color;
-    background-color: $rte-group-pill-color;
-    padding-right: 5px;
 }
 
 .mx_EventTile_body .mx_UserPill,
@@ -74,8 +80,10 @@ a.mx_Pill {
 .mx_GroupPill .mx_BaseAvatar,
 .mx_AtRoomPill .mx_BaseAvatar {
     position: relative;
-    left: -3px;
-    top: 2px;
+    display: inline-flex;
+    align-items: center;
+    border-radius: 10rem;
+    margin-right: 0.24rem;
 }
 
 .mx_Markdown_BOLD {

res/css/views/elements/_ToggleSwitch.scss

@@ -16,11 +16,13 @@ limitations under the License.
 
 .mx_ToggleSwitch {
     transition: background-color 0.20s ease-out 0.1s;
-    width: 48px;
-    height: 24px;
-    border-radius: 14px;
+
+    width: $font-44px;
+    height: $font-20px;
+    border-radius: 1.5rem;
+    padding: 2px;
+
     background-color: $togglesw-off-color;
-    position: relative;
     opacity: 0.5;
 }
 
@@ -31,23 +33,18 @@ limitations under the License.
 
 .mx_ToggleSwitch.mx_ToggleSwitch_on {
     background-color: $togglesw-on-color;
+
+    > .mx_ToggleSwitch_ball {
+        left: calc(100% - $font-20px);
+    }
 }
 
 .mx_ToggleSwitch_ball {
-    transition: left 0.15s ease-out 0.1s;
-    margin: 2px;
-    width: 20px;
-    height: 20px;
-    border-radius: 20px;
+    position: relative;
+    width: $font-20px;
+    height: $font-20px;
+    border-radius: $font-20px;
     background-color: $togglesw-ball-color;
-    position: absolute;
-    top: 0;
-}
-
-.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
-    left: 23px; // 48px switch - 20px ball - 5px padding = 23px
-}
-
-.mx_ToggleSwitch:not(.mx_ToggleSwitch_on) > .mx_ToggleSwitch_ball {
-    left: 2px;
+    transition: left 0.15s ease-out 0.1s;
+    left: 0;
 }

res/css/views/messages/_MVideoBody.scss

@@ -0,0 +1,22 @@
+/*
+Copyright 2020 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.
+*/
+
+span.mx_MVideoBody {
+    video.mx_MVideoBody {
+        max-width: 100%;
+        height: auto;
+    }
+}

res/css/views/messages/_ReactionsRowButton.scss

@@ -34,12 +34,17 @@ limitations under the License.
         background-color: $reaction-row-button-selected-bg-color;
         border-color: $reaction-row-button-selected-border-color;
     }
-}
 
-.mx_ReactionsRowButton_content {
-    max-width: 100px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    padding-right: 4px;
+    // ignore mouse events for all children, treat it as one entire hoverable entity
+    * {
+        pointer-events: none;
+    }
+
+    .mx_ReactionsRowButton_content {
+        max-width: 100px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        padding-right: 4px;
+    }
 }

res/css/views/messages/_RedactedBody.scss

@@ -0,0 +1,36 @@
+/*
+Copyright 2020 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_RedactedBody {
+    white-space: pre-wrap;
+    color: $muted-fg-color;
+    vertical-align: middle;
+
+    padding-left: 20px;
+    position: relative;
+
+    &::before {
+        height: 14px;
+        width: 14px;
+        background-color: $muted-fg-color;
+        mask-image: url('$(res)/img/feather-customised/trash.custom.svg');
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
+        content: '';
+        position: absolute;
+        top: 2px;
+        left: 0;
+    }
+}

res/css/views/right_panel/_UserInfo.scss

@@ -98,8 +98,8 @@ limitations under the License.
         position: absolute;
         top: 0;
         left: 0;
-        width: 100%;
-        height: 100%;
+        width: 100% !important;
+        height: 100% !important;
     }
 
     .mx_UserInfo_avatar .mx_BaseAvatar_initial {
@@ -109,7 +109,7 @@ limitations under the License.
         justify-content: center;
 
         // override the calculated sizes so that the letter isn't HUGE
-        font-size: 56px !important;
+        font-size: 6rem !important;
         width: 100% !important;
         transition: font-size 0.5s;
     }

res/css/views/rooms/_Autocomplete.scss

@@ -31,9 +31,10 @@
 }
 
 .mx_Autocomplete_Completion_pill {
-    border-radius: 17px;
-    height: 34px;
-    padding: 0px 5px;
+    box-sizing: border-box;
+    border-radius: 2rem;
+    height: $font-34px;
+    padding: 0.4rem;
     display: flex;
     user-select: none;
     cursor: pointer;
@@ -42,7 +43,7 @@
 }
 
 .mx_Autocomplete_Completion_pill > * {
-    margin: 0 3px;
+    margin-right: 0.3rem;
 }
 
 /* styling for common completion elements */

res/css/views/rooms/_BasicMessageComposer.scss

@@ -46,22 +46,19 @@ limitations under the License.
 
         &.mx_BasicMessageComposer_input_shouldShowPillAvatar {
             span.mx_UserPill, span.mx_RoomPill {
-                padding-left: 21px;
                 position: relative;
 
                 // avatar psuedo element
                 &::before {
-                    position: absolute;
-                    left: 2px;
-                    top: 2px;
                     content: var(--avatar-letter);
-                    width: 16px;
-                    height: 16px;
+                    width: $font-16px;
+                    height: $font-16px;
+                    margin-right: 0.24rem;
                     background: var(--avatar-background), $avatar-bg-color;
                     color: $avatar-initial-color;
                     background-repeat: no-repeat;
-                    background-size: 16px;
-                    border-radius: 8px;
+                    background-size: $font-16px;
+                    border-radius: $font-16px;
                     text-align: center;
                     font-weight: normal;
                     line-height: $font-16px;

res/css/views/rooms/_EntityTile.scss

@@ -69,8 +69,6 @@ limitations under the License.
     padding-right: 12px;
     padding-top: 4px;
     padding-bottom: 4px;
-    width: 36px;
-    height: 36px;
     position: relative;
 }
 

res/css/views/rooms/_EventTile.scss

@@ -45,7 +45,7 @@ limitations under the License.
 }
 
 .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
-    top: 8px;
+    top: $font-8px;
     left: 65px;
 }
 
@@ -110,21 +110,23 @@ limitations under the License.
     user-select: none;
 }
 
-.mx_EventTile_line, .mx_EventTile_reply {
+.mx_EventTile_continuation .mx_EventTile_line {
     clear: both;
+}
+
+.mx_EventTile_line, .mx_EventTile_reply {
     position: relative;
     padding-left: 65px; /* left gutter */
-    padding-top: 4px;
-    padding-bottom: 2px;
+    padding-top: 3px;
+    padding-bottom: 3px;
     border-radius: 4px;
-    min-height: 24px;
     line-height: $font-22px;
 }
 
 .mx_RoomView_timeline_rr_enabled,
 // on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter
 .mx_EventListSummary {
-    .mx_EventTile_line, .mx_EventTile_reply {
+    .mx_EventTile_line {
         /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
         margin-right: 110px;
     }
@@ -242,34 +244,6 @@ limitations under the License.
     color: $event-notsent-color;
 }
 
-.mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody,
-.mx_EventTile_redacted .mx_EventTile_reply .mx_UnknownBody {
-    --lozenge-color: $event-redacted-fg-color;
-    --lozenge-border-color: $event-redacted-border-color;
-    display: block;
-    height: 22px;
-    width: 250px;
-    border-radius: 11px;
-    background:
-        repeating-linear-gradient(
-            -45deg,
-            var(--lozenge-color),
-            var(--lozenge-color) 3px,
-            transparent 3px,
-            transparent 6px
-        );
-    box-shadow: 0px 0px 3px var(--lozenge-border-color) inset;
-}
-
-.mx_EventTile_sending.mx_EventTile_redacted .mx_UnknownBody {
-    opacity: 0.4;
-}
-
-div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
-    --lozenge-color: $event-notsent-color;
-    --lozenge-border-color: $event-notsent-color;
-}
-
 .mx_EventTile_contextual {
     opacity: 0.4;
 }
@@ -311,6 +285,8 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 .mx_EventTile_readAvatars .mx_BaseAvatar {
     position: absolute;
     display: inline-block;
+    height: $font-14px;
+    width: $font-14px;
 }
 
 .mx_EventTile_readAvatarRemainder {
@@ -661,3 +637,23 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
         }
     }
 }
+
+.mx_EventTile_tileError {
+    color: red;
+    text-align: center;
+
+    // Remove some of the default tile padding so that the error is centered
+    margin-right: 0;
+    .mx_EventTile_line {
+        padding-left: 0;
+        margin-right: 0;
+    }
+
+    .mx_EventTile_line span {
+        padding: 4px 8px;
+    }
+
+    a {
+        margin-left: 1em;
+    }
+}

res/css/views/rooms/_RoomHeader.scss

@@ -173,8 +173,6 @@ limitations under the License.
 
 .mx_RoomHeader_avatar {
     flex: 0;
-    width: 28px;
-    height: 28px;
     margin: 0 7px;
     position: relative;
 }

res/css/views/rooms/_RoomRecoveryReminder.scss

@@ -33,11 +33,6 @@ limitations under the License.
     margin-bottom: 1em;
 }
 
-.mx_RoomRecoveryReminder_button {
-    @mixin mx_DialogButton;
-    margin: 0 10px;
-}
-
 .mx_RoomRecoveryReminder_secondary {
     font-size: 90%;
     margin-top: 1em;

res/css/views/rooms/_RoomTile.scss

@@ -20,10 +20,24 @@ limitations under the License.
     flex-direction: row;
     align-items: center;
     cursor: pointer;
-    height: 34px;
+    height: $font-34px;
     margin: 0;
     padding: 0 8px 0 10px;
     position: relative;
+
+    .mx_RoomTile_menuButton {
+        display: none;
+        flex: 0 0 16px;
+        height: 16px;
+        background-image: url('$(res)/img/icon_context.svg');
+        background-repeat: no-repeat;
+        background-position: center;
+    }
+
+    .mx_UserOnlineDot {
+        display: block;
+        margin-right: 5px;
+    }
 }
 
 .mx_RoomTile:focus {
@@ -31,15 +45,6 @@ limitations under the License.
     background-color: $roomtile-focused-bg-color;
 }
 
-.mx_RoomTile_menuButton {
-    display: none;
-    flex: 0 0 16px;
-    height: 16px;
-    background-image: url('$(res)/img/icon_context.svg');
-    background-repeat: no-repeat;
-    background-position: center;
-}
-
 .mx_RoomTile_tooltip {
     display: inline-block;
     position: relative;
@@ -151,7 +156,10 @@ limitations under the License.
     }
 
     .mx_RoomTile_menuButton {
-        display: none;  //no design for this for now
+        display: none; // no design for this for now
+    }
+    .mx_UserOnlineDot {
+        display: none; // no design for this for now
     }
 }
 
@@ -164,6 +172,9 @@ limitations under the License.
     .mx_RoomTile_menuButton {
         display: block;
     }
+    .mx_UserOnlineDot {
+        display: none;
+    }
 }
 
 .mx_RoomTile_unreadNotify .mx_RoomTile_badge,

res/css/views/rooms/_UserOnlineDot.scss

@@ -17,7 +17,7 @@ limitations under the License.
 .mx_UserOnlineDot {
     border-radius: 50%;
     background-color: $accent-color;
-    height: 5px;
-    width: 5px;
+    height: 6px;
+    width: 6px;
     display: inline-block;
 }

res/css/views/settings/_AvatarSetting.scss

@@ -15,13 +15,13 @@ limitations under the License.
 */
 
 .mx_AvatarSetting_avatar {
-    width: 88px;
-    height: 88px;
+    width: $font-88px;
+    height: $font-88px;
     margin-left: 13px;
     position: relative;
 
     & > * {
-        width: 88px;
+        width: $font-88px;
         box-sizing: border-box;
     }
 
@@ -63,7 +63,7 @@ limitations under the License.
     & > img,
     .mx_AvatarSetting_avatarPlaceholder {
         display: block;
-        height: 88px;
+        height: $font-88px;
         border-radius: 4px;
     }
 

res/css/views/settings/tabs/_SettingsTab.scss

@@ -63,7 +63,7 @@ limitations under the License.
     display: inline-block;
     font-size: $font-14px;
     color: $primary-fg-color;
-    max-width: calc(100% - 48px); // Force word wrap instead of colliding with the switch
+    max-width: calc(100% - $font-48px); // Force word wrap instead of colliding with the switch
     box-sizing: border-box;
     padding-right: 10px;
 }

res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss

@@ -23,6 +23,12 @@ limitations under the License.
     margin-top: 0;
 }
 
+.mx_GeneralUserSettingsTab_accountSection .mx_Spinner,
+.mx_GeneralUserSettingsTab_discovery .mx_Spinner {
+    // Move the spinner to the left side of the container (default center)
+    justify-content: left;
+}
+
 .mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,
 .mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,
 .mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress,

res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss

@@ -55,3 +55,12 @@ limitations under the License.
 .mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton {
     margin-right: 10px;
 }
+
+.mx_SecurityUserSettingsTab {
+    .mx_SettingsTab_section {
+        .mx_AccessibleButton_kind_link {
+            padding: 0;
+            font-size: inherit;
+        }
+    }
+}