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

Conflicts: src/components/views/rooms/RoomBreadcrumbs.js src/components/views/rooms/RoomTile.js
2024-11-15 20:54:59 +08:00 · 2020-04-17 12:58:54 +01:00 · 2020-04-17 12:58:54 +01:00 · cd65bdc799
commit cd65bdc799
parent 1ae370b97e a2898b5cd8
222 changed files with 4834 additions and 2280 deletions
--- a/package.json
+++ b/package.json
@ -64,8 +64,8 @@
    "create-react-class": "^15.6.0",
    "diff-dom": "^4.1.3",
    "diff-match-patch": "^1.0.4",
-    "emojibase-data": "^4.0.2",
-    "emojibase-regex": "^3.0.0",
+    "emojibase-data": "^5.0.1",
+    "emojibase-regex": "^4.0.1",
    "escape-html": "^1.0.3",
    "file-saver": "^1.3.3",
    "filesize": "3.5.6",
@ -89,7 +89,6 @@
    "qrcode-react": "^0.1.16",
    "qs": "^6.6.0",
    "react": "^16.9.0",
-    "react-addons-css-transition-group": "15.6.2",
    "react-beautiful-dnd": "^4.0.1",
    "react-dom": "^16.9.0",
    "react-focus-lock": "^2.2.1",
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@ -16,6 +16,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

+@import "./_font-sizes.scss";
+
+:root {
+    font-size: 15px;
+}
+
 html {
    /* hack to stop overscroll bounce on OSX and iOS.
       N.B. Breaks things when we have legitimate horizontal overscroll */
@ -25,7 +31,7 @@ html {

 body {
    font-family: $font-family;
-    font-size: 15px;
+    font-size: $font-15px;
    background-color: $primary-bg-color;
    color: $primary-fg-color;
    border: 0px;
@ -60,7 +66,7 @@ b {
 h2 {
    color: $primary-fg-color;
    font-weight: 400;
-    font-size: 18px;
+    font-size: $font-18px;
    margin-top: 16px;
    margin-bottom: 16px;
 }
@ -76,7 +82,7 @@ input[type=search],
 input[type=password] {
    padding: 9px;
    font-family: $font-family;
-    font-size: 14px;
+    font-size: $font-14px;
    font-weight: 600;
    min-width: 0;
 }
@ -253,7 +259,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
    color: $light-fg-color;
    z-index: 4012;
    font-weight: 300;
-    font-size: 15px;
+    font-size: $font-15px;
    position: relative;
    padding: 25px 30px 30px 30px;
    max-height: 80%;
@ -321,8 +327,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 }

 .mx_Dialog_title {
-    font-size: 22px;
-    line-height: 36px;
+    font-size: $font-22px;
+    line-height: $font-36px;
    color: $dialog-title-fg-color;
 }

@ -350,7 +356,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {

 .mx_Dialog_content {
    margin: 24px 0 68px;
-    font-size: 14px;
+    font-size: $font-14px;
    color: $primary-fg-color;
    word-wrap: break-word;
 }
@ -446,7 +452,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 }

 .mx_TextInputDialog_input {
-    font-size: 15px;
+    font-size: $font-15px;
    border-radius: 3px;
    border: 1px solid $input-border-color;
    padding: 9px;
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@ -1,5 +1,6 @@
 // autogenerated by rethemendex.sh
@import "./_common.scss";
+@import "./_font-sizes.scss";
@import "./structures/_AutoHideScrollbar.scss";
@import "./structures/_CompatibilityPage.scss";
@import "./structures/_ContextualMenu.scss";
@ -93,6 +94,7 @@
@import "./views/elements/_AccessibleButton.scss";
@import "./views/elements/_AddressSelector.scss";
@import "./views/elements/_AddressTile.scss";
+@import "./views/elements/_ButtonPlaceholder.scss";
@import "./views/elements/_DirectorySearchBox.scss";
@import "./views/elements/_Dropdown.scss";
@import "./views/elements/_EditableItemList.scss";
@ -132,6 +134,7 @@
@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";
--- a/res/css/_font-sizes.scss
+++ b/res/css/_font-sizes.scss
@ -0,0 +1,63 @@
+/*
+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.
+*/
+
+$font-8px: 0.533rem;
+$font-9px: 0.600rem;
+$font-10px: 0.667rem;
+$font-10-4px: 0.693rem;
+$font-11px: 0.733rem;
+$font-12px: 0.800rem;
+$font-13px: 0.867rem;
+$font-14px: 0.933rem;
+$font-15px: 1.000rem;
+$font-16px: 1.067rem;
+$font-17px: 1.133rem;
+$font-18px: 1.200rem;
+$font-19px: 1.267rem;
+$font-20px: 1.333rem;
+$font-21px: 1.400rem;
+$font-22px: 1.467rem;
+$font-23px: 1.533rem;
+$font-24px: 1.600rem;
+$font-25px: 1.667rem;
+$font-26px: 1.733rem;
+$font-27px: 1.800rem;
+$font-28px: 1.867rem;
+$font-29px: 1.933rem;
+$font-30px: 2.000rem;
+$font-31px: 2.067rem;
+$font-32px: 2.133rem;
+$font-33px: 2.200rem;
+$font-34px: 2.267rem;
+$font-35px: 2.333rem;
+$font-36px: 2.400rem;
+$font-37px: 2.467rem;
+$font-38px: 2.533rem;
+$font-39px: 2.600rem;
+$font-40px: 2.667rem;
+$font-41px: 2.733rem;
+$font-42px: 2.800rem;
+$font-43px: 2.867rem;
+$font-44px: 2.933rem;
+$font-45px: 3.000rem;
+$font-46px: 3.067rem;
+$font-47px: 3.133rem;
+$font-48px: 3.200rem;
+$font-49px: 3.267rem;
+$font-50px: 3.333rem;
+$font-51px: 3.400rem;
+$font-52px: 3.467rem;
+$font-400px: 26.667rem;
--- a/res/css/structures/_ContextualMenu.scss
+++ b/res/css/structures/_ContextualMenu.scss
@ -36,7 +36,7 @@ limitations under the License.
    background-color: $menu-bg-color;
    color: $primary-fg-color;
    position: absolute;
-    font-size: 14px;
+    font-size: $font-14px;
    z-index: 5001;
 }

--- a/res/css/structures/_CreateRoom.scss
+++ b/res/css/structures/_CreateRoom.scss
@ -26,7 +26,7 @@ limitations under the License.
    border-radius: 3px;
    border: 1px solid $strong-input-border-color;
    font-weight: 300;
-    font-size: 13px;
+    font-size: $font-13px;
    padding: 9px;
    margin-top: 6px;
 }
--- a/res/css/structures/_FilePanel.scss
+++ b/res/css/structures/_FilePanel.scss
@ -49,7 +49,7 @@ limitations under the License.

 .mx_FilePanel .mx_EventTile .mx_MFileBody_download {
    display: flex;
-    font-size: 14px;
+    font-size: $font-14px;
    color: $event-timestamp-color;
 }

@ -60,7 +60,7 @@ limitations under the License.

 .mx_FilePanel .mx_EventTile .mx_MImageBody_size {
    flex: 1 0 0;
-    font-size: 11px;
+    font-size: $font-11px;
    text-align: right;
    white-space: nowrap;
 }
@ -80,7 +80,7 @@ limitations under the License.
    flex: 1 1 auto;
    line-height: initial;
    padding: 0px;
-    font-size: 11px;
+    font-size: $font-11px;
    opacity: 1.0;
    color: $event-timestamp-color;
 }
@ -90,7 +90,7 @@ limitations under the License.
    text-align: right;
    visibility: visible;
    position: initial;
-    font-size: 11px;
+    font-size: $font-11px;
    opacity: 1.0;
    color: $event-timestamp-color;
 }
--- a/res/css/structures/_GroupView.scss
+++ b/res/css/structures/_GroupView.scss
@ -134,7 +134,7 @@ limitations under the License.
    overflow: hidden;
    color: $primary-fg-color;
    font-weight: bold;
-    font-size: 22px;
+    font-size: $font-22px;
    padding-left: 19px;
    padding-right: 16px;
    /* why isn't text-overflow working? */
@ -148,7 +148,7 @@ limitations under the License.
    max-height: 42px;
    color: $settings-grey-fg-color;
    font-weight: 300;
-    font-size: 13px;
+    font-size: $font-13px;
    padding-left: 19px;
    margin-right: 16px;
    overflow: hidden;
@ -196,7 +196,7 @@ limitations under the License.
    text-transform: uppercase;
    color: $h3-color;
    font-weight: 600;
-    font-size: 13px;
+    font-size: $font-13px;
    margin-bottom: 10px;
 }

@ -226,7 +226,7 @@ limitations under the License.
 .mx_GroupView_rooms_header_addRow_label {
    display: inline-block;
    vertical-align: top;
-    line-height: 24px;
+    line-height: $font-24px;
    padding-left: 28px;
    color: $accent-color;
 }
@ -258,7 +258,7 @@ limitations under the License.

 .mx_GroupView_membershipSection_description {
    /* To match textButton */
-    line-height: 34px;
+    line-height: $font-34px;
 }

 .mx_GroupView_membershipSection_description .mx_BaseAvatar {
--- a/res/css/structures/_HomePage.scss
+++ b/res/css/structures/_HomePage.scss
@ -23,3 +23,84 @@ limitations under the License.
    margin-left: auto;
    margin-right: auto;
 }
