Normalize call buttons (#8129)

- Set a mixin to use it on call events and toasts Fixes element-hq/element-web#21493 Signed-off-by: Suguru Hirahara <[email protected]>
matrix-org · Apr 4, 2022 · 631fd87 · 631fd87
1 parent 19c665f
commit 631fd87
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 35 deletions.
diff --git 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
@@ -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;
-
-                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;
-                    }
+                @mixin CallButton;
+                padding: 0 12px;
+
+                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
@@ -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 {