Fix icon clipping on calling header buttons

Co-authored-by: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com>
signalapp · Aug 24, 2021 · f2f5523 · f2f5523
1 parent 45dd4dc
commit f2f5523
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 29 deletions.
diff --git a/stylesheets/_mixins.scss b/stylesheets/_mixins.scss
@@ -155,11 +155,14 @@
 
 // Icons
 
-@mixin color-svg($svg, $color, $stretch: true) {
+@mixin color-svg($svg, $color, $stretch: true, $mask-origin: null) {
   -webkit-mask: url($svg) no-repeat center;
   @if $stretch {
     -webkit-mask-size: 100%;
   }
+  @if $mask-origin {
+    -webkit-mask-origin: $mask-origin;
+  }
   background-color: $color;
 }
 

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
@@ -5301,13 +5301,15 @@ button.module-image__border-overlay:focus {
 }
 
 .module-calling-button {
-  $size: 22px;
+  @mixin icon($path) {
+    @include color-svg($path, $color-white, $mask-origin: padding-box);
+    height: 24px;
+    width: 24px;
+  }
 
   &__participants {
-    @include color-svg('../images/icons/v2/group-solid-24.svg', $color-white);
+    @include icon('../images/icons/v2/group-solid-24.svg');
     display: inline-block;
-    height: $size;
-    width: $size;
 
     &--container {
       @include button-reset;
@@ -5332,42 +5334,23 @@ button.module-image__border-overlay:focus {
   }
 
   &__settings {
-    @include color-svg(
-      '../images/icons/v2/settings-solid-16.svg',
-      $color-white
-    );
-    height: $size;
-    width: $size;
+    @include icon('../images/icons/v2/settings-solid-16.svg');
   }
 
   &__grid-view {
-    @include color-svg(
-      '../images/icons/v2/grid-view-solid-24.svg',
-      $color-white
-    );
-    height: $size;
-    width: $size;
+    @include icon('../images/icons/v2/grid-view-solid-24.svg');
   }
 
   &__speaker-view {
-    @include color-svg(
-      '../images/icons/v2/speaker-view-solid-24.svg',
-      $color-white
-    );
-    height: $size;
-    width: $size;
+    @include icon('../images/icons/v2/speaker-view-solid-24.svg');
   }
 
   &__pip {
-    @include color-svg('../images/icons/v2/pip-minimize-24.svg', $color-white);
-    height: $size;
-    width: $size;
+    @include icon('../images/icons/v2/pip-minimize-24.svg');
   }
 
   &__cancel {
-    @include color-svg('../images/icons/v2/x-24.svg', $color-white);
-    height: $size;
-    width: $size;
+    @include icon('../images/icons/v2/x-24.svg');
   }
 }