streams: Align stream type icons in "Archive stream" modal.

This commit adds inline_decorated_stream_name component
which is used to show stream name along with its privacy
type icon. This component is added such that we can align
the icon and stream name properly as there are many
instances where the icon and name are not aligned in the
current UI.

This component is only used in "Archive stream" modal for
now and will be used for other UIs as well in future.

web/src/stream_edit.js

@@ -2,7 +2,7 @@ import ClipboardJS from "clipboard";
 import $ from "jquery";
 
 import render_settings_deactivation_stream_modal from "../templates/confirm_dialog/confirm_deactivate_stream.hbs";
-import render_stream_privacy from "../templates/stream_privacy.hbs";
+import render_inline_decorated_stream_name from "../templates/inline_decorated_stream_name.hbs";
 import render_change_stream_info_modal from "../templates/stream_settings/change_stream_info_modal.hbs";
 import render_copy_email_address_modal from "../templates/stream_settings/copy_email_address_modal.hbs";
 import render_stream_description from "../templates/stream_settings/stream_description.hbs";
@@ -595,20 +595,16 @@ export function initialize() {
         }
 
         const stream = sub_store.get(stream_id);
-        const stream_privacy_symbol_html = render_stream_privacy({
-            invite_only: stream.invite_only,
-            is_web_public: stream.is_web_public,
-        });
-        const stream_name = stream_data.maybe_get_stream_name(stream_id);
+
+        const stream_name_with_privacy_symbol_html = render_inline_decorated_stream_name({stream});
         const html_body = render_settings_deactivation_stream_modal({
-            stream_name,
-            stream_privacy_symbol_html,
+            stream_name_with_privacy_symbol_html,
         });
 
         confirm_dialog.launch({
             html_heading: $t_html(
-                {defaultMessage: "Archive <z-link></z-link>{stream}?"},
-                {stream: stream_name, "z-link": () => stream_privacy_symbol_html},
+                {defaultMessage: "Archive <z-link></z-link>?"},
+                {"z-link": () => stream_name_with_privacy_symbol_html},
             ),
             id: "archive-stream-modal",
             help_link: "/help/archive-a-stream",

web/styles/app_components.css

@@ -824,3 +824,21 @@ div.overlay {
         }
     }
 }
+
+.stream-privacy-type-icon {
+    &.zulip-icon-globe {
+        position: relative;
+        top: 1px;
+        padding-right: 1px;
+        font-size: 0.75em;
+    }
+
+    &.fa-lock {
+        padding-right: 1px;
+        font-size: 0.865em;
+    }
+
+    &.hashtag:empty::after {
+        font-size: 1em;
+    }
+}

web/styles/subscriptions.css

@@ -936,10 +936,6 @@ h4.user_group_setting_subsection_title {
     }
 }
 
-#archive-stream-modal i {
-    vertical-align: middle;
-}
-
 div.settings-radio-input-parent {
     border-bottom: 1px solid hsl(0, 0%, 87%);
     margin: 2px 0 2px 5px;

web/templates/confirm_dialog/confirm_deactivate_stream.hbs

@@ -1,4 +1,4 @@
 {{#tr}}
     Archiving stream <z-stream></z-stream> will immediately unsubscribe everyone. This action cannot be undone.
-    {{#*inline "z-stream"}}<strong>{{{stream_privacy_symbol_html}}}{{stream_name}}</strong>{{/inline}}
+    {{#*inline "z-stream"}}<strong>{{{stream_name_with_privacy_symbol_html}}}</strong>{{/inline}}
 {{/tr}}

web/templates/inline_decorated_stream_name.hbs

@@ -0,0 +1,8 @@
+{{! This controls whether the swatch next to streams in the left sidebar has a lock icon. }}
+{{#if stream.invite_only }}
+<i class="fa fa-lock stream-privacy-type-icon" aria-hidden="true"></i>{{stream.name ~}}
+{{ else if stream.is_web_public }}
+<i class="zulip-icon zulip-icon-globe stream-privacy-type-icon" aria-hidden="true"></i>{{stream.name ~}}
+{{ else }}
+<span class="hashtag stream-privacy-type-icon"></span>{{stream.name ~}}
+{{/if}}