From 7e7c48e0460ae163b2d3a66a1b54f767f8777e71 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 21 May 2020 16:32:19 +0100
Subject: [PATCH] Improve style of toasts to match Figma

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/structures/_ToastContainer.scss     | 46 ++++++++++++++++-----
 src/components/structures/ToastContainer.js |  5 ++-
 2 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss
index 6ec4a0d152..d39d6cdfe8 100644
--- a/res/css/structures/_ToastContainer.scss
+++ b/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,8 +37,8 @@ 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;
@@ -73,12 +73,23 @@ limitations under the License.
             }
         }
 
-        h2 {
-            grid-column: 1 / 3;
-            grid-row: 1;
-            margin: 0;
-            font-size: $font-15px;
-            font-weight: 600;
+        .mx_Toast_title {
+            h2 {
+                grid-column: 1 / 3;
+                grid-row: 1;
+                margin: 0;
+                font-size: $font-15px;
+                font-weight: 600;
+                display: inline;
+                width: auto;
+            }
+
+            span {
+                float: right;
+                font-size: $font-12px;
+                line-height: $font-21px;
+                color: $muted-fg-color;
+            }
         }
 
         .mx_Toast_body {
@@ -87,7 +98,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 +113,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 {
diff --git a/src/components/structures/ToastContainer.js b/src/components/structures/ToastContainer.js
index 283fbdd96a..ddbef42421 100644
--- a/src/components/structures/ToastContainer.js
+++ b/src/components/structures/ToastContainer.js
@@ -57,7 +57,10 @@ export default class ToastContainer extends React.Component {
                 toastKey: key,
             });
             toast = (<div className={toastClasses}>
-                <h2>{title}{countIndicator}</h2>
+                <div className="mx_Toast_title">
+                    <h2>{title}</h2>
+                    <span>{countIndicator}</span>
+                </div>
                 <div className="mx_Toast_body">{React.createElement(component, toastProps)}</div>
             </div>);
         }