From 1090a9c3e670284f2e6fb10d42a712687a2fc865 Mon Sep 17 00:00:00 2001
From: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
Date: Thu, 4 May 2023 14:39:13 -0700
Subject: [PATCH] Update delivery status icons

---
 stylesheets/_modules.scss                 | 29 +++++++++++++++++------
 stylesheets/components/MessageDetail.scss | 16 +++++++++----
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 315ccceb159..07b4cf521a1 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -1236,19 +1236,22 @@ $message-padding-horizontal: 12px;
   @include only-when-page-is-visible {
     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 {
   @include light-theme {
     @include color-svg(
-      '../images/check-circle-outline.svg',
+      '../images/icons/v3/message_status/messagestatus-sent.svg',
       $color-white-alpha-80
     );
   }
   @include dark-theme {
     @include color-svg(
-      '../images/check-circle-outline.svg',
+      '../images/icons/v3/message_status/messagestatus-sent.svg',
       $color-white-alpha-80
     );
   }
@@ -1259,10 +1262,16 @@ $message-padding-horizontal: 12px;
   width: 18px;
 
   @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 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,
@@ -1272,10 +1281,16 @@ $message-padding-horizontal: 12px;
   width: 18px;
 
   @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 color-svg('../images/read.svg', $color-white-alpha-80);
+    @include color-svg(
+      '../images/icons/v3/message_status/messagestatus-read.svg',
+      $color-white-alpha-80
+    );
   }
 }
 
diff --git a/stylesheets/components/MessageDetail.scss b/stylesheets/components/MessageDetail.scss
index d2700f25faa..564cb427522 100644
--- a/stylesheets/components/MessageDetail.scss
+++ b/stylesheets/components/MessageDetail.scss
@@ -109,23 +109,31 @@
   &--Read:after {
     // Viewed and read deliberately have the same icon.
     width: 18px;
-    @include normal-icon('../images/read.svg');
+    @include normal-icon(
+      '../images/icons/v3/message_status/messagestatus-read.svg'
+    );
   }
 
   &--Delivered:after {
     width: 18px;
-    @include normal-icon('../images/double-check.svg');
+    @include normal-icon(
+      '../images/icons/v3/message_status/messagestatus-delivered.svg'
+    );
   }
 
   &--Sent:after {
     width: 12px;
-    @include normal-icon('../images/check-circle-outline.svg');
+    @include normal-icon(
+      '../images/icons/v3/message_status/messagestatus-sent.svg'
+    );
   }
 
   &--Pending:after {
     width: 12px;
     animation: rotate 4s linear infinite;
-    @include normal-icon('../images/sending.svg');
+    @include normal-icon(
+      '../images/icons/v3/message_status/messagestatus-sending.svg'
+    );
   }
 }