css: Implement new design.

frontend_tests/node_tests/drafts.js

@@ -516,7 +516,7 @@ test("format_drafts", ({override_rewire, mock_template}) => {
             draft_id: "id1",
             is_stream: true,
             stream_name: "stream",
-            stream_color: "#FFFFFF",
+            recipient_bar_color: "#ffffff",
             topic: "topic",
             raw_content: "Test stream message",
             time_stamp: "7:55 AM",
@@ -546,7 +546,7 @@ test("format_drafts", ({override_rewire, mock_template}) => {
             draft_id: "id3",
             is_stream: true,
             stream_name: "stream 2",
-            stream_color: "#FFFFFF",
+            recipient_bar_color: "#ffffff",
             topic: "topic",
             raw_content: "Test stream message 2",
             time_stamp: "Jan 21",
@@ -679,7 +679,7 @@ test("filter_drafts", ({override_rewire, mock_template}) => {
             draft_id: "id1",
             is_stream: true,
             stream_name: "stream",
-            stream_color: "#FFFFFF",
+            recipient_bar_color: "#ffffff",
             topic: "topic",
             raw_content: "Test stream message",
             time_stamp: "7:55 AM",
@@ -688,7 +688,7 @@ test("filter_drafts", ({override_rewire, mock_template}) => {
             draft_id: "id3",
             is_stream: true,
             stream_name: "stream 2",
-            stream_color: "#FFFFFF",
+            recipient_bar_color: "#ffffff",
             topic: "topic",
             raw_content: "Test stream message 2",
             time_stamp: "Jan 21",

static/js/dark_theme.js

@@ -1,10 +1,14 @@
 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.update_recipient_bar_background_color();
+    floating_recipient_bar.update_recipient_color();
 
     if (page_params.is_spectator) {
         const ls = localstorage();
@@ -14,6 +18,8 @@ export function enable() {
 
 export function disable() {
     $(":root").removeClass("color-scheme-automatic").removeClass("dark-theme");
+    message_lists.current.view.update_recipient_bar_background_color();
+    floating_recipient_bar.update_recipient_color();
 
     if (page_params.is_spectator) {
         const ls = localstorage();

static/js/floating_recipient_bar.js

@@ -4,6 +4,7 @@ import * as blueslip from "./blueslip";
 import * as message_lists from "./message_lists";
 import * as message_store from "./message_store";
 import * as rows from "./rows";
+import * as stream_color from "./stream_color";
 import * as timerender from "./timerender";
 
 let is_floating_recipient_bar_showing = false;
@@ -331,3 +332,11 @@ export function update() {
 
     replace_floating_recipient_bar(items[0]);
 }
+
+export function update_recipient_color() {
+    if (!is_floating_recipient_bar_showing) {
+        return;
+    }
+    const $stream_header = $("#floating_recipient_bar").find(".message_header_stream");
+    stream_color.update_stream_recipient_color($stream_header);
+}

static/js/message_list_view.js

@@ -1446,4 +1446,13 @@ export class MessageListView {
             message_container.status_message = false;
         }
     }
+
+    update_recipient_bar_background_color() {
+        const $table = rows.get_table(this.table_name);
+        const $stream_headers = $table.find(".message_header_stream");
+        for (const stream_header of $stream_headers) {
+            const $stream_header = $(stream_header);
+            stream_color.update_stream_recipient_color($stream_header);
+        }
+    }
 }

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

@@ -4,6 +4,7 @@ import $ from "jquery";
 import {$t} from "./i18n";
 import * as message_view_header from "./message_view_header";
 import * as settings_data from "./settings_data";
+import * as stream_data from "./stream_data";
 import * as stream_settings_ui from "./stream_settings_ui";
 
 export function get_stream_privacy_icon_color(color) {
@@ -24,13 +25,26 @@ export function get_recipient_bar_color(color) {
     return chroma.mix(color, using_dark_theme ? "black" : "white", 0.8, "rgb").hex();
 }
 
+export function update_stream_recipient_color($stream_header) {
+    if ($stream_header.length) {
+        const stream_id = Number.parseInt($($stream_header).attr("data-stream-id"), 10);
+        const stream_name = stream_data.maybe_get_stream_name(stream_id);
+        if (!stream_name) {
+            return;
+        }
+        const stream_color = stream_data.get_color(stream_name);
+        const recipient_bar_color = get_recipient_bar_color(stream_color);
+        $stream_header.css("background-color", recipient_bar_color);
+    }
+}
+
 function update_table_stream_color(table, stream_name, color) {
     const recipient_bar_color = 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/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,
@@ -824,11 +811,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;