css: Implement new design.

static/js/dark_theme.js

@@ -1,10 +1,15 @@
 import $ from "jquery";
 
+import * as floating_recipient_bar from "./floating_recipient_bar";
 import {localstorage} from "./localstorage";
+import * as message_lists from "./message_lists";
 import {page_params} from "./page_params";
 
+
 export function enable() {
     $(":root").removeClass("color-scheme-automatic").addClass("dark-theme");
+    message_lists.current.view.rerender_preserving_scrolltop();
+    floating_recipient_bar.update();
 
     if (page_params.is_spectator) {
         const ls = localstorage();
@@ -14,6 +19,8 @@ export function enable() {
 
 export function disable() {
     $(":root").removeClass("color-scheme-automatic").removeClass("dark-theme");
+    message_lists.current.view.rerender_preserving_scrolltop();
+    floating_recipient_bar.update();
 
     if (page_params.is_spectator) {
         const ls = localstorage();

static/js/message_list_view.js

@@ -192,9 +192,9 @@ function populate_group_from_message_container(group, message_container) {
     group.is_private = message_container.msg.is_private;
 
     if (group.is_stream) {
-        const stream_color = stream_data.get_color(message_container.msg.stream)
+        const stream_color = stream_data.get_color(message_container.msg.stream);
         group.recipient_bar_color = stream_data.get_recipient_bar_color(stream_color);
-        group.stream_privacy_icon_color = stream_data.get_stream_privacy_icon_color(stream_color)
+        group.stream_privacy_icon_color = stream_data.get_stream_privacy_icon_color(stream_color);
         group.invite_only = stream_data.is_invite_only_by_stream_name(message_container.msg.stream);
         group.is_web_public = stream_data.is_web_public(message_container.msg.stream_id);
         group.topic = message_container.msg.topic;

static/js/stream_bar.js

@@ -33,5 +33,5 @@ export function decorate(stream_name, $element, is_compose) {
     if (is_compose) {
         update_compose_stream_icon(stream_name);
     }
-    $element.css("background-color", color)
+    $element.css("background-color", color);
 }

static/js/stream_color.js

@@ -2,16 +2,16 @@ import $ from "jquery";
 
 import {$t} from "./i18n";
 import * as message_view_header from "./message_view_header";
-import * as stream_settings_ui from "./stream_settings_ui";
 import * as stream_data from "./stream_data";
+import * as stream_settings_ui from "./stream_settings_ui";
 
 function update_table_stream_color(table, stream_name, color) {
     const recipient_bar_color = stream_data.get_recipient_bar_color(color);
     const $stream_labels = $("#floating_recipient_bar").add(table).find(".stream_label");
     for (const label of $stream_labels) {
         const $label = $(label);
         if ($label.text().trim() === stream_name) {
-            $label.css({background: recipient_bar_color, "border-left-color": recipient_bar_color});
+            $label.closest(".message_header_stream").css({background: recipient_bar_color});
         }
     }
 }

static/js/stream_data.js

@@ -8,7 +8,7 @@ import {page_params} from "./page_params";
 import * as peer_data from "./peer_data";
 import * as people from "./people";
 import * as settings_config from "./settings_config";
-import *  as settings_data from "./settings_data";
+import * as settings_data from "./settings_data";
 import * as stream_topic_history from "./stream_topic_history";
 import * as sub_store from "./sub_store";
 import {user_settings} from "./user_settings";
@@ -872,6 +872,6 @@ export function get_stream_privacy_icon_color(color) {
         return chroma(color).set("lch.l", min_color_l).hex();
     } else if (color_l > max_color_l) {
         return chroma(color).set("lch.l", max_color_l).hex();
-    } 
+    }
     return color;
 }

static/styles/dark_theme.css

@@ -141,7 +141,6 @@
     .app-main,
     .header-main,
     #message_view_header_underpadding,
-    .floating_recipient .message-header-contents,
     .column-middle,
     #compose,
     .column-left .left-sidebar,
@@ -448,20 +447,12 @@
         border-color: hsla(0, 0%, 0%, 0.9);
     }
 
-    .message-header-contents,
-    .message_header_private_message .message-header-contents {
-        background-color: hsla(0, 0%, 0%, 0.2);
-        border-color: transparent;
-    }
-
     .compose_control_buttons_container .divider {
         color: hsla(236, 33%, 90%, 0.5);
     }
 
     /* Not that .message_row (below) needs to be more contrast on dark theme */
     #compose-content,
-    .message_list .recipient_row,
-    .message_row,
     .draft-row .draft-info-box,
     .preview_message_area {
         border-color: hsla(0, 0%, 0%, 0.2);
@@ -698,10 +689,6 @@
         background-color: hsla(136, 25%, 73%, 0.2);
     }
 
-    .floating_recipient .recipient_row {
-        border-top: none;
-    }
-
     .group-row.active,
     .stream-row.active,
     .emoji-info-popover .emoji-showcase-container,
@@ -825,11 +812,6 @@
         border-color: hsla(0, 0%, 0%, 0.2);
     }
 
-    .draft-row .draft-info-box,
-    .message_header_private_message .message-header-contents {
-        box-shadow: none;
-    }
-
     .draft-row .message_header_private_message .message_label_clickable {
         padding: 4px 6px 3px;
         color: inherit;

static/styles/message_recipient_bar.css

@@ -1,13 +1,25 @@
 :root {
     color-scheme: light;
 
-    --color-background-private-message-header: hsl(0, 0%, 27%);
+    --color-background-private-message-header: hsl(46, 35%, 93%);
     --color-text-private-message-header: hsl(0, 0%, 100%);
+    --color-background-private-message-content: hsla(45, 20%, 96%);
+    --color-text-message-header: hsl(0, 0%, 15%);
+    --color-stream-message-header-box-shadow: #E5E5E5;
+    --color-private-message-header-box-shadow: #D7D7D7;
+    --color-message-header-icon-non-interactive-non-interactive: hsl(0, 0%, 0%, 0.3);
+    --color-message-header-icon-interactive: hsl(0, 0%, 0%);
 }
 
 :root.dark-theme {
-    --color-background-private-message-header: hsl(0, 0%, 27%);
+    --color-background-private-message-header: hsl(46, 25%, 20%);
     --color-text-private-message-header: hsl(0, 0%, 100%);
+    --color-background-private-message-content: hsl(46, 25%, 14%);
+    --color-text-message-header: hsl(0, 0%, 100%);
+    --color-stream-message-header-box-shadow: hsl(0, 0%, 10%);
+    --color-private-message-header-box-shadow: hsl(0, 0%, 10%);
+    --color-message-header-icon-non-interactive-non-interactive: hsl(0, 0%, 100%, 0.3);
+    --color-message-header-icon-interactive: hsl(0, 0%, 100%);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -27,18 +39,18 @@
         border-collapse: separate;
         width: 100%;
         position: relative;
+        border-radius: 5px 5px 0 0;
 
-        .recipient_row {
-            border-top: 1px solid hsl(0, 0%, 88%);
+        .message_header {
+            border-radius: 5px 5px 0 0;
         }
-    
+
         .recipient_row_date.hide-date {
             display: block;
         }
-
-        .message_header_private_message {
-            border-bottom: 0;
-            border-left: 0;
+
+        .recipient_row {
+            border-radius: 5px 5px 0 0;
         }
     }
 }
@@ -54,44 +66,72 @@
     line-height: 14px;
     position: relative;
     z-index: 0;
+    border-bottom: 0;
+    border-radius: 5px 5px 0 0;
 
     .message-header-contents {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        border-right: 1px solid hsl(0, 0%, 88%);
-        background-color: hsl(0, 0%, 88%);
+        height: 28px;
     }
 
     &.message_header_private_message {
+        /* This is required for box-shadow appear above the message content. */
+        z-index: 1;
+        box-shadow: 0 1px 0 var(--color-private-message-header-box-shadow);
+
         .message_label_clickable {
             background-color: var(--color-background-private-message-header);
-            display: inline-block;
-            padding: 3px 6px 2px;
-            font-weight: normal;
+            display: flex;
+            padding: 5px 0 5px 11px;
+            font-weight: 600;
             height: 17px;
             line-height: 17px;
-            border-left-color: var(--color-background-private-message-header);
-            color: var(--color-text-private-message-header);
+            color: var(--color-text-message-header);
+
+            &:hover {
+                color: var(--color-text-message-header) !important;
+                text-decoration: none;
+            }
+
+            .private_message_header_icon {
+                font-size: 15px;
+                position: relative;
+                top: 1px;
+                width: 16px;
+                height: 16px;
+            }
         }
 
         /* Base color backgrounds for message boxes,
            private messages, mentions, and unread messages */
-    
+
         .message-header-contents {
-            background-color: hsla(192, 19%, 75%, 0.2);
-            box-shadow: inset 1px 1px 0 hsl(0, 0%, 88%);
+            background-color: var(--color-background-private-message-header);
         }
     }
 
     &.message_header_stream {
+        box-shadow: 0 1px 0 var(--color-stream-message-header-box-shadow);
+
         a.message_label_clickable {
-            color: inherit;
+            color: var(--color-text-message-header);
+
+            &:hover {
+                color: var(--color-text-message-header) !important;
+                text-decoration: none;
+            }
+        }
+
+        .stream_topic_separator {
+            line-height: 0;
+            color: var(--color-message-header-icon-non-interactive);
         }
 
         .stream_topic {
             display: inline-block;
-            padding: 3px 3px 2px 9px;
+            padding: 5px 6px 5px 2px;   
             height: 17px;
             line-height: 17px;
             overflow: hidden;
@@ -101,46 +141,42 @@
 
     /* Creates the |=={Recipient}=> style for stream name and PM recipients */
     .stream_label {
-        display: inline-block;
-        padding: 4px 6px 3px;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 5px 2px 5px 11px;
         font-weight: normal;
         height: 17px;
         line-height: 17px;
-        border-color: hsla(0, 0%, 0%, 0) hsla(0, 0%, 0%, 0) hsla(0, 0%, 0%, 0)
-            hsl(0, 0%, 88%);
-        background-color: hsl(0, 0%, 88%);
-        border-width: 0;
         position: relative;
         text-decoration: none;
-    
+
         .recipient-row-stream-icon {
             font-size: 12px;
             line-height: 12px;
         }
-    
+
         .zulip-icon.zulip-icon-globe {
             position: relative;
             top: 1px;
         }
-    
+
         &:hover {
             text-decoration: none;
         }
+
+        .stream-privacy {
+            min-width: unset;
+            width: 16px;
+            height: 16px;
+
+            .hashtag {
+                padding-right: 0;
 
-        &::after {
-            left: 100%;
-            top: 50%;
-            content: " ";
-            height: 0;
-            width: 0;
-            position: absolute;
-            pointer-events: none;
-            margin-top: -11px;
-            border-style: solid;
-            border-width: 11px 0 11px 5px;
-            border-color: inherit;
-            z-index: 2;
-            transform: scale(0.9999);
+                &::after {
+                    font-size: 16px;
+                }
+            }
         }
     }
 
@@ -149,22 +185,28 @@
         flex-grow: 1;
         align-items: center;
     }
-    
+
     .recipient_row_date {
         color: hsl(0, 0%, 53%);
         font-size: 12px;
         font-weight: 600;
         padding: 3px 11px 2px 10px;
         height: 17px;
         line-height: 17px;
-    
+
         &.hide-date {
             display: none;
         }
     }
-    
+
     .recipient_bar_icon {
-        padding-left: 4px;
-        padding-right: 4px;
-    }    
+        color: var(--color-message-header-icon-interactive);
+        opacity: 0.2;
+        padding-left: 6px;
+        padding-right: 6px;
+
+        &:hover {
+            opacity: 0.4 !important;
+        }
+    }
 }