From 631fd875094cd58e6d7d99e130c657f1180baa17 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Mon, 4 Apr 2022 06:34:39 +0000
Subject: [PATCH] Normalize call buttons (#8129)

- Set a mixin to use it on call events and toasts

Fixes https://github.com/vector-im/element-web/issues/21493

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/_common.scss                         | 22 +++++++++++++++
 res/css/views/messages/_CallEvent.scss       | 28 ++++++--------------
 res/css/views/toasts/_IncomingCallToast.scss | 15 +----------
 3 files changed, 31 insertions(+), 34 deletions(-)

diff --git a/res/css/_common.scss b/res/css/_common.scss
index a4b470d052..4ead7381fc 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -670,3 +670,25 @@ legend {
     line-height: inherit;
     cursor: pointer;
 }
+
+@define-mixin CallButton {
+    box-sizing: border-box;
+    font-weight: 600;
+    height: $font-24px;
+    line-height: $font-24px;
+    margin-right: 0;
+
+    span {
+        display: flex;
+        align-items: center;
+
+        &::before {
+            content: '';
+            display: inline-block;
+            background-color: $button-fg-color;
+            mask-position: center;
+            mask-repeat: no-repeat;
+            margin-right: 8px;
+        }
+    }
+}
diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss
index 2587e73e50..b5ef5b0bc1 100644
--- a/res/css/views/messages/_CallEvent.scss
+++ b/res/css/views/messages/_CallEvent.scss
@@ -147,30 +147,18 @@ limitations under the License.
             align-items: center;
             color: $secondary-content;
             margin-right: 16px;
-            gap: 8px;
+            gap: 12px; // See mx_IncomingCallToast_buttons
             min-width: max-content;
 
             .mx_CallEvent_content_button {
-                padding: 0px 12px;
+                @mixin CallButton;
+                padding: 0 12px;
 
-                span {
-                    padding: 1px 0;
-                    display: flex;
-                    align-items: center;
-
-                    &::before {
-                        content: '';
-                        display: inline-block;
-                        background-color: $button-fg-color;
-                        mask-position: center;
-                        mask-repeat: no-repeat;
-                        mask-size: 16px;
-                        width: 16px;
-                        height: 16px;
-                        margin-right: 8px;
-
-                        flex-shrink: 0;
-                    }
+                span::before {
+                    mask-size: 16px;
+                    width: 16px;
+                    height: 16px;
+                    flex-shrink: 0;
                 }
             }
 
diff --git a/res/css/views/toasts/_IncomingCallToast.scss b/res/css/views/toasts/_IncomingCallToast.scss
index cb05b1a977..5fd244c277 100644
--- a/res/css/views/toasts/_IncomingCallToast.scss
+++ b/res/css/views/toasts/_IncomingCallToast.scss
@@ -90,27 +90,14 @@ limitations under the License.
             gap: 12px;
 
             .mx_IncomingCallToast_button {
-                height: 24px;
+                @mixin CallButton;
                 padding: 0px 8px;
                 flex-shrink: 0;
                 flex-grow: 1;
-                margin-right: 0;
                 font-size: $font-15px;
-                line-height: $font-24px;
 
                 span {
                     padding: 8px 0;
-                    display: flex;
-                    align-items: center;
-
-                    &::before {
-                        content: '';
-                        display: inline-block;
-                        background-color: $button-fg-color;
-                        mask-position: center;
-                        mask-repeat: no-repeat;
-                        margin-right: 8px;
-                    }
                 }
 
                 &.mx_IncomingCallToast_button_accept span::before {