From f9bf688c9e3fb80466e2a60600b4ed1b58550072 Mon Sep 17 00:00:00 2001
From: evykassirer <evy.kassirer@gmail.com>
Date: Mon, 24 Apr 2023 16:24:50 -0700
Subject: [PATCH] compose: Add DM icon to the recipient dropdown.

This commit adds the new users icon and uses it in the
recipient dropdown, both in the selection options and
the selected option displayed on the button.
---
 web/images/icons/users.svg               | 6 ++++++
 web/src/compose_actions.js               | 5 ++++-
 web/src/compose_recipient.js             | 1 +
 web/styles/app_components.css            | 4 +++-
 web/templates/settings/dropdown_list.hbs | 2 ++
 5 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 web/images/icons/users.svg

diff --git a/web/images/icons/users.svg b/web/images/icons/users.svg
new file mode 100644
index 0000000000..b54475b48c
--- /dev/null
+++ b/web/images/icons/users.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.99964 1.33594C4.15961 1.33594 2.66797 2.82757 2.66797 4.6676C2.66797 6.50763 4.15961 7.99927 5.99964 7.99927C7.83966 7.99927 9.3313 6.50763 9.3313 4.6676C9.3313 2.82757 7.83966 1.33594 5.99964 1.33594ZM3.99797 4.6676C3.99797 3.56211 4.89415 2.66594 5.99964 2.66594C7.10513 2.66594 8.0013 3.56211 8.0013 4.6676C8.0013 5.77309 7.10513 6.66927 5.99964 6.66927C4.89415 6.66927 3.99797 5.77309 3.99797 4.6676Z" fill="black"/>
+<path d="M3.33362 9.33594C2.45001 9.33594 1.60258 9.68695 0.977776 10.3118C0.352967 10.9366 0.00195312 11.784 0.00195312 12.6676V14.0009C0.00195312 14.3682 0.299684 14.6659 0.666953 14.6659C1.03422 14.6659 1.33195 14.3682 1.33195 14.0009V12.6676C1.33195 12.1367 1.54284 11.6276 1.91823 11.2522C2.29361 10.8768 2.80275 10.6659 3.33362 10.6659H8.66695C9.19783 10.6659 9.70696 10.8768 10.0823 11.2522C10.4577 11.6276 10.6686 12.1367 10.6686 12.6676V14.0009C10.6686 14.3682 10.9664 14.6659 11.3336 14.6659C11.7009 14.6659 11.9986 14.3682 11.9986 14.0009V12.6676C11.9986 11.784 11.6476 10.9366 11.0228 10.3118C10.398 9.68695 9.55057 9.33594 8.66695 9.33594H3.33362Z" fill="black"/>
+<path d="M12.6892 9.92079C12.7811 9.56518 13.1438 9.35134 13.4994 9.44315C14.2141 9.6277 14.8474 10.0444 15.2996 10.6278C15.7519 11.2112 15.9976 11.9283 15.9981 12.6665V14.0004C15.9981 14.3676 15.7004 14.6654 15.3331 14.6654C14.9659 14.6654 14.6681 14.3676 14.6681 14.0004V12.6672C14.6677 12.2238 14.5201 11.7931 14.2485 11.4427C13.9767 11.0921 13.5963 10.8418 13.1669 10.7309C12.8113 10.6391 12.5974 10.2764 12.6892 9.92079Z" fill="black"/>
+<path d="M10.8321 1.44282C10.4763 1.35172 10.114 1.5663 10.0229 1.92209C9.9318 2.27788 10.1464 2.64016 10.5022 2.73125C10.9327 2.8415 11.3144 3.0919 11.5869 3.443C11.8594 3.7941 12.0073 4.22591 12.0073 4.67037C12.0073 5.11482 11.8594 5.54664 11.5869 5.89773C11.3144 6.24883 10.9327 6.49924 10.5022 6.60948C10.1464 6.70058 9.9318 7.06286 10.0229 7.41865C10.114 7.77444 10.4763 7.98902 10.8321 7.89792C11.5487 7.71443 12.1839 7.29764 12.6375 6.71325C13.0911 6.12887 13.3373 5.41014 13.3373 4.67037C13.3373 3.9306 13.0911 3.21186 12.6375 2.62748C12.1839 2.0431 11.5487 1.62631 10.8321 1.44282Z" fill="black"/>
+</svg>
diff --git a/web/src/compose_actions.js b/web/src/compose_actions.js
index 75d5263222..b759ccf5ce 100644
--- a/web/src/compose_actions.js
+++ b/web/src/compose_actions.js
@@ -96,7 +96,10 @@ export function show_compose_box(msg_type, opts) {
         // button. It would be nice if the dropdown supported a way to attach
         // the "DM" button display string so we wouldn't have to manually change
         // it here.
-        $("#compose_select_recipient_name").text($t({defaultMessage: "DM"}));
+        const direct_message_label = $t({defaultMessage: "DM"});
+        $("#compose_select_recipient_name").html(
+            `<i class="zulip-icon zulip-icon-users stream-privacy-type-icon"></i> ${direct_message_label}`,
+        );
     }
     compose_banner.clear_errors();
     compose_banner.clear_warnings();
diff --git a/web/src/compose_recipient.js b/web/src/compose_recipient.js
index 5da787640a..f6f5dd3156 100644
--- a/web/src/compose_recipient.js
+++ b/web/src/compose_recipient.js
@@ -202,6 +202,7 @@ function get_options_for_recipient_widget() {
     const direct_messages_option = {
         name: $t({defaultMessage: "Direct message"}),
         value: DIRECT_MESSAGE,
+        is_direct_message: true,
     };
     if (
         page_params.realm_private_message_policy ===
diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index 4b704bf1aa..95b93d265d 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -829,13 +829,15 @@ div.overlay {
     position: relative;
     top: 0.06rem;
     padding-right: 1px;
+    width: 12px;
 
     &.zulip-icon-globe,
     &.zulip-icon-hashtag {
         font-size: 0.75em;
     }
 
-    &.zulip-icon-lock {
+    &.zulip-icon-lock,
+    &.zulip-icon-users {
         font-size: 0.8em;
     }
 }
diff --git a/web/templates/settings/dropdown_list.hbs b/web/templates/settings/dropdown_list.hbs
index 58cc715cd5..39303e4d19 100644
--- a/web/templates/settings/dropdown_list.hbs
+++ b/web/templates/settings/dropdown_list.hbs
@@ -3,6 +3,8 @@
     <a role="menuitem" tabindex="0">
         {{#if stream}}
             {{> ../inline_decorated_stream_name stream=stream show_colored_icon=true}}
+        {{else if is_direct_message}}
+            <i class="zulip-icon zulip-icon-users stream-privacy-type-icon"></i> {{name}}
         {{else}}
             {{name}}
         {{/if}}