css: Hyphenate .user-status selector.

web/e2e-tests/user-status.test.ts

@@ -33,7 +33,7 @@ async function test_user_status(page: Page): Promise<void> {
     // Check by clicking on common statues.
     await page.click(".user-status-value:nth-child(2)");
     await page.waitForFunction(
-        () => (document.querySelector(".user_status") as HTMLInputElement).value === "In a meeting",
+        () => (document.querySelector(".user-status") as HTMLInputElement).value === "In a meeting",
     );
     // It should select calendar emoji.
     await page.waitForSelector(".selected_emoji.emoji-1f4c5");
@@ -41,12 +41,12 @@ async function test_user_status(page: Page): Promise<void> {
     // Clear everything.
     await page.click("#clear_status_message_button");
     await page.waitForFunction(
-        () => (document.querySelector(".user_status") as HTMLInputElement).value === "",
+        () => (document.querySelector(".user-status") as HTMLInputElement).value === "",
     );
     await page.waitForSelector(".status_emoji_wrapper .smiley_icon", {visible: true});
 
     // Manually adding everything.
-    await page.type(".user_status", "Busy");
+    await page.type(".user-status", "Busy");
     const tada_emoji_selector = ".emoji-1f389";
     await page.click(".status_emoji_wrapper .smiley_icon");
     // Wait until emoji popover is opened.

web/src/user_status_ui.js

@@ -18,7 +18,7 @@ export function set_selected_emoji_info(emoji_info) {
     rebuild_status_emoji_selector_ui(selected_emoji_info);
 }
 export function input_field() {
-    return $("#set-user-status-modal input.user_status");
+    return $("#set-user-status-modal input.user-status");
 }
 
 export function submit_button() {
@@ -136,7 +136,7 @@ function user_status_post_render() {
     $("#set-user-status-modal .user-status-value").on("click", (event) => {
         event.stopPropagation();
         const user_status_value = $(event.currentTarget).text().trim();
-        $("input.user_status").val(user_status_value);
+        $("input.user-status").val(user_status_value);
 
         const emoji_info = default_status_messages_and_emoji_info.find(
             (status) => status.status_text === user_status_value,

web/styles/user_status.css

@@ -8,7 +8,7 @@
         border-color: hsl(0deg 0% 0% / 60%);
         border-radius: 5px;
 
-        & input.user_status {
+        & input.user-status {
             width: 95%;
             border: none;
             background-color: transparent;

web/templates/set_status_overlay.hbs

@@ -2,7 +2,7 @@
     <div class="status_emoji_wrapper tippy-zulip-tooltip"  data-tippy-content="{{t 'Select emoji' }}" data-tippy-placement="top" aria-label="{{t 'Select emoji' }}"  tabindex="0" id="selected_emoji">
         {{> status_emoji_selector}}
     </div>
-    <input type="text" class="user_status" placeholder="{{t 'Your status' }}" maxlength="60"/>
+    <input type="text" class="user-status" placeholder="{{t 'Your status' }}" maxlength="60"/>
     <button type="button" class="btn clear_search_button" id="clear_status_message_button" disabled="disabled">
         <i class="fa fa-remove" aria-hidden="true"></i>
     </button>