From 863a441dd4c005819556c99dd4af174626796136 Mon Sep 17 00:00:00 2001 From: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com> Date: Fri, 5 May 2023 09:23:43 -0700 Subject: [PATCH] Some other minor UI fixes --- images/icons/v3/album/album-tilt.svg | 1 + images/icons/v3/album/album.svg | 1 - images/icons/v3/color/color.svg | 1 + images/icons/v3/emoji/emoji-plus.svg | 1 + images/icons/v3/phone/phone-down-light.svg | 1 + .../v3/video/video-slash-fill-light-white.svg | 1 + .../icons/v3/video/video-slash-fill-white.svg | 1 + images/icons/v3/video/video-slash-light.svg | 1 + stylesheets/_modules.scss | 28 ++++++--- stylesheets/components/AvatarEditor.scss | 2 +- stylesheets/components/AvatarPreview.scss | 4 +- stylesheets/components/CallingButton.scss | 3 +- stylesheets/components/CallingLobby.scss | 11 ++-- stylesheets/components/ContactModal.scss | 63 ++++++++++++++++--- stylesheets/components/MyStories.scss | 4 +- stylesheets/components/ProfileEditor.scss | 4 +- 16 files changed, 92 insertions(+), 35 deletions(-) create mode 100644 images/icons/v3/album/album-tilt.svg delete mode 100644 images/icons/v3/album/album.svg create mode 100644 images/icons/v3/color/color.svg create mode 100644 images/icons/v3/emoji/emoji-plus.svg create mode 100644 images/icons/v3/phone/phone-down-light.svg create mode 100644 images/icons/v3/video/video-slash-fill-light-white.svg create mode 100644 images/icons/v3/video/video-slash-fill-white.svg create mode 100644 images/icons/v3/video/video-slash-light.svg diff --git a/images/icons/v3/album/album-tilt.svg b/images/icons/v3/album/album-tilt.svg new file mode 100644 index 00000000000..0afcdc8ba49 --- /dev/null +++ b/images/icons/v3/album/album-tilt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/v3/album/album.svg b/images/icons/v3/album/album.svg deleted file mode 100644 index 4e63185e6d4..00000000000 --- a/images/icons/v3/album/album.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/images/icons/v3/color/color.svg b/images/icons/v3/color/color.svg new file mode 100644 index 00000000000..cee69718295 --- /dev/null +++ b/images/icons/v3/color/color.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/v3/emoji/emoji-plus.svg b/images/icons/v3/emoji/emoji-plus.svg new file mode 100644 index 00000000000..3469b7d0669 --- /dev/null +++ b/images/icons/v3/emoji/emoji-plus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/v3/phone/phone-down-light.svg b/images/icons/v3/phone/phone-down-light.svg new file mode 100644 index 00000000000..29091b6c9e0 --- /dev/null +++ b/images/icons/v3/phone/phone-down-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/v3/video/video-slash-fill-light-white.svg b/images/icons/v3/video/video-slash-fill-light-white.svg new file mode 100644 index 00000000000..b06d623383d --- /dev/null +++ b/images/icons/v3/video/video-slash-fill-light-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/v3/video/video-slash-fill-white.svg b/images/icons/v3/video/video-slash-fill-white.svg new file mode 100644 index 00000000000..954cb6d9aca --- /dev/null +++ b/images/icons/v3/video/video-slash-fill-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/v3/video/video-slash-light.svg b/images/icons/v3/video/video-slash-light.svg new file mode 100644 index 00000000000..5c8aa594003 --- /dev/null +++ b/images/icons/v3/video/video-slash-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index d25e66362ed..40057f2f625 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -3687,6 +3687,7 @@ button.module-image__border-overlay:focus { @include font-body-1; color: $color-white; display: flex; + align-items: center; z-index: $z-index-base; margin-top: 10px; @@ -3696,13 +3697,12 @@ button.module-image__border-overlay:focus { &::before { content: ''; display: block; - @include color-svg( - '../images/icons/v3/video/video-slash-fill.svg', - $color-white - ); - height: 24px; + background-image: url('../images/icons/v3/video/video-slash-fill-white.svg'); + background-size: 100%; + -webkit-filter: drop-shadow(0 0 4px $color-black-alpha-40); + height: 20px; margin-inline-end: 10px; - width: 24px; + width: 20px; } } } @@ -4156,14 +4156,15 @@ button.module-image__border-overlay:focus { &__button { &--hangup { @include color-svg( - '../images/icons/v3/phone/phone-down-fill-light.svg', + '../images/icons/v3/phone/phone-down-light.svg', $color-gray-75 ); height: 28px; width: 28px; + border: none; @include dark-theme { @include color-svg( - '../images/icons/v3/phone/phone-down-fill-light.svg', + '../images/icons/v3/phone/phone-down-light.svg', $color-gray-15 ); } @@ -4176,6 +4177,7 @@ button.module-image__border-overlay:focus { ); height: 24px; width: 24px; + border: none; @include dark-theme { @include color-svg( '../images/icons/v3/maximize/maximize-square-light.svg', @@ -6350,10 +6352,16 @@ button.module-image__border-overlay:focus { &--profile-editor::after { @include light-theme { - @include color-svg('../images/icons/v3/emoji/emoji.svg', $color-gray-75); + @include color-svg( + '../images/icons/v3/emoji/emoji-plus.svg', + $color-gray-75 + ); } @include dark-theme { - @include color-svg('../images/icons/v3/emoji/emoji.svg', $color-gray-15); + @include color-svg( + '../images/icons/v3/emoji/emoji-plus.svg', + $color-gray-15 + ); } } diff --git a/stylesheets/components/AvatarEditor.scss b/stylesheets/components/AvatarEditor.scss index aa03e9ce25d..6219d2cfee8 100644 --- a/stylesheets/components/AvatarEditor.scss +++ b/stylesheets/components/AvatarEditor.scss @@ -49,7 +49,7 @@ } &--photo::before { - @include button-icon('../images/icons/v3/album/album.svg'); + @include button-icon('../images/icons/v3/album/album-tilt.svg'); } &--text::before { diff --git a/stylesheets/components/AvatarPreview.scss b/stylesheets/components/AvatarPreview.scss index 3cb6702ac57..b4eb6466254 100644 --- a/stylesheets/components/AvatarPreview.scss +++ b/stylesheets/components/AvatarPreview.scss @@ -87,8 +87,8 @@ &:after { @include color-svg('../images/icons/v3/x/x-compact.svg', $color-gray-75); content: ''; - height: 14px; - width: 14px; + height: 16px; + width: 16px; } } } diff --git a/stylesheets/components/CallingButton.scss b/stylesheets/components/CallingButton.scss index db94d130103..c7360bedf46 100644 --- a/stylesheets/components/CallingButton.scss +++ b/stylesheets/components/CallingButton.scss @@ -6,6 +6,7 @@ @include color-svg($path, $color-white); height: 20px; width: 20px; + border: none; } &__icon { @@ -128,7 +129,7 @@ } &--count { - @include font-body-2-bold; + @include font-body-2; margin-inline-start: 5px; vertical-align: top; } diff --git a/stylesheets/components/CallingLobby.scss b/stylesheets/components/CallingLobby.scss index 5077d6b1fbf..eaf23c5d954 100644 --- a/stylesheets/components/CallingLobby.scss +++ b/stylesheets/components/CallingLobby.scss @@ -41,13 +41,12 @@ &::before { content: ''; display: block; - @include color-svg( - '../images/icons/v3/video/video-slash-fill-light.svg', - $color-white - ); - height: 24px; + background-image: url('../images/icons/v3/video/video-slash-fill-light-white.svg'); + background-size: 100%; + -webkit-filter: drop-shadow(0 0 4px $color-black-alpha-40); + height: 20px; margin-bottom: 8px; - width: 24px; + width: 20px; } } } diff --git a/stylesheets/components/ContactModal.scss b/stylesheets/components/ContactModal.scss index 6f6198cd9e7..a9c1835e1ac 100644 --- a/stylesheets/components/ContactModal.scss +++ b/stylesheets/components/ContactModal.scss @@ -145,25 +145,68 @@ } } - &__official-badge { - @include color-svg( - '../images/icons/v3/official/official-compact.svg', - $color-ultramarine - ); + &__official-badge, + &__official-badge__large { display: inline-block; + position: relative; + + &::before, + &::after { + content: ''; + display: block; + position: absolute; + } + + // white background behind the icon + &::before { + top: 2px; + inset-inline-start: 2px; + width: 10px; + height: 10px; + border-radius: 5px; + background: $color-white; + } + } + + &__official-badge { height: 14px; margin-inline-start: 4px; width: 14px; + + &::after { + top: 0; + inset-inline-start: 0; + width: 100%; + height: 100%; + @include color-svg( + '../images/icons/v3/official/official-compact.svg', + $color-ultramarine + ); + } } &__official-badge__large { - @include color-svg( - '../images/icons/v3/official/official.svg', - $color-ultramarine - ); - display: inline-block; height: 24px; margin-inline-start: 9px; width: 24px; + + &::before { + top: 4px; + inset-inline-start: 4px; + width: 16px; + height: 16px; + border-radius: 8px; + } + + &::after { + top: 0; + inset-inline-start: 0; + width: 100%; + height: 100%; + @include color-svg( + '../images/icons/v3/official/official.svg', + $color-ultramarine + ); + } } } diff --git a/stylesheets/components/MyStories.scss b/stylesheets/components/MyStories.scss index 33231ef71ea..4712f4bc4d2 100644 --- a/stylesheets/components/MyStories.scss +++ b/stylesheets/components/MyStories.scss @@ -160,8 +160,8 @@ '../images/icons/v3/plus/plus-compact-bold.svg', $color-white ); - height: 10px; - width: 10px; + height: 12px; + width: 12px; } } } diff --git a/stylesheets/components/ProfileEditor.scss b/stylesheets/components/ProfileEditor.scss index b9a52555e75..cf0ba561444 100644 --- a/stylesheets/components/ProfileEditor.scss +++ b/stylesheets/components/ProfileEditor.scss @@ -62,14 +62,14 @@ &::after { @include light-theme { @include color-svg( - '../images/icons/v3/compose/compose.svg', + '../images/icons/v3/edit/edit.svg', $color-gray-75 ); } @include dark-theme { @include color-svg( - '../images/icons/v3/compose/compose.svg', + '../images/icons/v3/edit/edit.svg', $color-gray-15 ); }