From cdea8e9d5111ad5bba34981a720e5bf9016e37ad Mon Sep 17 00:00:00 2001
From: Sayam Samal <sayam@zulip.com>
Date: Sat, 9 Aug 2025 18:52:33 +0530
Subject: [PATCH] user_status: Improve custom user status picker input styling.

As a follow-up to the previous commit, this commit improves the styling
of the custom user status picker input.

The changes in this commit adjust the styling of the input field towards
the new redesigned inputs while shying away from using the input
component to avoid the complexity involved in including the status
emoji selector in the input component.
---
 web/styles/app_variables.css            | 12 ++++++
 web/styles/user_status.css              | 55 ++++++++++++++++++-------
 web/templates/set_status_overlay.hbs    |  4 +-
 web/templates/status_emoji_selector.hbs |  2 +-
 4 files changed, 53 insertions(+), 20 deletions(-)

diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index d2491dfcd0..ef5fadd5c1 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -816,6 +816,18 @@
         hsl(0deg 0% 90%),
         hsl(0deg 0% 91% / 10%)
     );
+    --color-modal-selectable-icon: light-dark(
+        hsl(240deg 30% 40%),
+        hsl(240deg 35% 68%)
+    );
+    --color-modal-selectable-icon-hover: light-dark(
+        hsl(240deg 100% 15%),
+        hsl(240deg 100% 90%)
+    );
+    --background-color-modal-selectable-icon-hover: light-dark(
+        hsl(240deg 100% 50% / 7%),
+        hsl(240deg 100% 75% / 20%)
+    );
     --color-background-pill-container-without-placeholder: light-dark(
         hsl(0deg 0% 100%),
         hsl(0deg 0% 0% / 20%)
diff --git a/web/styles/user_status.css b/web/styles/user_status.css
index e6522c9f52..27219d80e0 100644
--- a/web/styles/user_status.css
+++ b/web/styles/user_status.css
@@ -8,14 +8,18 @@
             "status-icon search-input clear-search" auto / auto minmax(0, 1fr)
             auto;
         align-items: center;
-        border: 1px solid;
-        border-color: hsl(0deg 0% 0% / 60%);
-        border-radius: 5px;
+        outline: 1px solid hsl(0deg 0% 0% / 60%);
+        outline-offset: -1px;
+        border-radius: 4px;
         background-color: var(--color-background-input);
 
         & input.user-status {
             grid-area: search-input;
+            line-height: 1.25em; /* 20px at 16px/em */
+            padding: 0.5em 0.125em; /* 8px 2px at 16px/1em */
             width: 100%;
+            /* Override default input height */
+            height: unset;
             border: none;
             outline: none;
             box-shadow: none;
@@ -30,36 +34,46 @@
             }
         }
 
-        .clear_search_button {
+        #clear_status_message_button {
             grid-area: clear-search;
-            width: 40px;
-            padding-left: 5px;
+            padding: 0.5em; /* 8px at 16px/1em */
+            margin: 0.125em; /* 2px at 16px/1em */
         }
 
         .status-emoji-wrapper {
-            padding: 4px 8px;
-            border-right: 1px solid;
-            border-color: hsl(0deg 0% 0% / 60%);
+            display: flex;
+            padding: 0.375em; /* 6px at 16px/1em */
+            margin: 0.125em; /* 2px at 16px/1em */
+            border-radius: 4px;
             cursor: pointer;
 
-            .selected-emoji {
+            .selected-emoji,
+            .smiley-icon {
                 width: 1.25em; /* 20px at 16px/em */
                 height: 1.25em; /* 20px at 16px/em */
                 cursor: pointer;
             }
 
-            /* For custom emojis and smiley icon to take full width. */
-            & img.selected-emoji,
             .smiley-icon {
-                text-align: center;
-                min-width: 1.25em; /* 20px at 16px/em */
-            }
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: var(--color-modal-selectable-icon);
 
-            .smiley-icon {
                 &:hover {
                     text-decoration: none;
                 }
             }
+
+            &:hover {
+                background-color: var(
+                    --background-color-modal-selectable-icon-hover
+                );
+
+                .smiley-icon {
+                    color: var(--color-modal-selectable-icon-hover);
+                }
+            }
         }
     }
 
@@ -67,6 +81,15 @@
         padding-top: 15px;
 
         .user-status-value {
+            /* We set the gap between the status emoji and text
+               in the default user status options to match the gap
+               between the corresponding emoji and text of the
+               custom user status input.
+               6px (emoji button padding)
+               + 2px (emoji button margin)
+               + 2px (input padding) */
+            gap: 0.625em; /* 10px at 16px/em */
+
             .status-emoji {
                 /* Size and align status emoji to match
                    the top line of the modal. */
diff --git a/web/templates/set_status_overlay.hbs b/web/templates/set_status_overlay.hbs
index cb8082a0a3..c0454a1f7f 100644
--- a/web/templates/set_status_overlay.hbs
+++ b/web/templates/set_status_overlay.hbs
@@ -5,9 +5,7 @@
         </div>
     </div>
     <input type="text" class="user-status modal_text_input" id="user-status-input" placeholder="{{t 'Your status' }}" maxlength="60"/>
-    <button type="button" class="clear_search_button" id="clear_status_message_button">
-        <i class="zulip-icon zulip-icon-close" aria-hidden="true"></i>
-    </button>
+    {{> ./components/icon_button id="clear_status_message_button" squared=true intent="neutral" icon="close" }}
 </div>
 <ul class="user-status-options modal-options-list">
     {{#each default_status_messages_and_emoji_info}}
diff --git a/web/templates/status_emoji_selector.hbs b/web/templates/status_emoji_selector.hbs
index 94a623b1e0..be61edda9a 100644
--- a/web/templates/status_emoji_selector.hbs
+++ b/web/templates/status_emoji_selector.hbs
@@ -7,5 +7,5 @@
         <div class="emoji selected-emoji emoji-{{selected_emoji.emoji_code}}"></div>
     {{/if}}
 {{else}}
-    <a type="button" class="smiley-icon show zulip-icon zulip-icon-smile"></a>
+    <span class="smiley-icon show zulip-icon zulip-icon-smile"></span>
 {{/if}}