Update delivery status icons

This commit is contained in:
Fedor Indutny 2023-05-04 14:39:13 -07:00 committed by Josh Perez
parent f004e714f0
commit 1090a9c3e6
2 changed files with 34 additions and 11 deletions

View file

@ -1236,19 +1236,22 @@ $message-padding-horizontal: 12px;
@include only-when-page-is-visible { @include only-when-page-is-visible {
animation: rotate 4s linear infinite; animation: rotate 4s linear infinite;
} }
@include color-svg('../images/sending.svg', $color-white); @include color-svg(
'../images/icons/v3/message_status/messagestatus-sending.svg',
$color-white
);
} }
.module-message__metadata__status-icon--sent { .module-message__metadata__status-icon--sent {
@include light-theme { @include light-theme {
@include color-svg( @include color-svg(
'../images/check-circle-outline.svg', '../images/icons/v3/message_status/messagestatus-sent.svg',
$color-white-alpha-80 $color-white-alpha-80
); );
} }
@include dark-theme { @include dark-theme {
@include color-svg( @include color-svg(
'../images/check-circle-outline.svg', '../images/icons/v3/message_status/messagestatus-sent.svg',
$color-white-alpha-80 $color-white-alpha-80
); );
} }
@ -1259,10 +1262,16 @@ $message-padding-horizontal: 12px;
width: 18px; width: 18px;
@include light-theme { @include light-theme {
@include color-svg('../images/double-check.svg', $color-white-alpha-80); @include color-svg(
'../images/icons/v3/message_status/messagestatus-delivered.svg',
$color-white-alpha-80
);
} }
@include dark-theme { @include dark-theme {
@include color-svg('../images/double-check.svg', $color-white-alpha-80); @include color-svg(
'../images/icons/v3/message_status/messagestatus-delivered.svg',
$color-white-alpha-80
);
} }
} }
.module-message__metadata__status-icon--read, .module-message__metadata__status-icon--read,
@ -1272,10 +1281,16 @@ $message-padding-horizontal: 12px;
width: 18px; width: 18px;
@include light-theme { @include light-theme {
@include color-svg('../images/read.svg', $color-white-alpha-80); @include color-svg(
'../images/icons/v3/message_status/messagestatus-read.svg',
$color-white-alpha-80
);
} }
@include dark-theme { @include dark-theme {
@include color-svg('../images/read.svg', $color-white-alpha-80); @include color-svg(
'../images/icons/v3/message_status/messagestatus-read.svg',
$color-white-alpha-80
);
} }
} }

View file

@ -109,23 +109,31 @@
&--Read:after { &--Read:after {
// Viewed and read deliberately have the same icon. // Viewed and read deliberately have the same icon.
width: 18px; width: 18px;
@include normal-icon('../images/read.svg'); @include normal-icon(
'../images/icons/v3/message_status/messagestatus-read.svg'
);
} }
&--Delivered:after { &--Delivered:after {
width: 18px; width: 18px;
@include normal-icon('../images/double-check.svg'); @include normal-icon(
'../images/icons/v3/message_status/messagestatus-delivered.svg'
);
} }
&--Sent:after { &--Sent:after {
width: 12px; width: 12px;
@include normal-icon('../images/check-circle-outline.svg'); @include normal-icon(
'../images/icons/v3/message_status/messagestatus-sent.svg'
);
} }
&--Pending:after { &--Pending:after {
width: 12px; width: 12px;
animation: rotate 4s linear infinite; animation: rotate 4s linear infinite;
@include normal-icon('../images/sending.svg'); @include normal-icon(
'../images/icons/v3/message_status/messagestatus-sending.svg'
);
} }
} }