From a80500cf5d6a1d82d97a9b2e56586a74fa433ef9 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Mon, 3 Oct 2022 02:26:40 +0000
Subject: [PATCH] css: Don't add unread indicator to the date row of first
 unread row.

Fixes #23030

If the first unread `.message_row` has a date_row, we don't show
unread indicator on it.
---
 static/styles/dark_theme.css | 14 ++++++++++++++
 static/styles/zulip.css      | 22 ++++++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/static/styles/dark_theme.css b/static/styles/dark_theme.css
index 34f004db3c..a4c0c3e639 100644
--- a/static/styles/dark_theme.css
+++ b/static/styles/dark_theme.css
@@ -401,6 +401,20 @@ body.dark-theme {
         border-color: hsla(0, 0%, 0%, 0.2);
     }
 
+    .recipient_row {
+        .message_row.unread {
+            .date_row {
+                background-color: hsl(212, 28%, 18%);
+            }
+        }
+
+        .message_row.unread ~ .message_row.unread {
+            .date_row {
+                background-color: transparent;
+            }
+        }
+    }
+
     .top-navbar-border {
         border-color: hsla(0, 0%, 0%, 0.6);
     }
diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index 5aa30261de..13fcade662 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -3067,3 +3067,25 @@ div.topic_edit_spinner .loading_indicator_spinner {
         }
     }
 }
+
+.recipient_row {
+    /* See https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class/8539107#8539107
+       for details on how this works */
+    .message_row.unread {
+        .date_row {
+            position: relative;
+            z-index: 1;
+            background-color: hsl(0, 0%, 100%);
+        }
+    }
+
+    /* Select all but the first .message_row.unread,
+       and remove the properties set from the previous rule. */
+    .message_row.unread ~ .message_row.unread {
+        .date_row {
+            position: unset;
+            z-index: 0;
+            background-color: transparent;
+        }
+    }
+}