From 1bffdda59f9b0cd23534793201965249d02aa9f2 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Sat, 13 May 2023 08:50:52 +0000
Subject: [PATCH] scheduled_message_overlay: Add a failed delivery indicator.

Fixes #25501
---
 web/shared/icons/exclamation-circle.svg        |  1 +
 web/src/tippyjs.js                             |  1 +
 web/styles/zulip.css                           | 18 ++++++++++++++++--
 .../scheduled_message_stream_pm_common.hbs     |  5 +++++
 4 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 web/shared/icons/exclamation-circle.svg

diff --git a/web/shared/icons/exclamation-circle.svg b/web/shared/icons/exclamation-circle.svg
new file mode 100644
index 0000000000..d40c871ef8
--- /dev/null
+++ b/web/shared/icons/exclamation-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z"></path></svg>
\ No newline at end of file
diff --git a/web/src/tippyjs.js b/web/src/tippyjs.js
index 13e069feda..a591d23de1 100644
--- a/web/src/tippyjs.js
+++ b/web/src/tippyjs.js
@@ -405,6 +405,7 @@ export function initialize() {
             "#stream-specific-notify-table .unmute_stream",
             "#add_streams_tooltip",
             "#filter_streams_tooltip",
+            ".error-icon-message-recipient .zulip-icon",
         ],
         appendTo: () => document.body,
     });
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index fdceeaf617..38791d20d9 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -88,6 +88,7 @@ body,
     --color-background-hover-narrow-filter: hsl(120deg 12.3% 71.4% / 38%);
     --color-navbar-bottom-border: hsl(0deg 0% 80%);
     --color-unread-marker: hsl(217deg 100% 50%);
+    --color-failed-message-send-icon: hsl(0deg 100% 50%);
 }
 
 %dark-theme {
@@ -227,7 +228,6 @@ p.n-margin {
     display: none;
 }
 
-.scheduled-messages-loading-logo,
 .alert-zulip-logo,
 .top-messages-logo,
 .bottom-messages-logo {
@@ -1096,7 +1096,7 @@ td.pointer {
 
         .failed_message_action {
             opacity: 1 !important;
-            color: hsl(0deg 100% 50%);
+            color: var(--color-failed-message-send-icon);
             font-weight: bold;
             padding: 1px;
         }
@@ -3135,3 +3135,17 @@ select.invite-as {
         display: none;
     }
 }
+
+#scheduled_messages_overlay .error-icon-message-recipient {
+    width: 15px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-grow: 1;
+    color: var(--color-failed-message-send-icon);
+
+    .zulip-icon {
+        padding: 5px;
+    }
+}
diff --git a/web/templates/scheduled_message_stream_pm_common.hbs b/web/templates/scheduled_message_stream_pm_common.hbs
index 0eb840887c..56d6572663 100644
--- a/web/templates/scheduled_message_stream_pm_common.hbs
+++ b/web/templates/scheduled_message_stream_pm_common.hbs
@@ -1 +1,6 @@
+{{#if failed}}
+<div class="error-icon-message-recipient">
+    <i class="zulip-icon zulip-icon-exclamation-circle" data-tippy-content="{{t 'Message could not be sent at the scheduled time. Reschedule by editing it.' }}"></i>
+</div>
+{{/if}}
 <div class="recipient_row_date">{{ formatted_send_at_time }}</div>