Merge branch 'develop' into foldleft/better-errors

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/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/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;
@@ -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;
+    }
 }
 

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 {

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;
+}

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;
 }

res/css/views/elements/_RichText.scss

@@ -14,8 +14,11 @@
 }
 
 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 */

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/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: $font-16px;
-                font-size: $font-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;
+                }
             }
         }
     }

res/css/views/rooms/_EventTile.scss

@@ -111,6 +111,7 @@ limitations under the License.
 }
 
 .mx_EventTile_line, .mx_EventTile_reply {
+    clear: both;
     position: relative;
     padding-left: 65px; /* left gutter */
     padding-top: 4px;

res/css/views/rooms/_RoomTile.scss

@@ -24,6 +24,20 @@ limitations under the License.
     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/verification/_VerificationShowSas.scss

@@ -61,3 +61,21 @@ limitations under the License.
 .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;
+        }
+    }
+}