From f800d4404e0d7ccefa7f3787d6cf73b7bbcec8c4 Mon Sep 17 00:00:00 2001
From: N-Shar-ma <bablinaneh@gmail.com>
Date: Mon, 25 Mar 2024 13:12:02 +0530
Subject: [PATCH] compose: Redesign the  arrow between stream and topic.

The icon is now bigger, slimmer in stroke width, lighter in color, and
has less horizontal spacing around it.

Fixes: part of #28792.
---
 web/styles/app_variables.css |  1 +
 web/styles/compose.css       | 12 ++++--------
 web/templates/compose.hbs    |  2 +-
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 370cc8ab9a..735a37f2c5 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -229,6 +229,7 @@
     --color-compose-embedded-button-background-hover: hsl(
         231deg 100% 90% / 50%
     );
+    --color-compose-chevron-arrow: hsl(0deg 0% 58%);
 
     /* Text colors */
     --color-text-default: hsl(0deg 0% 20%);
diff --git a/web/styles/compose.css b/web/styles/compose.css
index 91816e0215..08dde671a2 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -177,14 +177,10 @@
                little layout shifts with pills. */
             flex: 0 0 auto;
             height: var(--compose-recipient-box-min-height);
-            /* Round up natural width to next whole pixel. */
-            width: 23px;
 
-            .fa-angle-right {
-                font-size: 0.9em;
-                -webkit-text-stroke: 0.05em;
-                align-self: center;
-                margin: 0 5px;
+            .zulip-icon-chevron-right {
+                font-size: 16px;
+                color: var(--color-compose-chevron-arrow);
             }
         }
 
@@ -1176,7 +1172,7 @@ textarea.new_message_textarea,
 
     .zulip-icon-chevron-down {
         padding-left: 5px;
-        color: hsl(0deg 0% 58%);
+        color: var(--color-compose-chevron-arrow);
         font-weight: lighter;
     }
 
diff --git a/web/templates/compose.hbs b/web/templates/compose.hbs
index 2a7a9e4090..8ff7d25424 100644
--- a/web/templates/compose.hbs
+++ b/web/templates/compose.hbs
@@ -61,7 +61,7 @@
                             {{> dropdown_widget_wrapper
                               widget_name="compose_select_recipient"}}
                             <div class="topic-marker-container">
-                                <i class="fa fa-angle-right" aria-hidden="true"></i>
+                                <i class="zulip-icon zulip-icon-chevron-right" aria-hidden="true"></i>
                             </div>
                             <div id="compose_recipient_box">
                                 <input type="text" name="stream_message_recipient_topic" id="stream_message_recipient_topic" maxlength="{{ max_topic_length }}" value="" placeholder="{{t 'Topic' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Topic' }}" />