+
+.mx_HomePage_default {
+    text-align: center;
+
+    .mx_HomePage_default_wrapper {
+        padding: 25vh 0 12px;
+    }
+
+    img {
+        height: 48px;
+    }
+
+    h1 {
+        font-weight: 600;
+        font-size: $font-32px;
+        line-height: $font-44px;
+        margin-bottom: 4px;
+    }
+
+    h4 {
+        margin-top: 4px;
+        font-weight: 600;
+        font-size: $font-18px;
+        line-height: $font-25px;
+        color: $muted-fg-color;
+    }
+
+    .mx_HomePage_default_buttons {
+        margin: 80px auto 0;
+        width: fit-content;
+
+        .mx_AccessibleButton {
+            padding: 73px 8px 15px; // top: 20px top padding + 40px icon + 13px margin
+
+            width: 104px; // 120px - 2* 8px
+            margin: 0 39px; // 55px - 2* 8px
+            position: relative;
+            display: inline-block;
+            border-radius: 8px;
+            vertical-align: top;
+            word-break: break-word;
+
+            font-weight: 600;
+            font-size: $font-15px;
+            line-height: $font-20px;
+            color: $muted-fg-color;
+
+            &:hover {
+                color: $accent-color;
+                background: rgba(#03b381, 0.06);
+
+                &::before {
+                    background-color: $accent-color;
+                }
+            }
+
+            &::before {
+                top: 20px;
+                left: 40px; // (120px-40px)/2
+                width: 40px;
+                height: 40px;
+
+                content: '';
+                position: absolute;
+                background-color: $muted-fg-color;
+                mask-repeat: no-repeat;
+                mask-size: contain;
+            }
+
+            &.mx_HomePage_button_sendDm::before {
+                mask-image: url('$(res)/img/feather-customised/message-circle.svg');
+            }
+            &.mx_HomePage_button_explore::before {
+                mask-image: url('$(res)/img/feather-customised/explore.svg');
+            }
+            &.mx_HomePage_button_createGroup::before {
+                mask-image: url('$(res)/img/feather-customised/group.svg');
+            }
+        }
+    }
+}
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@ -147,7 +147,7 @@ limitations under the License.
    }

    .mx_AccessibleButton {
-        font-size: 14px;
+        font-size: $font-14px;
        margin: 4px 0 1px 9px;
        padding: 9px;
        padding-left: 42px;
--- a/res/css/structures/_MyGroups.scss
+++ b/res/css/structures/_MyGroups.scss
@ -105,7 +105,7 @@ limitations under the License.
 .mx_MyGroups_placeholder {
    background-color: $info-plinth-bg-color;
    color: $info-plinth-fg-color;
-    line-height: 400px;
+    line-height: $font-400px;
    border-radius: 10px;
    text-align: center;
 }
@ -149,11 +149,11 @@ limitations under the License.

 .mx_GroupTile_profile .mx_GroupTile_name {
    margin: 0px;
-    font-size: 15px;
+    font-size: $font-15px;
 }

 .mx_GroupTile_profile .mx_GroupTile_groupId {
-    font-size: 13px;
+    font-size: $font-13px;
    opacity: 0.7;
 }

@ -161,7 +161,7 @@ limitations under the License.
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
-    font-size: 13px;
+    font-size: $font-13px;
    max-height: 36px;
    overflow: hidden;
 }
--- a/res/css/structures/_NotificationPanel.scss
+++ b/res/css/structures/_NotificationPanel.scss
@ -39,7 +39,7 @@ limitations under the License.

 .mx_NotificationPanel .mx_EventTile_roomName {
    font-weight: bold;
-    font-size: 14px;
+    font-size: $font-14px;
 }

 .mx_NotificationPanel .mx_EventTile_roomName a {
@ -54,7 +54,7 @@ limitations under the License.
 .mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
 .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
    color: $primary-fg-color;
-    font-size: 12px;
+    font-size: $font-12px;
    display: inline;
    padding-left: 0px;
 }
--- a/res/css/structures/_RightPanel.scss
+++ b/res/css/structures/_RightPanel.scss
@ -96,7 +96,7 @@ limitations under the License.
 }

 .mx_RightPanel_headerButton_badge {
-    font-size: 8px;
+    font-size: $font-8px;
    border-radius: 8px;
    color: $accent-fg-color;
    background-color: $accent-color;
--- a/res/css/structures/_RoomDirectory.scss
+++ b/res/css/structures/_RoomDirectory.scss
@ -64,7 +64,7 @@ limitations under the License.
 }

 .mx_RoomDirectory_table {
-    font-size: 12px;
+    font-size: $font-12px;
    color: $primary-fg-color;
    width: 100%;
    text-align: left;
@ -112,7 +112,7 @@ limitations under the License.

 .mx_RoomDirectory_name {
    display: inline-block;
-    font-size: 18px;
+    font-size: $font-18px;
    font-weight: 600;
 }

@ -124,7 +124,7 @@ limitations under the License.
    border-radius: 10px;
    display: inline-block;
    height: 20px;
-    line-height: 20px;
+    line-height: $font-20px;
    padding: 0 5px;
    color: $accent-fg-color;
    background-color: $rte-room-pill-color;
@ -136,7 +136,7 @@ limitations under the License.
 }

 .mx_RoomDirectory_alias {
-    font-size: 12px;
+    font-size: $font-12px;
    color: $settings-grey-fg-color;
 }

@ -150,7 +150,7 @@ limitations under the License.
 }

 .mx_RoomDirectory > span {
-    font-size: 15px;
+    font-size: $font-15px;
    margin-top: 0;

    .mx_AccessibleButton {
--- a/res/css/structures/_RoomStatusBar.scss
+++ b/res/css/structures/_RoomStatusBar.scss
@ -32,7 +32,7 @@ limitations under the License.

 .mx_RoomStatusBar_callBar {
    height: 50px;
-    line-height: 50px;
+    line-height: $font-50px;
 }

 .mx_RoomStatusBar_placeholderIndicator span {
@ -94,7 +94,7 @@ limitations under the License.
    border-radius: 40px;
    width: 24px;
    height: 24px;
-    line-height: 24px;
+    line-height: $font-24px;
    font-size: 0.8em;
    vertical-align: top;
    text-align: center;
@ -132,7 +132,7 @@ limitations under the License.

 .mx_RoomStatusBar_connectionLostBar_desc {
    color: $primary-fg-color;
-    font-size: 13px;
+    font-size: $font-13px;
    opacity: 0.5;
    padding-bottom: 20px;
 }
@ -145,7 +145,7 @@ limitations under the License.

 .mx_RoomStatusBar_typingBar {
    height: 50px;
-    line-height: 50px;
+    line-height: $font-50px;

    color: $primary-fg-color;
    opacity: 0.5;
@ -155,7 +155,7 @@ limitations under the License.

 .mx_RoomStatusBar_isAlone {
    height: 50px;
-    line-height: 50px;
+    line-height: $font-50px;

    color: $primary-fg-color;
    opacity: 0.5;
@ -174,11 +174,11 @@ limitations under the License.

    .mx_RoomStatusBar_callBar {
        height: 40px;
-        line-height: 40px;
+        line-height: $font-40px;
    }

    .mx_RoomStatusBar_typingBar {
        height: 40px;
-        line-height: 40px;
+        line-height: $font-40px;
    }
 }
--- a/res/css/structures/_RoomSubList.scss
+++ b/res/css/structures/_RoomSubList.scss
@ -68,7 +68,7 @@ limitations under the License.
    text-transform: uppercase;
    color: $roomsublist-label-fg-color;
    font-weight: 700;
-    font-size: 12px;
+    font-size: $font-12px;
    margin-left: 8px;
 }

@ -76,7 +76,7 @@ limitations under the License.
    flex: 0 0 auto;
    border-radius: 8px;
    font-weight: 600;
-    font-size: 12px;
+    font-size: $font-12px;
    padding: 0 5px;
    color: $roomtile-badge-fg-color;
    background-color: $roomtile-name-color;
--- a/res/css/structures/_RoomView.scss
+++ b/res/css/structures/_RoomView.scss
@ -23,7 +23,7 @@ limitations under the License.
 .mx_RoomView_fileDropTarget {
    min-width: 0px;
    width: 100%;
-    font-size: 18px;
+    font-size: $font-18px;
    text-align: center;

    pointer-events: none;
@ -186,7 +186,7 @@ limitations under the License.

 .mx_RoomView_empty {
    flex: 1 1 auto;
-    font-size: 13px;
+    font-size: $font-13px;
    padding-left: 3em;
    padding-right: 3em;
    margin-right: 20px;
--- a/res/css/structures/_TabbedView.scss
+++ b/res/css/structures/_TabbedView.scss
@ -39,7 +39,7 @@ limitations under the License.
    cursor: pointer;
    display: block;
    border-radius: 3px;
-    font-size: 14px;
+    font-size: $font-14px;
    min-height: 24px; // use min-height instead of height to allow the label to overflow a bit
    margin-bottom: 6px;
    position: relative;
--- a/res/css/structures/_TagPanel.scss
+++ b/res/css/structures/_TagPanel.scss
@ -139,7 +139,7 @@ limitations under the License.
    background-color: $neutral-badge-color;
    color: #000;
    font-weight: 600;
-    font-size: 10px;
+    font-size: $font-10px;
    text-align: center;
    padding-top: 1px;
    padding-left: 4px;
@ -157,7 +157,7 @@ limitations under the License.
    border-radius: 8px;
    color: $accent-fg-color;
    font-weight: 600;
-    font-size: 14px;
+    font-size: $font-14px;
    padding: 0 5px;
    background-color: $roomtile-name-color;
 }
--- a/res/css/structures/_ToastContainer.scss
+++ b/res/css/structures/_ToastContainer.scss
@ -77,7 +77,7 @@ limitations under the License.
            grid-column: 1 / 3;
            grid-row: 1;
            margin: 0;
-            font-size: 15px;
+            font-size: $font-15px;
            font-weight: 600;
        }

@ -96,11 +96,11 @@ limitations under the License.
            white-space: nowrap;
            text-overflow: ellipsis;
            margin: 4px 0 11px 0;
-            font-size: 12px;
+            font-size: $font-12px;
        }

        .mx_Toast_deviceID {
-            font-size: 10px;
+            font-size: $font-10px;
        }
    }
 }
