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

@@ -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%)

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. */

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}}

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}}