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

res/css/_components.scss

@@ -63,7 +63,6 @@
 @import "./views/dialogs/_DeactivateAccountDialog.scss";
 @import "./views/dialogs/_DeviceVerifyDialog.scss";
 @import "./views/dialogs/_DevtoolsDialog.scss";
-@import "./views/dialogs/_EncryptedEventDialog.scss";
 @import "./views/dialogs/_GroupAddressPicker.scss";
 @import "./views/dialogs/_IncomingSasDialog.scss";
 @import "./views/dialogs/_InviteDialog.scss";

res/css/structures/_ToastContainer.scss

@@ -28,8 +28,8 @@ limitations under the License.
         margin: 0 4px;
         grid-row: 2 / 4;
         grid-column: 1;
-        background-color: white;
-        box-shadow: 0px 4px 12px $menu-box-shadow-color;
+        background-color: $dark-panel-bg-color;
+        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
         border-radius: 8px;
     }
 
@@ -37,16 +37,15 @@ limitations under the License.
         grid-row: 1 / 3;
         grid-column: 1;
         color: $primary-fg-color;
-        background-color: $primary-bg-color;
-        box-shadow: 0px 4px 12px $menu-box-shadow-color;
+        background-color: $dark-panel-bg-color;
+        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
         border-radius: 8px;
         overflow: hidden;
         display: grid;
-        grid-template-columns: 20px 1fr;
-        column-gap: 10px;
+        grid-template-columns: 22px 1fr;
+        column-gap: 8px;
         row-gap: 4px;
         padding: 8px;
-        padding-right: 16px;
 
         &.mx_Toast_hasIcon {
             &::after {
@@ -68,17 +67,45 @@ limitations under the License.
                 background-image: url("$(res)/img/e2e/warning.svg");
             }
 
-            h2, .mx_Toast_body {
+            .mx_Toast_title, .mx_Toast_body {
                 grid-column: 2;
             }
         }
+        &:not(.mx_Toast_hasIcon) {
+            padding-left: 12px;
 
-        h2 {
-            grid-column: 1 / 3;
-            grid-row: 1;
-            margin: 0;
-            font-size: $font-15px;
-            font-weight: 600;
+            .mx_Toast_title {
+                grid-column: 1 / -1;
+            }
+        }
+
+        .mx_Toast_title,
+        .mx_Toast_description {
+            padding-right: 8px;
+        }
+
+        .mx_Toast_title {
+            width: 100%;
+            box-sizing: border-box;
+
+            h2 {
+                grid-column: 1 / 3;
+                grid-row: 1;
+                margin: 0;
+                font-size: $font-15px;
+                font-weight: 600;
+                display: inline;
+                width: auto;
+                vertical-align: middle;
+            }
+
+            span {
+                padding-left: 8px;
+                float: right;
+                font-size: $font-12px;
+                line-height: $font-22px;
+                color: $muted-fg-color;
+            }
         }
 
         .mx_Toast_body {
@@ -87,7 +114,13 @@ limitations under the License.
         }
 
         .mx_Toast_buttons {
+            float: right;
             display: flex;
+
+            .mx_FormButton {
+                min-width: 96px;
+                box-sizing: border-box;
+            }
         }
 
         .mx_Toast_description {
@@ -96,6 +129,15 @@ limitations under the License.
             text-overflow: ellipsis;
             margin: 4px 0 11px 0;
             font-size: $font-12px;
+
+            .mx_AccessibleButton_kind_link {
+                font-size: inherit;
+                padding: 0;
+            }
+
+            a {
+                text-decoration: none;
+            }
         }
 
         .mx_Toast_deviceID {

res/css/views/dialogs/_EncryptedEventDialog.scss

@@ -1,34 +0,0 @@
-/*
-Copyright 2016 OpenMarket Ltd
-
-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_EncryptedEventDialog .mx_DeviceVerifyButtons {
-    float: right;
-    padding: 0px;
-    margin-right: 42px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-}
-
-.mx_EncryptedEventDialog .mx_MemberDeviceInfo_textButton {
-    @mixin mx_DialogButton;
-    background-color: $primary-bg-color;
-    color: $accent-color;
-}
-
-.mx_EncryptedEventDialog button {
-    margin-top: 0px;
-}

res/css/views/emojipicker/_EmojiPicker.scss

@@ -190,7 +190,7 @@ limitations under the License.
 
 .mx_EmojiPicker_footer {
     border-top: 1px solid $message-action-bar-border-color;
-    height: 72px;
+    min-height: 72px;
 
     display: flex;
     align-items: center;