--- a/res/css/structures/_TopLeftMenuButton.scss
+++ b/res/css/structures/_TopLeftMenuButton.scss
@ -32,7 +32,7 @@ limitations under the License.

 .mx_TopLeftMenuButton_name {
    margin: 0 7px;
-    font-size: 18px;
+    font-size: $font-18px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
--- a/res/css/structures/_ViewSource.scss
+++ b/res/css/structures/_ViewSource.scss
@ -29,7 +29,7 @@ limitations under the License.

 .mx_ViewSource pre {
    text-align: left;
-    font-size: 12px;
+    font-size: $font-12px;
    padding: 0.5em 1em 0.5em 1em;
    word-wrap: break-word;
    white-space: pre-wrap;
--- a/res/css/structures/auth/_CompleteSecurity.scss
+++ b/res/css/structures/auth/_CompleteSecurity.scss
@ -34,7 +34,7 @@ limitations under the License.
 }

 .mx_CompleteSecurity_body {
-    font-size: 15px;
+    font-size: $font-15px;
 }

 .mx_CompleteSecurity_waiting {
@ -44,6 +44,7 @@ limitations under the License.
 .mx_CompleteSecurity_actionRow {
    display: flex;
    justify-content: flex-end;
+    margin-top: $font-28px;

    .mx_AccessibleButton {
        margin-inline-start: 18px;
--- a/res/css/structures/auth/_Login.scss
+++ b/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;
+    }
+}
--- a/res/css/views/auth/_AuthBody.scss
+++ b/res/css/views/auth/_AuthBody.scss
@ -17,7 +17,7 @@ limitations under the License.

 .mx_AuthBody {
    width: 500px;
-    font-size: 12px;
+    font-size: $font-12px;
    color: $authpage-secondary-color;
    background-color: $authpage-body-bg-color;
    border-radius: 0 4px 4px 0;
@ -25,14 +25,14 @@ limitations under the License.
    box-sizing: border-box;

    h2 {
-        font-size: 24px;
+        font-size: $font-24px;
        font-weight: 600;
        margin-top: 8px;
        color: $authpage-primary-color;
    }

    h3 {
-        font-size: 14px;
+        font-size: $font-14px;
        font-weight: 600;
        color: $authpage-primary-color;
    }
@ -98,7 +98,7 @@ limitations under the License.

 .mx_AuthBody_editServerDetails {
    padding-left: 1em;
-    font-size: 12px;
+    font-size: $font-12px;
    font-weight: normal;
 }

@ -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;
--- a/res/css/views/auth/_AuthButtons.scss
+++ b/res/css/views/auth/_AuthButtons.scss
@ -43,7 +43,7 @@ limitations under the License.

    cursor: pointer;

-    font-size: 15px;
+    font-size: $font-15px;
    padding: 0 11px;
    word-break: break-word;
 }
--- a/res/css/views/auth/_AuthFooter.scss
+++ b/res/css/views/auth/_AuthFooter.scss
@ -17,7 +17,7 @@ limitations under the License.
 .mx_AuthFooter {
    text-align: center;
    width: 100%;
-    font-size: 14px;
+    font-size: $font-14px;
    opacity: 0.72;
    padding: 20px 0;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
--- a/res/css/views/auth/_CompleteSecurityBody.scss
+++ b/res/css/views/auth/_CompleteSecurityBody.scss
@ -24,13 +24,13 @@ limitations under the License.
    box-sizing: border-box;

    h2 {
-        font-size: 24px;
+        font-size: $font-24px;
        font-weight: 600;
        margin-top: 0;
    }

    h3 {
-        font-size: 14px;
+        font-size: $font-14px;
        font-weight: 600;
    }

--- a/res/css/views/auth/_LanguageSelector.scss
+++ b/res/css/views/auth/_LanguageSelector.scss
@ -20,7 +20,7 @@ limitations under the License.

 .mx_AuthBody_language .mx_Dropdown_input {
    border: none;
-    font-size: 14px;
+    font-size: $font-14px;
    font-weight: 600;
    color: $authpage-lang-color;
 }
--- a/res/css/views/auth/_ServerTypeSelector.scss
+++ b/res/css/views/auth/_ServerTypeSelector.scss
@ -65,5 +65,5 @@ limitations under the License.
 }

 .mx_ServerTypeSelector_description {
-    font-size: 10px;
+    font-size: $font-10px;
 }
--- a/res/css/views/context_menus/_MessageContextMenu.scss
+++ b/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;
--- a/res/css/views/context_menus/_RoomTileContextMenu.scss
+++ b/res/css/views/context_menus/_RoomTileContextMenu.scss
@ -38,7 +38,7 @@ limitations under the License.
    white-space: nowrap;
    display: flex;
    align-items: center;
-    line-height: 16px;
+    line-height: $font-16px;
 }

 .mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet {
--- a/res/css/views/context_menus/_StatusMessageContextMenu.scss
+++ b/res/css/views/context_menus/_StatusMessageContextMenu.scss
@ -44,7 +44,7 @@ input.mx_StatusMessageContextMenu_message {
 .mx_StatusMessageContextMenu_clear {
    @mixin mx_DialogButton;
    align-self: start;
-    font-size: 12px;
+    font-size: $font-12px;
    padding: 6px 1em;
    border: 1px solid transparent;
    margin-right: 10px;
--- a/res/css/views/context_menus/_TagTileContextMenu.scss
+++ b/res/css/views/context_menus/_TagTileContextMenu.scss
@ -22,7 +22,7 @@ limitations under the License.
    white-space: nowrap;
    display: flex;
    align-items: center;
-    line-height: 16px;
+    line-height: $font-16px;
 }

 .mx_TagTileContextMenu_item object {
--- a/res/css/views/context_menus/_TopLeftMenu.scss
+++ b/res/css/views/context_menus/_TopLeftMenu.scss
@ -19,12 +19,12 @@ limitations under the License.
    border-radius: 4px;

    .mx_TopLeftMenu_greyedText {
-        font-size: 12px;
+        font-size: $font-12px;
        opacity: 0.5;
    }

    .mx_TopLeftMenu_upgradeLink {
-        font-size: 12px;
+        font-size: $font-12px;

        img {
            margin-left: 5px;
--- a/res/css/views/dialogs/_AddressPickerDialog.scss
+++ b/res/css/views/dialogs/_AddressPickerDialog.scss
@ -28,7 +28,7 @@ limitations under the License.
 .mx_AddressPickerDialog_input,
 .mx_AddressPickerDialog_input:focus {
    height: 26px;
-    font-size: 14px;
+    font-size: $font-14px;
    font-family: $font-family;
    padding-left: 12px;
    padding-right: 12px;
@ -50,7 +50,7 @@ limitations under the License.
 .mx_AddressPickerDialog_inputContainer {
    border-radius: 3px;
    border: solid 1px $input-border-color;
-    line-height: 36px;
+    line-height: $font-36px;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 1px;
--- a/res/css/views/dialogs/_ConfirmUserActionDialog.scss
+++ b/res/css/views/dialogs/_ConfirmUserActionDialog.scss
@ -26,22 +26,22 @@ limitations under the License.
 }

 .mx_ConfirmUserActionDialog_name {
-    font-size: 18px;
+    font-size: $font-18px;
 }

 .mx_ConfirmUserActionDialog_userId {
-    font-size: 13px;
+    font-size: $font-13px;
 }

 .mx_ConfirmUserActionDialog_reasonField {
    font-family: $font-family;
-    font-size: 14px;
+    font-size: $font-14px;
    color: $primary-fg-color;
    background-color: $primary-bg-color;

    border-radius: 3px;
    border: solid 1px $input-border-color;
-    line-height: 36px;
+    line-height: $font-36px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 1px;
--- a/res/css/views/dialogs/_CreateGroupDialog.scss
+++ b/res/css/views/dialogs/_CreateGroupDialog.scss
@ -25,7 +25,7 @@ limitations under the License.
 }

 .mx_CreateGroupDialog_input {
-    font-size: 15px;
+    font-size: $font-15px;
    border-radius: 3px;
    border: 1px solid $input-border-color;
    padding: 9px;
@ -44,7 +44,7 @@ limitations under the License.
 .mx_CreateGroupDialog_prefix,
 .mx_CreateGroupDialog_suffix {
    padding: 0px 5px;
-    line-height: 37px;
+    line-height: $font-37px;
    background-color: $input-darker-bg-color;
    border: 1px solid $input-border-color;
    text-align: center;
--- a/res/css/views/dialogs/_CreateRoomDialog.scss
+++ b/res/css/views/dialogs/_CreateRoomDialog.scss
@ -15,6 +15,8 @@ limitations under the License.
 */

 .mx_CreateRoomDialog_details {
+    margin-top: 15px;
+
    .mx_CreateRoomDialog_details_summary {
        outline: none;
        list-style: none;
@ -49,7 +51,7 @@ limitations under the License.
 }

 .mx_CreateRoomDialog_input {
-    font-size: 15px;
+    font-size: $font-15px;
    border-radius: 3px;
    border: 1px solid $input-border-color;
    padding: 9px;
@ -71,11 +73,19 @@ limitations under the License.
 }

 .mx_CreateRoomDialog {
-
    &.mx_Dialog_fixedWidth {
        width: 450px;
    }

+    .mx_Dialog_content {
+        margin-bottom: 40px;
+    }
+
+    p,
+    .mx_Field_input label {
+        color: $muted-fg-color;
+    }
+
    .mx_SettingsFlag {
        display: flex;
    }
@ -90,5 +100,18 @@ limitations under the License.
        flex: 0 0 auto;
        margin-left: 30px;
    }
+
+    .mx_CreateRoomDialog_topic {
+        margin-bottom: 36px;
+    }
+
+    .mx_Dialog_content > .mx_SettingsFlag {
+        margin-top: 24px;
+    }
+
+    p {
+        margin: 0 85px 0 0;
+        font-size: $font-12px;
+    }
 }

--- a/res/css/views/dialogs/_DevtoolsDialog.scss
+++ b/res/css/views/dialogs/_DevtoolsDialog.scss
@ -68,11 +68,11 @@ limitations under the License.
    width: 240px;
    color: $input-fg-color;
    font-family: $font-family;
-    font-size: 16px;
+    font-size: $font-16px;
 }

 .mx_DevTools_textarea {
-    font-size: 12px;
+    font-size: $font-12px;
    max-width: 684px;
    min-height: 250px;
    padding: 10px;
--- a/res/css/views/dialogs/_InviteDialog.scss
+++ b/res/css/views/dialogs/_InviteDialog.scss
@ -40,8 +40,8 @@ limitations under the License.
        textarea,
        textarea:focus {
            height: 34px;
-            line-height: 34px;
-            font-size: 14px;
+            line-height: $font-34px;
+            font-size: $font-14px;
            padding-left: 12px;
            margin: 0 !important;
            border: 0 !important;
@ -65,7 +65,7 @@ limitations under the License.
        min-width: 48px;
        margin-left: 10px;
        height: 25px;
-        line-height: 25px;
+        line-height: $font-25px;
    }

    .mx_InviteDialog_buttonAndSpinner {
@ -84,7 +84,7 @@ limitations under the License.
    padding-bottom: 10px;

    h3 {
-        font-size: 12px;
+        font-size: $font-12px;
        color: $muted-fg-color;
        font-weight: bold;
        text-transform: uppercase;
@ -143,23 +143,23 @@ limitations under the License.

    .mx_InviteDialog_roomTile_name {
        font-weight: 600;
-        font-size: 14px;
+        font-size: $font-14px;
        color: $primary-fg-color;
        margin-left: 7px;
    }

    .mx_InviteDialog_roomTile_userId {
-        font-size: 12px;
+        font-size: $font-12px;
        color: $muted-fg-color;
        margin-left: 7px;
    }

    .mx_InviteDialog_roomTile_time {
        text-align: right;
-        font-size: 12px;
+        font-size: $font-12px;
        color: $muted-fg-color;
        float: right;
-        line-height: 36px; // Height of the avatar to keep the time vertically aligned
+        line-height: $font-36px; // Height of the avatar to keep the time vertically aligned
    }

    .mx_InviteDialog_roomTile_highlight {
@ -176,7 +176,7 @@ limitations under the License.
        border-radius: 12px;
        display: inline-block;
        height: 24px;
-        line-height: 24px;
+        line-height: $font-24px;
        padding-left: 8px;
        padding-right: 8px;
        color: #ffffff; // this is fine without a var because it's for both themes
--- a/res/css/views/dialogs/_MessageEditHistoryDialog.scss
+++ b/res/css/views/dialogs/_MessageEditHistoryDialog.scss
@ -35,7 +35,7 @@ limitations under the License.

 .mx_MessageEditHistoryDialog_edits {
    list-style-type: none;
-    font-size: 14px;
+    font-size: $font-14px;
    padding: 0;
    color: $primary-fg-color;

@ -60,7 +60,7 @@ limitations under the License.
    }

    .mx_MessageActionBar .mx_AccessibleButton {
-        font-size: 10px;
+        font-size: $font-10px;
        padding: 0 8px;
    }
 }
--- a/res/css/views/dialogs/_NewSessionReviewDialog.scss
+++ b/res/css/views/dialogs/_NewSessionReviewDialog.scss
@ -32,6 +32,6 @@ limitations under the License.
 }

 .mx_NewSessionReviewDialog_deviceID {
-    font-size: 12px;
+    font-size: $font-12px;
    color: $notice-secondary-color;
 }
--- a/res/css/views/dialogs/_SetEmailDialog.scss
+++ b/res/css/views/dialogs/_SetEmailDialog.scss
@ -20,7 +20,7 @@ limitations under the License.
    padding: 9px;
    color: $input-fg-color;
    background-color: $primary-bg-color;
-    font-size: 15px;
+    font-size: $font-15px;
    width: 100%;
    max-width: 280px;
    margin-bottom: 10px;
--- a/res/css/views/dialogs/_SetMxIdDialog.scss
+++ b/res/css/views/dialogs/_SetMxIdDialog.scss
@ -29,7 +29,7 @@ limitations under the License.
    padding: 9px;
    color: $primary-fg-color;
    background-color: $primary-bg-color;
-    font-size: 15px;
+    font-size: $font-15px;
    width: 100%;
    max-width: 280px;
 }
--- a/res/css/views/dialogs/_SetPasswordDialog.scss
+++ b/res/css/views/dialogs/_SetPasswordDialog.scss
@ -20,7 +20,7 @@ limitations under the License.
    padding: 9px;
    color: $primary-fg-color;
    background-color: $primary-bg-color;
-    font-size: 15px;
+    font-size: $font-15px;
    max-width: 280px;
    margin-bottom: 10px;
 }
--- a/res/css/views/dialogs/_TermsDialog.scss
+++ b/res/css/views/dialogs/_TermsDialog.scss
@ -31,7 +31,7 @@ limitations under the License.
 }

 .mx_TermsDialog_termsTable {
-    font-size: 12px;
+    font-size: $font-12px;
    width: 100%;
 }

--- a/res/css/views/dialogs/_UnknownDeviceDialog.scss
+++ b/res/css/views/dialogs/_UnknownDeviceDialog.scss
@ -27,7 +27,7 @@ limitations under the License.
 // userid
 .mx_UnknownDeviceDialog p {
    font-weight: bold;
-    font-size: 16px;
+    font-size: $font-16px;
 }

 .mx_UnknownDeviceDialog .mx_DeviceVerifyButtons {
--- a/res/css/views/directory/_NetworkDropdown.scss
+++ b/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 {
@ -47,9 +49,9 @@ limitations under the License.

    .mx_NetworkDropdown_server_title {
        padding: 0 10px;
-        font-size: 15px;
+        font-size: $font-15px;
        font-weight: 600;
-        line-height: 20px;
+        line-height: $font-20px;
        margin-bottom: 4px;

        // remove server button
@ -77,16 +79,16 @@ limitations under the License.

    .mx_NetworkDropdown_server_subtitle {
        padding: 0 10px;
-        font-size: 10px;
-        line-height: 14px;
+        font-size: $font-10px;
+        line-height: $font-14px;
        margin-top: -4px;
        margin-bottom: 4px;
        color: $muted-fg-color;
    }

    .mx_NetworkDropdown_server_network {
-        font-size: 12px;
-        line-height: 16px;
+        font-size: $font-12px;
+        line-height: $font-16px;
        padding: 4px 10px;
        cursor: pointer;
        position: relative;
@ -154,7 +156,7 @@ limitations under the License.

    .mx_NetworkDropdown_handle_server {
        color: $muted-fg-color;
-        font-size: 12px;
+        font-size: $font-12px;
    }
 }

--- a/res/css/views/elements/_AccessibleButton.scss
+++ b/res/css/views/elements/_AccessibleButton.scss
@ -27,7 +27,7 @@ limitations under the License.
    text-align: center;
    border-radius: 4px;
    display: inline-block;
-    font-size: 14px;
+    font-size: $font-14px;
 }

 .mx_AccessibleButton_kind_primary {
--- a/res/css/views/elements/_AddressTile.scss
+++ b/res/css/views/elements/_AddressTile.scss
@ -19,9 +19,9 @@ limitations under the License.
    border-radius: 3px;
    background-color: rgba(74, 73, 74, 0.1);
    border: solid 1px $input-border-color;
-    line-height: 26px;
+    line-height: $font-26px;
    color: $primary-fg-color;
-    font-size: 14px;
+    font-size: $font-14px;
    font-weight: normal;
    margin-right: 4px;
 }
--- a/res/css/views/elements/_ButtonPlaceholder.scss
+++ b/res/css/views/elements/_ButtonPlaceholder.scss
@ -0,0 +1,24 @@
+/*
+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_ButtonPlaceholder {
+    font-size: $font-14px;
+    font-weight: 600;
+    padding: 7px 18px;
+    display: inline-block;
+    text-align: center;
+    color: $authpage-secondary-color;
+}
--- a/res/css/views/elements/_DirectorySearchBox.scss
+++ b/res/css/views/elements/_DirectorySearchBox.scss
@ -32,7 +32,7 @@ limitations under the License.
    background-repeat: no-repeat;
    text-indent: 18px;
    font-weight: 600;
-    font-size: 12px;
+    font-size: $font-12px;
    user-select: none;
    cursor: pointer;
 }
--- a/res/css/views/elements/_Dropdown.scss
+++ b/res/css/views/elements/_Dropdown.scss
@ -29,10 +29,14 @@ limitations under the License.
    position: relative;
    border-radius: 3px;
    border: 1px solid $strong-input-border-color;
-    font-size: 12px;
+    font-size: $font-12px;
    user-select: none;
 }

+.mx_Dropdown_input.mx_AccessibleButton_disabled {
+    cursor: not-allowed;
+}
+
 .mx_Dropdown_input:focus {
    border-color: $input-focused-border-color;
 }
@ -53,7 +57,7 @@ limitations under the License.

 .mx_Dropdown_option {
    height: 35px;
-    line-height: 35px;
+    line-height: $font-35px;
    padding-left: 8px;
    padding-right: 8px;
 }
--- a/res/css/views/elements/_EventListSummary.scss
+++ b/res/css/views/elements/_EventListSummary.scss
@ -19,7 +19,7 @@ limitations under the License.
 }

 .mx_TextualEvent.mx_EventListSummary_summary {
-    font-size: 14px;
+    font-size: $font-14px;
    display: inline-flex;
 }

@ -27,7 +27,7 @@ limitations under the License.
    display: inline-block;
    margin-right: 8px;
    padding-top: 8px;
-    line-height: 12px;
+    line-height: $font-12px;
 }

 .mx_EventListSummary_avatars .mx_BaseAvatar {
@ -46,19 +46,19 @@ limitations under the License.
 .mx_EventListSummary_line {
    border-bottom: 1px solid $primary-hairline-color;
    margin-left: 63px;
-    line-height: 30px;
+    line-height: $font-30px;
 }

 .mx_MatrixChat_useCompactLayout {
    .mx_EventListSummary {
-        font-size: 13px;
+        font-size: $font-13px;
        .mx_EventTile_line {
-            line-height: 20px;
+            line-height: $font-20px;
        }
    }

    .mx_EventListSummary_line {
-        line-height: 22px;
+        line-height: $font-22px;
    }

    .mx_EventListSummary_toggle {
@ -66,6 +66,6 @@ limitations under the License.
    }

    .mx_TextualEvent.mx_EventListSummary_summary {
-        font-size: 13px;
+        font-size: $font-13px;
    }
 }
--- a/res/css/views/elements/_Field.scss
+++ b/res/css/views/elements/_Field.scss
@ -40,7 +40,7 @@ limitations under the License.
 .mx_Field textarea {
    font-weight: normal;
    font-family: $font-family;
-    font-size: 14px;
+    font-size: $font-14px;
    border: none;
    // Even without a border here, we still need this avoid overlapping the rounded
    // corners on the field above.
@ -102,7 +102,7 @@ limitations under the License.
        background-color 0.25s ease-out 0.1s;
    color: $primary-fg-color;
    background-color: transparent;
-    font-size: 14px;
+    font-size: $font-14px;
    position: absolute;
    left: 0px;
    top: 0px;
@ -126,7 +126,7 @@ limitations under the License.
        color 0.25s ease-out 0s,
        top 0.25s ease-out 0s,
        background-color 0.25s ease-out 0s;
-    font-size: 10px;
+    font-size: $font-10px;
    top: -13px;
    padding: 0 2px;
    background-color: $field-focused-label-bg-color;
--- a/res/css/views/elements/_FormButton.scss
+++ b/res/css/views/elements/_FormButton.scss
@ -15,9 +15,9 @@ limitations under the License.
 */

 .mx_FormButton {
-    line-height: 16px;
+    line-height: $font-16px;
    padding: 5px 15px;
-    font-size: 12px;
+    font-size: $font-12px;
    height: min-content;

    &:not(:last-child) {
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@ -102,13 +102,13 @@ limitations under the License.
 }

 .mx_ImageView_name {
-    font-size: 18px;
+    font-size: $font-18px;
    margin-bottom: 6px;
    word-wrap: break-word;
 }

 .mx_ImageView_metadata {
-    font-size: 15px;
+    font-size: $font-15px;
    opacity: 0.5;
 }

@ -118,13 +118,13 @@ limitations under the License.
    margin-bottom: 6px;
    border-radius: 5px;
    background-color: $lightbox-bg-color;
-    font-size: 14px;
+    font-size: $font-14px;
    padding: 9px;
    border: 1px solid $lightbox-border-color;
 }

 .mx_ImageView_size {
-    font-size: 11px;
+    font-size: $font-11px;
 }

 .mx_ImageView_link {
@ -133,7 +133,7 @@ limitations under the License.
 }

 .mx_ImageView_button {
-    font-size: 15px;
+    font-size: $font-15px;
    opacity: 0.5;
    margin-top: 18px;
    cursor: pointer;
--- a/res/css/views/elements/_InteractiveTooltip.scss
+++ b/res/css/views/elements/_InteractiveTooltip.scss
@ -24,7 +24,7 @@ limitations under the License.
    background-color: $interactive-tooltip-bg-color;
    color: $interactive-tooltip-fg-color;
    position: absolute;
-    font-size: 10px;
+    font-size: $font-10px;
    font-weight: 600;
    padding: 6px;
    z-index: 5001;
--- a/res/css/views/elements/_RichText.scss
+++ b/res/css/views/elements/_RichText.scss
@ -9,13 +9,16 @@
    border-radius: 16px;
    display: inline-block;
    height: 20px;
-    line-height: 20px;
+    line-height: $font-20px;
    padding-left: 5px;
 }

 a.mx_Pill {
-    word-break: break-all;
-    display: inline;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    vertical-align: text-bottom;
+    max-width: calc(100% - 1ch);
 }

 /* More specific to override `.markdown-body a` text-decoration */
--- a/res/css/views/elements/_Tooltip.scss
+++ b/res/css/views/elements/_Tooltip.scss
@ -58,8 +58,8 @@ limitations under the License.
    z-index: 4000; // Higher than dialogs so tooltips can be used in dialogs
    padding: 10px;
    pointer-events: none;
-    line-height: 14px;
-    font-size: 12px;
+    line-height: $font-14px;
+    font-size: $font-12px;
    font-weight: 600;
    color: $primary-fg-color;
    max-width: 200px;
@ -82,7 +82,7 @@ limitations under the License.
    text-align: center;
    border: none;
    border-radius: 3px;
-    font-size: 14px;
+    font-size: $font-14px;
    line-height: 1.2;
    padding: 6px 8px;

--- a/res/css/views/elements/_TooltipButton.scss
+++ b/res/css/views/elements/_TooltipButton.scss
@ -28,7 +28,7 @@ limitations under the License.
    transition: opacity 0.2s ease-in;
    opacity: 0.6;

-    line-height: 11px;
+    line-height: $font-11px;
    text-align: center;

    cursor: pointer;
--- a/res/css/views/emojipicker/_EmojiPicker.scss
+++ b/res/css/views/emojipicker/_EmojiPicker.scss
@ -163,7 +163,7 @@ limitations under the License.

 .mx_EmojiPicker_item {
    display: inline-block;
-    font-size: 20px;
+    font-size: $font-20px;
    padding: 5px;
    width: 100%;
    height: 100%;
@ -183,7 +183,7 @@ limitations under the License.
 }

 .mx_EmojiPicker_category_label, .mx_EmojiPicker_preview_name {
-    font-size: 16px;
+    font-size: $font-16px;
    font-weight: 600;
    margin: 0;
 }
@ -197,7 +197,7 @@ limitations under the License.
 }

 .mx_EmojiPicker_preview_emoji {
-    font-size: 32px;
+    font-size: $font-32px;
    padding: 8px 16px;
 }

@ -212,7 +212,7 @@ limitations under the License.

 .mx_EmojiPicker_shortcode {
    color: $light-fg-color;
-    font-size: 14px;
+    font-size: $font-14px;

    &::before, &::after {
        content: ":";
--- a/res/css/views/messages/_DateSeparator.scss
+++ b/res/css/views/messages/_DateSeparator.scss
@ -19,7 +19,7 @@ limitations under the License.
    margin: 4px 0;
    display: flex;
    align-items: center;
-    font-size: 14px;
+    font-size: $font-14px;
    color: $roomtopic-color;
 }

--- a/res/css/views/messages/_MVideoBody.scss
+++ b/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;
+    }
+}
--- a/res/css/views/messages/_MessageActionBar.scss
+++ b/res/css/views/messages/_MessageActionBar.scss
@ -21,7 +21,7 @@ limitations under the License.
    cursor: pointer;
    display: flex;
    height: 24px;
-    line-height: 24px;
+    line-height: $font-24px;
    border-radius: 4px;
    background: $message-action-bar-bg-color;
    top: -18px;
--- a/res/css/views/messages/_MessageTimestamp.scss
+++ b/res/css/views/messages/_MessageTimestamp.scss
@ -16,5 +16,5 @@ limitations under the License.

 .mx_MessageTimestamp {
    color: $event-timestamp-color;
-    font-size: 10px;
+    font-size: $font-10px;
 }
--- a/res/css/views/messages/_ReactionsRow.scss
+++ b/res/css/views/messages/_ReactionsRow.scss
@ -21,7 +21,7 @@ limitations under the License.

 .mx_ReactionsRow_showAll {
    text-decoration: none;
-    font-size: 10px;
+    font-size: $font-10px;
    font-weight: 600;
    margin-left: 6px;
    vertical-align: top;
--- a/res/css/views/messages/_ReactionsRowButton.scss
+++ b/res/css/views/messages/_ReactionsRowButton.scss
@ -17,7 +17,7 @@ limitations under the License.
 .mx_ReactionsRowButton {
    display: inline-flex;
    height: 20px;
-    line-height: 21px;
+    line-height: $font-21px;
    margin-right: 6px;
    padding: 0 6px;
    border: 1px solid $reaction-row-button-border-color;
@ -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;
+    }
 }
--- a/res/css/views/messages/_ViewSourceEvent.scss
+++ b/res/css/views/messages/_ViewSourceEvent.scss
@ -17,7 +17,7 @@ limitations under the License.
 .mx_EventTile_content.mx_ViewSourceEvent {
    display: flex;
    opacity: 0.6;
-    font-size: 12px;
+    font-size: $font-12px;

    pre, code {
        flex: 1;
--- a/res/css/views/messages/_common_CryptoEvent.scss
+++ b/res/css/views/messages/_common_CryptoEvent.scss
@ -45,7 +45,7 @@ limitations under the License.

    .mx_cryptoEvent_title {
        font-weight: 600;
-        font-size: 15px;
+        font-size: $font-15px;
        grid-column: 2;
        grid-row: 1;
    }
@ -56,7 +56,7 @@ limitations under the License.
    }

    .mx_cryptoEvent_state, .mx_cryptoEvent_subtitle {
-        font-size: 12px;
+        font-size: $font-12px;
    }

    .mx_cryptoEvent_state, .mx_cryptoEvent_buttons {
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/res/css/views/right_panel/_UserInfo.scss
@ -20,7 +20,7 @@ limitations under the License.
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
-    font-size: 12px;
+    font-size: $font-12px;

    .mx_UserInfo_cancel {
        cursor: pointer;
@ -43,7 +43,7 @@ limitations under the License.
    }

    h2 {
-        font-size: 18px;
+        font-size: $font-18px;
        font-weight: 600;
        margin: 18px 0 0 0;
    }
@ -122,7 +122,7 @@ limitations under the License.
        text-transform: uppercase;
        color: $notice-secondary-color;
        font-weight: bold;
-        font-size: 12px;
+        font-size: $font-12px;
        margin: 4px 0;
    }

@ -134,24 +134,28 @@ limitations under the License.
        text-align: center;

        h2 {
-            font-size: 18px;
-            line-height: 25px;
+            display: flex;
+            font-size: $font-18px;
+            line-height: $font-25px;
            flex: 1;
            justify-content: center;
-            align-items: center;

-            // limit to 2 lines, show an ellipsis if it overflows
-            // this looks webkit specific but is supported by Firefox 68+
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
+            span {
+                // limit to 2 lines, show an ellipsis if it overflows
+                // this looks webkit specific but is supported by Firefox 68+
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;

-            overflow: hidden;
-            word-break: break-all;
-            text-overflow: ellipsis;
+                overflow: hidden;
+                word-break: break-all;
+                text-overflow: ellipsis;
+            }

            .mx_E2EIcon {
-                margin: 5px;
+                margin-top: 3px; // visual vertical centering to the top line of text
+                margin-right: 4px; // margin from displyname
+                min-width: 18px; // convince flexbox to not collapse it
            }
        }

@ -197,7 +201,7 @@ limitations under the License.
    .mx_UserInfo_field {
        cursor: pointer;
        color: $accent-color;
-        line-height: 16px;
+        line-height: $font-16px;
        margin: 8px 0;

        &.mx_UserInfo_destructive {
@ -206,7 +210,7 @@ limitations under the License.
    }

    .mx_UserInfo_statusMessage {
-        font-size: 11px;
+        font-size: $font-11px;
        opacity: 0.5;
        overflow: hidden;
        white-space: nowrap;
--- a/res/css/views/right_panel/_VerificationPanel.scss
+++ b/res/css/views/right_panel/_VerificationPanel.scss
@ -14,6 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

+.mx_VerificationPanel_verified_section,
+.mx_VerificationPanel_reciprocate_section {
+    // center the big shield icon
+    .mx_E2EIcon {
+        // Override general user info margin
+        margin: 20px auto !important;
+    }
+}
+
+
 .mx_UserInfo {
    .mx_EncryptionPanel_cancel {
        mask: url('$(res)/img/feather-customised/cancel.svg');
@ -30,11 +40,6 @@ limitations under the License.
        right: 14px;
    }

-    .mx_VerificationPanel_verified_section .mx_E2EIcon {
-        // Override general user info margin
-        margin: 0 auto !important;
-    }
-
    .mx_VerificationPanel_qrCode {
        padding: 4px 4px 0 4px;
        background: white;
@ -51,6 +56,16 @@ limitations under the License.
            max-width: 240px;
        }
    }
+
+    .mx_VerificationPanel_reciprocate_section {
+        .mx_FormButton {
+            width: 100%;
+            box-sizing: border-box;
+            padding: 10px;
+            display: block;
+            margin: 10px 0;
+        }
+    }
 }

 // Special case styling for EncryptionPanel in a Modal dialog
@ -60,6 +75,7 @@ limitations under the License.
        margin-top: 10px;
        margin-bottom: 10px;
        align-items: stretch;
+        justify-content: center;

        > .mx_VerificationPanel_QRPhase_betweenText {
            width: 50px;
@ -75,10 +91,12 @@ limitations under the License.
            border-radius: 10px;
            flex: 1;
            display: flex;
-            padding: 10px;
+            padding: 20px;
            align-items: center;
            flex-direction: column;
            position: relative;
+            max-width: 310px;
+            justify-content: space-between;

            canvas, .mx_VerificationPanel_QRPhase_noQR {
                width: 220px !important;
@ -91,31 +109,36 @@ limitations under the License.
            }

            > p {
+                margin-top: 0;
                font-weight: 700;
            }

            .mx_VerificationPanel_QRPhase_helpText {
-                font-size: 14px;
-                margin-top: 71px;
+                font-size: $font-14px;
+                margin: 30px 0;
                text-align: center;
            }
-
-            .mx_AccessibleButton {
-                position: absolute;
-                bottom: 30px;
-            }
        }
    }

    // EncryptionPanel when verification is done
    .mx_VerificationPanel_verified_section {
-        // center the big shield icon
-        .mx_E2EIcon {
-            margin: 0 auto;
-        }
        // right align the "Got it" button
        .mx_AccessibleButton {
            float: right;
        }
    }
+
+    .mx_VerificationPanel_reciprocate_section {
+        .mx_AccessibleButton {
+            margin-left: 10px;
+            padding: 7px 40px;
+        }
+
+        .mx_VerificationPanel_reciprocateButtons {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-end;
+        }
+    }
 }
--- a/res/css/views/rooms/_AppsDrawer.scss
+++ b/res/css/views/rooms/_AppsDrawer.scss
@ -46,7 +46,7 @@ $AppsDrawerBodyHeight: 273px;
    padding: 0;
    margin: 5px auto 5px auto;
    color: $accent-color;
-    font-size: 12px;
+    font-size: $font-12px;
 }

 .mx_AddWidget_button_full_width {
@ -59,7 +59,7 @@ $AppsDrawerBodyHeight: 273px;
    padding: 9px;
    color: $primary-hairline-color;
    background-color: $primary-bg-color;
-    font-size: 15px;
+    font-size: $font-15px;
 }

 .mx_AppTile {
@ -102,7 +102,7 @@ $AppsDrawerBodyHeight: 273px;

 .mx_AppTileMenuBar {
    margin: 0;
-    font-size: 12px;
+    font-size: $font-12px;
    background-color: $widget-menu-bar-bg-color;
    display: flex;
    flex-direction: row;
@ -272,7 +272,7 @@ form.mx_Custom_Widget_Form div {
    flex-direction: column;
    justify-content: center;
    align-items: center;
-    font-size: 16px;
+    font-size: $font-16px;
 }

 .mx_AppPermissionWarning_row {
@ -280,7 +280,7 @@ form.mx_Custom_Widget_Form div {
 }

 .mx_AppPermissionWarning_smallText {
-    font-size: 12px;
+    font-size: $font-12px;
 }

 .mx_AppPermissionWarning_bolder {
--- a/res/css/views/rooms/_BasicMessageComposer.scss
+++ b/res/css/views/rooms/_BasicMessageComposer.scss
@ -44,27 +44,29 @@ limitations under the License.
        outline: none;
        overflow-x: hidden;

-        span.mx_UserPill, span.mx_RoomPill {
-            padding-left: 21px;
-            position: relative;
+        &.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;
-                background: var(--avatar-background), $avatar-bg-color;
-                color: $avatar-initial-color;
-                background-repeat: no-repeat;
-                background-size: 16px;
-                border-radius: 8px;
-                text-align: center;
-                font-weight: normal;
-                line-height: 16px;
-                font-size: 10.4px;
+                // avatar psuedo element
+                &::before {
+                    position: absolute;
+                    left: 2px;
+                    top: 2px;
+                    content: var(--avatar-letter);
+                    width: 16px;
+                    height: 16px;
+                    background: var(--avatar-background), $avatar-bg-color;
+                    color: $avatar-initial-color;
+                    background-repeat: no-repeat;
+                    background-size: 16px;
+                    border-radius: 8px;
+                    text-align: center;
+                    font-weight: normal;
+                    line-height: $font-16px;
+                    font-size: $font-10-4px;
+                }
            }
        }
    }
--- a/res/css/views/rooms/_EntityTile.scss
+++ b/res/css/views/rooms/_EntityTile.scss
@ -78,7 +78,7 @@ limitations under the License.
 .mx_GroupRoomTile_name {
    flex: 1 1 0;
    overflow: hidden;
-    font-size: 14px;
+    font-size: $font-14px;
    text-overflow: ellipsis;
    white-space: nowrap;
 }
@ -116,7 +116,7 @@ limitations under the License.
 }

 .mx_EntityTile_subtext {
-    font-size: 11px;
+    font-size: $font-11px;
    opacity: 0.5;
    overflow: hidden;
    white-space: nowrap;
@ -125,7 +125,7 @@ limitations under the License.

 .mx_EntityTile_power {
    padding-inline-start: 6px;
-    font-size: 10px;
+    font-size: $font-10px;
    color: $notice-secondary-color;
    max-width: 6em;
    overflow: hidden;
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@ -19,7 +19,7 @@ limitations under the License.
    max-width: 100%;
    clear: both;
    padding-top: 18px;
-    font-size: 14px;
+    font-size: $font-14px;
    position: relative;
 }

@ -64,7 +64,7 @@ limitations under the License.

 .mx_EventTile .mx_SenderProfile {
    color: $primary-fg-color;
-    font-size: 14px;
+    font-size: $font-14px;
    display: inline-block; /* anti-zalgo, with overflow hidden */
    overflow: hidden;
    cursor: pointer;
@ -72,7 +72,7 @@ limitations under the License.
    padding-bottom: 0px;
    padding-top: 0px;
    margin: 0px;
-    line-height: 17px;
+    line-height: $font-17px;
    /* the next three lines, along with overflow hidden, truncate long display names */
    white-space: nowrap;
    text-overflow: ellipsis;
@ -111,13 +111,14 @@ limitations under the License.
 }

 .mx_EventTile_line, .mx_EventTile_reply {
+    clear: both;
    position: relative;
    padding-left: 65px; /* left gutter */
    padding-top: 4px;
    padding-bottom: 2px;
    border-radius: 4px;
    min-height: 24px;
-    line-height: 22px;
+    line-height: $font-22px;
 }

 .mx_RoomView_timeline_rr_enabled,
@ -314,7 +315,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {

 .mx_EventTile_readAvatarRemainder {
    color: $event-timestamp-color;
-    font-size: 11px;
+    font-size: $font-11px;
    position: absolute;
 }

@ -343,7 +344,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {

 .mx_EventTile_spoiler_reason {
    color: $event-timestamp-color;
-    font-size: 11px;
+    font-size: $font-11px;
 }

 .mx_EventTile_spoiler_content {
@ -395,7 +396,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 }

 .mx_EventTile_keyRequestInfo {
-    font-size: 12px;
+    font-size: $font-12px;
 }

 .mx_EventTile_keyRequestInfo_text {
@ -473,7 +474,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {

 .mx_EventTile_content .mx_EventTile_edited {
    user-select: none;
-    font-size: 12px;
+    font-size: $font-12px;
    color: $roomtopic-color;
    display: inline-block;
    margin-left: 9px;
@ -491,7 +492,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
    white-space: normal !important;
    line-height: inherit !important;
    color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks)
-    font-size: 14px;
+    font-size: $font-14px;

    pre, code {
        font-family: $monospace-font-family !important;
@ -591,9 +592,9 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
    .mx_EventTile.mx_EventTile_info {
        // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
        padding-top: 0px;
-        font-size: 13px;
+        font-size: $font-13px;
        .mx_EventTile_line, .mx_EventTile_reply {
-            line-height: 20px;
+            line-height: $font-20px;
        }
        .mx_EventTile_avatar {
            top: 4px;
@ -601,7 +602,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
    }

    .mx_EventTile .mx_SenderProfile {
-        font-size: 13px;
+        font-size: $font-13px;
    }

    .mx_EventTile.mx_EventTile_emote {
--- a/res/css/views/rooms/_JumpToBottomButton.scss
+++ b/res/css/views/rooms/_JumpToBottomButton.scss
@ -34,8 +34,8 @@ limitations under the License.
    top: -12px;
    border-radius: 16px;
    font-weight: bold;
-    font-size: 12px;
-    line-height: 14px;
+    font-size: $font-12px;
+    line-height: $font-14px;
    text-align: center;
    // to be able to get it centered
    // with text-align in parent
--- a/res/css/views/rooms/_MemberDeviceInfo.scss
+++ b/res/css/views/rooms/_MemberDeviceInfo.scss
@ -59,7 +59,7 @@ limitations under the License.

 .mx_MemberDeviceInfo_deviceId {
    word-break: break-word;
-    font-size: 13px;
+    font-size: $font-13px;
 }

 .mx_MemberDeviceInfo_deviceInfo {
--- a/res/css/views/rooms/_MemberInfo.scss
+++ b/res/css/views/rooms/_MemberInfo.scss
@ -48,7 +48,7 @@ limitations under the License.
 }

 .mx_MemberInfo h2 {
-    font-size: 18px;
+    font-size: $font-18px;
    font-weight: 600;
    margin: 16px 0 16px 15px;
 }
@ -94,12 +94,12 @@ limitations under the License.
    text-transform: uppercase;
    color: $input-darker-fg-color;
    font-weight: bold;
-    font-size: 12px;
+    font-size: $font-12px;
    margin: 4px 0;
 }

 .mx_MemberInfo_profileField {
-    font-size: 15px;
+    font-size: $font-15px;
    position: relative;
 }

@ -109,10 +109,10 @@ limitations under the License.

 .mx_MemberInfo_field {
    cursor: pointer;
-    font-size: 15px;
+    font-size: $font-15px;
    color: $primary-fg-color;
    margin-left: 8px;
-    line-height: 23px;
+    line-height: $font-23px;
 }

 .mx_MemberInfo_createRoom {
@ -128,7 +128,7 @@ limitations under the License.
 }

 .mx_MemberInfo label {
-    font-size: 13px;
+    font-size: $font-13px;
 }

 .mx_MemberInfo label .mx_MemberInfo_label_text {
@ -144,7 +144,7 @@ limitations under the License.
 }

 .mx_MemberInfo_statusMessage {
-    font-size: 11px;
+    font-size: $font-11px;
    opacity: 0.5;
    overflow: hidden;
    white-space: nowrap;
--- a/res/css/views/rooms/_MemberList.scss
+++ b/res/css/views/rooms/_MemberList.scss
@ -30,7 +30,7 @@ limitations under the License.
        text-transform: uppercase;
        color: $h3-color;
        font-weight: 600;
-        font-size: 13px;
+        font-size: $font-13px;
        padding-left: 3px;
        padding-right: 12px;
        margin-top: 8px;
--- a/res/css/views/rooms/_MessageComposer.scss
+++ b/res/css/views/rooms/_MessageComposer.scss
@ -105,7 +105,7 @@ limitations under the License.
    min-height: 60px;
    justify-content: flex-start;
    align-items: flex-start;
-    font-size: 14px;
+    font-size: $font-14px;
    margin-right: 6px;
 }

@ -161,7 +161,7 @@ limitations under the License.
    box-shadow: none;
    color: $primary-fg-color;
    background-color: $primary-bg-color;
-    font-size: 14px;
+    font-size: $font-14px;
    max-height: 120px;
    overflow: auto;
    /* needed for FF */
@ -242,7 +242,7 @@ limitations under the License.

    flex-direction: row;
    align-items: center;
-    font-size: 10px;
+    font-size: $font-10px;
    color: $greyed-fg-color;
 }

--- a/res/css/views/rooms/_MessageComposerFormatBar.scss
+++ b/res/css/views/rooms/_MessageComposerFormatBar.scss
@ -97,13 +97,13 @@ limitations under the License.

 .mx_MessageComposerFormatBar_buttonTooltip {
    white-space: nowrap;
-    font-size: 13px;
+    font-size: $font-13px;
    font-weight: 600;
    min-width: 54px;
    text-align: center;

    .mx_MessageComposerFormatBar_tooltipShortcut {
-        font-size: 9px;
+        font-size: $font-9px;
        opacity: 0.7;
    }
 }
--- a/res/css/views/rooms/_PresenceLabel.scss
+++ b/res/css/views/rooms/_PresenceLabel.scss
@ -15,6 +15,6 @@ limitations under the License.
 */

 .mx_PresenceLabel {
-    font-size: 11px;
+    font-size: $font-11px;
    opacity: 0.5;
 }
--- a/res/css/views/rooms/_RoomDropTarget.scss
+++ b/res/css/views/rooms/_RoomDropTarget.scss
@ -28,7 +28,7 @@ limitations under the License.
 }

 .mx_RoomDropTarget {
-    font-size: 13px;
+    font-size: $font-13px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px dashed $accent-color;
@ -41,7 +41,7 @@ limitations under the License.
 .mx_RoomDropTarget_label {
    position: relative;
    margin-top: 3px;
-    line-height: 21px;
+    line-height: $font-21px;
    z-index: 1;
    text-align: center;
 }
--- a/res/css/views/rooms/_RoomHeader.scss
+++ b/res/css/views/rooms/_RoomHeader.scss
@ -77,9 +77,9 @@ limitations under the License.
 }

 .mx_RoomHeader_simpleHeader {
-    line-height: 52px;
+    line-height: $font-52px;
    color: $roomheader-color;
-    font-size: 18px;
+    font-size: $font-18px;
    font-weight: 600;
    overflow: hidden;
    margin-left: 63px;
@ -102,7 +102,7 @@ limitations under the License.
    overflow: hidden;
    color: $roomheader-color;
    font-weight: 600;
-    font-size: 18px;
+    font-size: $font-18px;
    margin: 0 7px;
    border-bottom: 1px solid transparent;
    display: flex;
@ -161,7 +161,7 @@ limitations under the License.
    flex: 1;
    color: $roomtopic-color;
    font-weight: 400;
-    font-size: 13px;
+    font-size: $font-13px;
    margin: 0 7px;
    margin-top: 4px; // to align baseline of topic with room name
    overflow: hidden;
--- a/res/css/views/rooms/_RoomList.scss
+++ b/res/css/views/rooms/_RoomList.scss
@ -47,13 +47,13 @@ limitations under the License.
 }

 .mx_RoomList_emptySubListTip {
-    font-size: 13px;
+    font-size: $font-13px;
    padding: 5px;
    border: 1px dashed $accent-color;
    color: $primary-fg-color;
    background-color: $droptarget-bg-color;
    border-radius: 4px;
-    line-height: 16px;
+    line-height: $font-16px;
 }

 .mx_RoomList_emptySubListTip .mx_RoleButton {
--- a/res/css/views/rooms/_RoomPreviewBar.scss
+++ b/res/css/views/rooms/_RoomPreviewBar.scss
@ -23,7 +23,7 @@ limitations under the License.
    -webkit-align-items: center;

    h3 {
-        font-size: 18px;
+        font-size: $font-18px;
        font-weight: 600;

        &.mx_RoomPreviewBar_spinnerTitle {
@ -48,8 +48,8 @@ limitations under the License.
    }

    .mx_RoomPreviewBar_footer {
-        font-size: 12px;
-        line-height: 20px;
+        font-size: $font-12px;
+        line-height: $font-20px;

        .mx_Spinner {
            vertical-align: middle;
--- a/res/css/views/rooms/_RoomTile.scss
+++ b/res/css/views/rooms/_RoomTile.scss
@ -69,7 +69,7 @@ limitations under the License.

 .mx_RoomTile_subtext {
    display: inline-block;
-    font-size: 11px;
+    font-size: $font-11px;
    padding: 0 0 0 7px;
    margin: 0;
    overflow: hidden;
@ -117,7 +117,7 @@ limitations under the License.
 }

 .mx_RoomTile_name {
-    font-size: 14px;
+    font-size: $font-14px;
    padding: 0 4px;
    color: $roomtile-name-color;
    white-space: nowrap;
@ -131,7 +131,7 @@ limitations under the License.
    padding: 0 0.4em;
    color: $roomtile-badge-fg-color;
    font-weight: 600;
-    font-size: 12px;
+    font-size: $font-12px;
 }

 .collapsed {
--- a/res/css/views/rooms/_SearchBar.scss
+++ b/res/css/views/rooms/_SearchBar.scss
@ -22,7 +22,7 @@ limitations under the License.

    .mx_SearchBar_input {
        // border: 1px solid $input-border-color;
-        // font-size: 15px;
+        // font-size: $font-15px;
        flex: 1 1 0;
        margin-left: 22px;
    }
@ -45,7 +45,7 @@ limitations under the License.
        border: 0;
        margin: 0 0 0 22px;
        padding: 5px;
-        font-size: 15px;
+        font-size: $font-15px;
        cursor: pointer;
        color: $primary-fg-color;
        border-bottom: 2px solid $accent-color;
--- a/res/css/views/rooms/_SendMessageComposer.scss
+++ b/res/css/views/rooms/_SendMessageComposer.scss
@ -18,7 +18,7 @@ limitations under the License.
    flex: 1;
    display: flex;
    flex-direction: column;
-    font-size: 14px;
+    font-size: $font-14px;
    justify-content: center;
    margin-right: 6px;
    // don't grow wider than available space
--- a/res/css/views/rooms/_WhoIsTypingTile.scss
+++ b/res/css/views/rooms/_WhoIsTypingTile.scss
@ -49,7 +49,7 @@ limitations under the License.
    border-radius: 40px;
    width: 24px;
    height: 24px;
-    line-height: 24px;
+    line-height: $font-24px;
    font-size: 0.8em;
    vertical-align: top;
    text-align: center;
@ -57,7 +57,7 @@ limitations under the License.

 .mx_WhoIsTypingTile_label {
    flex: 1;
-    font-size: 14px;
+    font-size: $font-14px;
    font-weight: 600;
    color: $eventtile-meta-color;
 }
--- a/res/css/views/settings/tabs/_SettingsTab.scss
+++ b/res/css/views/settings/tabs/_SettingsTab.scss
@ -19,7 +19,7 @@ limitations under the License.
 }

 .mx_SettingsTab_heading {
-    font-size: 20px;
+    font-size: $font-20px;
    font-weight: 600;
    color: $primary-fg-color;
 }
@ -29,7 +29,7 @@ limitations under the License.
 }

 .mx_SettingsTab_subheading {
-    font-size: 16px;
+    font-size: $font-16px;
    display: block;
    font-family: $font-family;
    font-weight: 600;
@ -40,7 +40,7 @@ limitations under the License.

 .mx_SettingsTab_subsectionText {
    color: $settings-subsection-fg-color;
-    font-size: 14px;
+    font-size: $font-14px;
    display: block;
    margin: 10px 100px 10px 0; // Align with the rest of the view
 }
@ -61,7 +61,7 @@ limitations under the License.
 .mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label {
    vertical-align: middle;
    display: inline-block;
-    font-size: 14px;
+    font-size: $font-14px;
    color: $primary-fg-color;
    max-width: calc(100% - 48px); // Force word wrap instead of colliding with the switch
    box-sizing: border-box;
--- a/res/css/views/terms/_InlineTermsAgreement.scss
+++ b/res/css/views/terms/_InlineTermsAgreement.scss
@ -16,7 +16,7 @@ limitations under the License.

 .mx_InlineTermsAgreement_cbContainer {
    margin-bottom: 10px;
-    font-size: 14px;
+    font-size: $font-14px;

    a {
        color: $accent-color;
--- a/res/css/views/verification/_VerificationShowSas.scss
+++ b/res/css/views/verification/_VerificationShowSas.scss
@ -48,16 +48,34 @@ limitations under the License.
 }

 .mx_VerificationShowSas_emojiSas_emoji {
-    font-size: 32px;
+    font-size: $font-32px;
 }

 .mx_VerificationShowSas_emojiSas_label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
-    font-size: 12px;
+    font-size: $font-12px;
 }

 .mx_VerificationShowSas_emojiSas_break {
    flex-basis: 100%;
 }
+
+.mx_VerificationShowSas {
+    .mx_Dialog_buttons {
+        // this is more specific than the DialogButtons css so gets preference
+        button.mx_VerificationShowSas_matchButton {
+            color: $accent-color;
+            background-color: $accent-bg-color;
+            border: none;
+        }
+
+        // this is more specific than the DialogButtons css so gets preference
+        button.mx_VerificationShowSas_noMatchButton {
+            color: $notice-primary-color;
+            background-color: $notice-primary-bg-color;
+            border: none;
+        }
+    }
+}
--- a/res/css/views/voip/_CallView.scss
+++ b/res/css/views/voip/_CallView.scss
@ -21,5 +21,5 @@ limitations under the License.
    text-align: center;
    padding: 6px;
    font-weight: bold;
-    font-size: 13px;
+    font-size: $font-13px;
 }
--- a/res/css/views/voip/_IncomingCallbox.scss
+++ b/res/css/views/voip/_IncomingCallbox.scss
@ -54,7 +54,7 @@ limitations under the License.
    vertical-align: middle;
    width: 80px;
    height: 36px;
-    line-height: 36px;
+    line-height: $font-36px;
    border-radius: 36px;
    color: $accent-fg-color;
    margin: auto;
--- a/res/img/feather-customised/explore.svg
+++ b/res/img/feather-customised/explore.svg
@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="11.5" stroke="#2E2F32" stroke-linecap="round"/>
+<circle cx="12" cy="4" r="0.8" fill="#2E2F32" stroke="#2E2F32" stroke-width="0.4"/>
+<circle cx="12" cy="20" r="0.8" fill="#2E2F32" stroke="#2E2F32" stroke-width="0.4"/>
+<circle cx="20" cy="12" r="0.8" fill="#2E2F32" stroke="#2E2F32" stroke-width="0.4"/>
+<circle cx="4" cy="12" r="0.8" fill="#2E2F32" stroke="#2E2F32" stroke-width="0.4"/>
+<path d="M10.7272 10.4443L18.3639 5.63602L13.5556 13.2728L5.636 18.3639L10.7272 10.4443Z" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/res/img/feather-customised/group.svg
+++ b/res/img/feather-customised/group.svg
@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.7273 16.8V15.6666C14.7273 14.4148 13.7504 13.4 12.5455 13.4H8.18182C6.97683 13.4 6 14.4148 6 15.6666V16.8" stroke="#27303A" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3636 11.1333C11.5686 11.1333 12.5455 10.1185 12.5455 8.86664C12.5455 7.6148 11.5686 6.59998 10.3636 6.59998C9.15866 6.59998 8.18182 7.6148 8.18182 8.86664C8.18182 10.1185 9.15866 11.1333 10.3636 11.1333Z" stroke="#27303A" stroke-linecap="round"/>
+<path d="M18 16.8V15.6666C17.9993 14.6337 17.3264 13.7319 16.3636 13.4736" stroke="#27303A" stroke-linecap="round"/>
+<path d="M14.1818 6.67352C15.1472 6.93032 15.8225 7.83405 15.8225 8.86936C15.8225 9.90466 15.1472 10.8084 14.1818 11.0652" stroke="#27303A" stroke-linecap="round"/>
+<circle cx="12" cy="12" r="11.5" stroke="#27303A" stroke-linecap="round"/>
+</svg>
--- a/res/img/feather-customised/message-circle.svg
+++ b/res/img/feather-customised/message-circle.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.5 11.3334L23.5 11.3347C23.5043 13.0157 23.1116 14.6741 22.3537 16.1746L22.3527 16.1765C20.5186 19.8462 16.769 22.1651 12.6665 22.1667L12.6653 22.1667C10.9843 22.1711 9.32594 21.7783 7.82541 21.0204C7.70642 20.9603 7.56835 20.9502 7.44187 20.9923L1.73925 22.8932C1.34837 23.0235 0.976504 22.6516 1.1068 22.2607L3.00767 16.5581C3.04983 16.4317 3.03973 16.2936 2.97963 16.1746C2.22171 14.6741 1.82895 13.0157 1.83333 11.3347L1.83333 11.3335C1.83492 7.23102 4.15379 3.48136 7.82352 1.64729L7.82352 1.64729L7.82541 1.64634C9.32594 0.888416 10.9843 0.495653 12.6653 0.500038H12.6666H13.3194C18.8084 0.809695 23.1903 5.19159 23.5 10.6806L23.5 11.3334Z" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/Show More
+++ b/Show More