From 925fa4ca50215e7d4ba0e7d72b1b77ad3f0b5a38 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Thu, 27 Oct 2022 12:04:02 +0000
Subject: [PATCH] left_sidebar: Make topics list header sticky.

Fixes #22911

`Back to streams`, stream name and filter topics are all sticky
now and their color changes based on which filter is active and
the currently applied theme.
---
 static/styles/dark_theme.css   | 15 +++++++++++++++
 static/styles/left_sidebar.css | 23 +++++++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/static/styles/dark_theme.css b/static/styles/dark_theme.css
index 12e69c3a55..1131c1312b 100644
--- a/static/styles/dark_theme.css
+++ b/static/styles/dark_theme.css
@@ -615,6 +615,21 @@ body.dark-theme {
         }
     }
 
+    #stream_filters .narrow-filter.active-filter {
+        .topic-list .filter-topics,
+        > .bottom_left_row {
+            background-color: hsl(208, 31%, 24%);
+        }
+    }
+
+    .zoom-in {
+        #topics_header,
+        .narrow-filter > .bottom_left_row,
+        #stream_filters .topic-list .filter-topics {
+            background-color: hsl(212, 28%, 18%);
+        }
+    }
+
     #user_presences li:hover,
     #user_presences li.highlighted_user {
         background-color: hsla(136, 25%, 73%, 0.2);
diff --git a/static/styles/left_sidebar.css b/static/styles/left_sidebar.css
index 4dc33d31b8..9d975b423d 100644
--- a/static/styles/left_sidebar.css
+++ b/static/styles/left_sidebar.css
@@ -118,6 +118,10 @@ li.show-more-topics {
 
                 &.filter-topics {
                     padding-bottom: 0;
+                    position: sticky;
+                    top: 43px;
+                    z-index: 2;
+                    background-color: hsl(0, 0%, 100%);
                 }
 
                 .input-append.topic_search_section {
@@ -373,6 +377,13 @@ li.active-sub-filter {
     border-radius: 4px;
 }
 
+#stream_filters .narrow-filter.active-filter {
+    .topic-list .filter-topics,
+    > .bottom_left_row {
+        background-color: hsl(202, 56%, 91%);
+    }
+}
+
 #global_filters {
     margin-bottom: $sections_vertical_gutter;
 
@@ -611,6 +622,10 @@ li.topic-list-item {
 }
 
 #topics_header {
+    position: sticky;
+    top: 0;
+    background-color: hsl(0, 0%, 100%);
+    z-index: 2;
     margin-right: 10px;
     color: hsl(0, 0%, 43%);
 
@@ -702,6 +717,14 @@ li.topic-list-item {
 }
 
 .zoom-in {
+    .narrow-filter > .bottom_left_row {
+        position: sticky;
+        top: 20px;
+        z-index: 2;
+        padding-bottom: 1px;
+        background-color: hsl(0, 0%, 100%);
+    }
+
     .show-more-topics {
         display: none;
     }