Update delivery status icons
This commit is contained in:
parent
f004e714f0
commit
1090a9c3e6
2 changed files with 34 additions and 11 deletions
|
@ -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
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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'
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue