css: Hyphenate #set-user-status-modal selector.

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

@@ -55,9 +55,9 @@ async function test_user_status(page: Page): Promise<void> {
     await page.waitForSelector(".emoji-info-popover", {hidden: true});
     await page.waitForSelector(`.selected_emoji${tada_emoji_selector}`);
 
-    await page.click("#set_user_status_modal .dialog_submit_button");
+    await page.click("#set-user-status-modal .dialog_submit_button");
     // It should close the modal after saving.
-    await page.waitForSelector("#set_user_status_modal", {hidden: true});
+    await page.waitForSelector("#set-user-status-modal", {hidden: true});
 
     // Check if the emoji is added in user presence list.
     await page.waitForSelector(`.user-presence-link .status_emoji${tada_emoji_selector}`);

web/src/emoji_picker.js

@@ -198,7 +198,7 @@ export function hide_emoji_popover() {
         // Re-enable clicking events for other elements after closing
         // the popover.  This is the inverse of the hack of in the
         // handler that opens the "user status modal" emoji picker.
-        $(".app, .header, .modal__overlay, #set_user_status_modal").css("pointer-events", "all");
+        $(".app, .header, .modal__overlay, #set-user-status-modal").css("pointer-events", "all");
     }
     if (reactions_popped()) {
         $current_message_emoji_popover_elem.popover("destroy");
@@ -784,7 +784,7 @@ export function register_click_handlers() {
         );
     });
 
-    $("body").on("click", "#set_user_status_modal #selected_emoji", (e) => {
+    $("body").on("click", "#set-user-status-modal #selected_emoji", (e) => {
         e.preventDefault();
         e.stopPropagation();
         toggle_emoji_popover(e.target);
@@ -792,7 +792,7 @@ export function register_click_handlers() {
         // status modal, we need this hack to make clicking outside
         // the emoji picker only close the emoji picker, and not the
         // whole user status modal.
-        $(".app, .header, .modal__overlay, #set_user_status_modal").css("pointer-events", "none");
+        $(".app, .header, .modal__overlay, #set-user-status-modal").css("pointer-events", "none");
     });
 
     $(document).on("click", ".emoji-popover-emoji.status_emoji", function (e) {

web/src/user_status_ui.js

@@ -18,11 +18,11 @@ 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() {
-    return $("#set_user_status_modal .dialog_submit_button");
+    return $("#set-user-status-modal .dialog_submit_button");
 }
 
 export function open_user_status_modal() {
@@ -37,7 +37,7 @@ export function open_user_status_modal() {
         html_heading: $t_html({defaultMessage: "Set status"}),
         html_body: rendered_set_status_overlay,
         html_submit_button: $t_html({defaultMessage: "Save"}),
-        id: "set_user_status_modal",
+        id: "set-user-status-modal",
         on_click: submit_new_status,
         post_render: user_status_post_render,
         on_shown() {
@@ -109,7 +109,7 @@ export function clear_message() {
 }
 
 export function user_status_picker_open() {
-    return $("#set_user_status_modal").length !== 0;
+    return $("#set-user-status-modal").length !== 0;
 }
 
 function rebuild_status_emoji_selector_ui(selected_emoji_info) {
@@ -118,7 +118,7 @@ function rebuild_status_emoji_selector_ui(selected_emoji_info) {
         selected_emoji = selected_emoji_info;
     }
     const rendered_status_emoji_selector = render_status_emoji_selector({selected_emoji});
-    $("#set_user_status_modal .status_emoji_wrapper").html(rendered_status_emoji_selector);
+    $("#set-user-status-modal .status_emoji_wrapper").html(rendered_status_emoji_selector);
 }
 
 function user_status_post_render() {
@@ -133,7 +133,7 @@ function user_status_post_render() {
     const $button = submit_button();
     $button.prop("disabled", true);
 
-    $("#set_user_status_modal .user-status-value").on("click", (event) => {
+    $("#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);

web/styles/app_components.css

@@ -409,7 +409,7 @@ div.overlay {
         box-shadow: none;
         z-index: 5;
 
-        #set_user_status_modal & {
+        #set-user-status-modal & {
             margin-left: -26px;
             right: 0;
             padding-top: 6px;

web/styles/user_status.css

@@ -1,4 +1,4 @@
-#set_user_status_modal {
+#set-user-status-modal {
     /* A narrower width is more attractive for this modal. */
     width: 384px;