mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update call button icon states

Browse source
This commit is contained in:
Fedor Indutny 2023-05-17 10:51:21 -07:00 committed by GitHub
parent 2ee15cdfa7
commit 77223b9a3d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
images/icons/v3/bell/bell-slash-fill.svg Normal file
View file

@ -0,0 +1 @@
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.568 1.568a.73.73 0 0 1 1.031 0L18.432 17.4a.73.73 0 1 1-1.03 1.031L1.567 2.6a.73.73 0 0 1 0-1.031Zm2.734 5.533c-.115 3.009-.73 4.158-1.247 4.77a4.91 4.91 0 0 1-.407.417l-.066.061a5.241 5.241 0 0 0-.337.33c-.28.307-.474.67-.474 1.239 0 .936.747 1.707 1.683 1.707h9.372L4.302 7.101Zm13.524 7.926c.252-.3.403-.688.403-1.109 0-.569-.194-.931-.473-1.239a5.507 5.507 0 0 0-.337-.33h-.001l-.03-.028-.036-.033a4.783 4.783 0 0 1-.407-.417c-.522-.617-1.143-1.781-1.25-4.85C15.582 3.778 13.02 1.459 10 1.459a5.68 5.68 0 0 0-4.058 1.685l11.884 11.884ZM7.458 17.08a.417.417 0 0 1 .36-.205h4.364a.417.417 0 0 1 .364.62c-.496.89-1.44 1.463-2.546 1.463-1.105 0-2.05-.573-2.546-1.463a.417.417 0 0 1 .004-.414Z" fill="#000"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 800 B

34
stylesheets/components/CallingButton.scss
View file

@ -30,31 +30,29 @@
} }
} }
@mixin calling-button-icon-on($icon) { @mixin calling-button-icon-highlighted($icon) {
@include calling-button-icon($icon, $color-white, $color-gray-75); @include calling-button-icon($icon, $color-gray-15, $color-gray-90);
} }
@mixin calling-button-icon-off($icon) { @mixin calling-button-icon-regular($icon) {
@include calling-button-icon($icon, $color-white-alpha-40, $color-white); @include calling-button-icon($icon, $color-gray-60, $color-gray-15);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
@mixin calling-button-icon-disabled($icon) { @mixin calling-button-icon-disabled($icon) {
@include calling-button-icon($icon, $color-gray-45, $color-white); @include calling-button-icon($icon, $color-gray-60, $color-gray-15);
opacity: 0.2; opacity: 0.4;
} }
// If the on/off states seem backwards, it's because this button reflects "is audio
// muted?", not "is audio on?".
&--audio { &--audio {
$icon: '../images/icons/v3/mic/mic-slash-fill-light.svg'; $icon: '../images/icons/v3/mic/mic-slash-fill-light.svg';
&--on { &--on {
@include calling-button-icon-off( @include calling-button-icon-regular(
'../images/icons/v3/mic/mic-fill-light.svg' '../images/icons/v3/mic/mic-fill-light.svg'
); );
} }
&--off { &--off {
@include calling-button-icon-on($icon); @include calling-button-icon-highlighted($icon);
} }
&--disabled { &--disabled {
@include calling-button-icon-disabled($icon); @include calling-button-icon-disabled($icon);
@ -64,12 +62,12 @@
&--video { &--video {
$icon: '../images/icons/v3/video/video-slash-fill-light.svg'; $icon: '../images/icons/v3/video/video-slash-fill-light.svg';
&--on { &--on {
@include calling-button-icon-on( @include calling-button-icon-regular(
'../images/icons/v3/video/video-fill-light.svg' '../images/icons/v3/video/video-fill-light.svg'
); );
} }
&--off { &--off {
@include calling-button-icon-off($icon); @include calling-button-icon-highlighted($icon);
} }
&--disabled { &--disabled {
@include calling-button-icon-disabled($icon); @include calling-button-icon-disabled($icon);
@ -85,12 +83,14 @@
} }
&--ring { &--ring {
$icon: '../images/icons/v3/bell/bell-ring-fill-light.svg'; $icon: '../images/icons/v3/bell/bell-slash-fill.svg';
&--on { &--on {
@include calling-button-icon-on($icon); @include calling-button-icon-regular(
'../images/icons/v3/bell/bell-ring-fill-light.svg'
);
} }
&--off { &--off {
@include calling-button-icon-off($icon); @include calling-button-icon-highlighted($icon);
} }
&--disabled { &--disabled {
@include calling-button-icon-disabled($icon); @include calling-button-icon-disabled($icon);
@ -100,10 +100,10 @@
&--presenting { &--presenting {
$icon: '../images/icons/v3/share_screen/share_screen-fill-light.svg'; $icon: '../images/icons/v3/share_screen/share_screen-fill-light.svg';
&--on { &--on {
@include calling-button-icon-on($icon); @include calling-button-icon-highlighted($icon);
} }
&--off { &--off {
@include calling-button-icon-off($icon); @include calling-button-icon-regular($icon);
} }
&--disabled { &--disabled {
@include calling-button-icon-disabled($icon); @include calling-button-icon-disabled($icon);