recipient_row: Set color of privacy icon as a shade of stream color.

web/src/drafts.js

@@ -9,7 +9,6 @@ import render_draft_table_body from "../templates/draft_table_body.hbs";
 
 import * as blueslip from "./blueslip";
 import * as browser_history from "./browser_history";
-import * as color_class from "./color_class";
 import * as compose from "./compose";
 import * as compose_actions from "./compose_actions";
 import * as compose_fade from "./compose_fade";
@@ -25,6 +24,7 @@ import * as narrow_state from "./narrow_state";
 import * as overlays from "./overlays";
 import * as people from "./people";
 import * as rendered_markdown from "./rendered_markdown";
+import * as stream_color from "./stream_color";
 import * as stream_data from "./stream_data";
 import * as sub_store from "./sub_store";
 import * as timerender from "./timerender";
@@ -370,10 +370,11 @@ export function format_draft(draft) {
             draft_id: draft.id,
             is_stream: true,
             stream_name,
-            stream_color: draft_stream_color,
+            stream_privacy_icon_color:
-            dark_background: color_class.get_css_class(draft_stream_color),
+                stream_color.get_stream_privacy_icon_color(draft_stream_color),
             topic: draft_topic,
             raw_content: draft.content,
+            stream_id: draft.stream_id,
             time_stamp,
             invite_only,
             is_web_public,

web/src/message_list_view.js

@@ -29,6 +29,7 @@ import * as popovers from "./popovers";
 import * as reactions from "./reactions";
 import * as rendered_markdown from "./rendered_markdown";
 import * as rows from "./rows";
+import * as stream_color from "./stream_color";
 import * as stream_data from "./stream_data";
 import * as sub_store from "./sub_store";
 import * as submessage from "./submessage";
@@ -175,6 +176,8 @@ function populate_group_from_message_container(group, message_container) {
     if (group.is_stream) {
         group.background_color = stream_data.get_color(message_container.msg.stream);
         group.color_class = color_class.get_css_class(group.background_color);
+        const color = stream_data.get_color(message_container.msg.stream);
+        group.stream_privacy_icon_color = stream_color.get_stream_privacy_icon_color(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;

web/src/stream_color.js

@@ -1,3 +1,4 @@
+import {colord, extend} from "colord";
 import $ from "jquery";
 
 import * as color_class from "./color_class";
@@ -5,10 +6,22 @@ import {$t} from "./i18n";
 import * as message_view_header from "./message_view_header";
 import * as stream_settings_ui from "./stream_settings_ui";
 
-function update_table_stream_color(table, stream_name, color) {
+extend([lchPlugin]);
-    // This is ugly, but temporary, as the new design will make it
+
-    // so that we only have color in the headers.
+export function get_stream_privacy_icon_color(color) {
-    const style = color;
+    // LCH stands for Lightness, Chroma, and Hue.
+    // This function restricts Lightness of a color to be between 20 to 75.
+    color = colord(color).toLch();
+    const min_color_l = 20;
+    const max_color_l = 75;
+    if (color.l < min_color_l) {
+        color.l = min_color_l;
+    } else if (color.l > max_color_l) {
+        color.l = max_color_l;
+    }
+    return colord(color).toHex();
+}
+
 
     const $stream_labels = table.find(".stream_label");
 
@@ -36,7 +49,10 @@ function update_table_stream_color(table, stream_name, color) {
 }
 
 function update_stream_privacy_color(id, color) {
-    $(`.stream-privacy-${CSS.escape(id)}`).css("color", color);
+    $(`.stream-privacy-original-color-${CSS.escape(id)}`).css("color", color);
+    color = get_stream_privacy_icon_color(color);
+    // `modified-color` is only used in recipient bars.
+    $(`.stream-privacy-modified-color-${CSS.escape(id)}`).css("color", color);
 }
 
 function update_historical_message_color(stream_name, color) {

web/templates/draft.hbs

@@ -4,7 +4,7 @@
         <div class="message_header message_header_stream">
             <div class="message-header-contents">
                 <div class="message_label_clickable stream_label">
-                    <span class="stream-privacy filter-icon">
+                    <span class="stream-privacy-modified-color-{{stream_id}} stream-privacy filter-icon"  style="color: {{stream_privacy_icon_color}}">
                         {{> stream_privacy}}
                     </span>
                     {{stream_name}}

web/templates/recent_topic_row.hbs

@@ -6,7 +6,7 @@
                 <span class="fa fa-envelope"></span>
                 <a href="{{pm_url}}">Direct messages</a>
                 {{else}}
-                <span class="stream-privacy-{{stream_id}} stream-privacy filter-icon" style="color: {{stream_color}}">
+                <span class="stream-privacy-original-color-{{stream_id}} stream-privacy filter-icon" style="color: {{stream_color}}">
                     {{> stream_privacy }}
                 </span>
                 <a href="{{topic_url}}">{{stream}}</a>

web/templates/recipient_row.hbs

@@ -6,7 +6,7 @@
           style="background: {{background_color}}; border-left-color: {{background_color}};"
           href="{{stream_url}}"
           title="{{t 'Narrow to stream "{display_recipient}"' }}">
-            <span class="stream-privacy filter-icon">
+            <span class="stream-privacy-modified-color-{{stream_id}} stream-privacy filter-icon"  style="color: {{stream_privacy_icon_color}}">
                 {{> stream_privacy}}
             </span>
 

web/templates/settings/stream_specific_notification_row.hbs

@@ -1,6 +1,6 @@
 <tr class="stream-notifications-row {{#if muted}}control-label-disabled{{/if}}" data-stream-id="{{stream.stream_id}}">
     <td>
-        <span class="stream-privacy-{{stream.stream_id}} stream-privacy filter-icon" style="color: {{stream.color}}">
+        <span class="stream-privacy-original-color-{{stream.stream_id}} stream-privacy filter-icon" style="color: {{stream.color}}">
             {{> ../stream_privacy
               invite_only=stream.invite_only
               is_web_public=stream.is_web_public }}

web/templates/stream_sidebar_actions.hbs

@@ -2,7 +2,7 @@
 <ul class="nav nav-list streams_popover" data-stream-id="{{ stream.stream_id }}" data-name="{{ stream.name }}">
     <li>
         <p class="topic-name">
-            <span class="stream-privacy-{{stream.stream_id}} stream-privacy filter-icon" style="color: {{stream.color}}">
+            <span class="stream-privacy-original-color-{{stream.stream_id}} stream-privacy filter-icon" style="color: {{stream.color}}">
                 {{> stream_privacy
                   invite_only=stream.invite_only
                   is_web_public=stream.is_web_public }}

web/templates/stream_sidebar_row.hbs

@@ -4,7 +4,7 @@
     <div class="bottom_left_row">
         <div class="subscription_block selectable_sidebar_block">
 
-            <span class="stream-privacy-{{id}} stream-privacy filter-icon" style="color: {{color}}">
+            <span class="stream-privacy-original-color-{{id}} stream-privacy filter-icon" style="color: {{color}}">
                 {{> stream_privacy }}
             </span>
 

web/templates/user_stream_list_item.hbs

@@ -1,6 +1,6 @@
 <tr data-stream-id="{{stream_id}}">
     <td class="subscription_list_stream">
-        <span class="stream-privacy-{{stream_id}} stream-privacy filter-icon" style="color: {{stream_color}}">
+        <span class="stream-privacy-original-color-{{stream_id}} stream-privacy filter-icon" style="color: {{stream_color}}">
             {{> stream_privacy }}
         </span>
         <a class = "stream_list_item" href="{{stream_edit_url}}">{{name}}</a>