From 523dc7e2be5ce18f9d6a46eb777cff4a55dc91b8 Mon Sep 17 00:00:00 2001
From: opmkumar <sachinaniket2004@gmail.com>
Date: Mon, 28 Oct 2024 01:36:37 +0530
Subject: [PATCH] invite-user-modal: Add general class names for improved
 extensibility.

Adds general class names in invite_user_modal.hbs for custom time
the input and unit so that these elements more easily be extended
for use in other modals with a user specified custom time.

Updates the listener in invite.ts that was using the removed
"custom-expiration-time" class to instead use the id for the
input and unit div, "custom-invite-expiration-time".

Corresponding updates have been made to the relevant CSS files to
ensure consistent styling and future scalability.

Co-authored-by: Ujjawal Modi <umodi2003@gmail.com>
Co-authored-by: Lauryn Menard <lauryn@zulip.com>
---
 web/src/invite.ts                   | 2 +-
 web/styles/dark_theme.css           | 2 +-
 web/styles/zulip.css                | 6 +++---
 web/templates/invite_user_modal.hbs | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/src/invite.ts b/web/src/invite.ts
index 1b5d966c0f..626abf7220 100644
--- a/web/src/invite.ts
+++ b/web/src/invite.ts
@@ -451,7 +451,7 @@ function open_invite_user_modal(e: JQuery.ClickEvent<Document, undefined>): void
             }
         });
 
-        $(".custom-expiration-time").on("change", () => {
+        $("#custom-invite-expiration-time").on("change", () => {
             custom_expiration_time_input = util.check_time_input(
                 $<HTMLInputElement>("input#custom-expiration-time-input").val()!,
             );
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index 84d5863e8b..cce37efb8b 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -342,7 +342,7 @@
     select,
     .pill-container,
     .user-status-content-wrapper,
-    #custom-expiration-time-input,
+    .custom-time-input-value,
     #organization-permissions .dropdown-widget-button,
     #organization-settings .dropdown-widget-button,
     #stream-advanced-configurations .dropdown-widget-button {
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index eeb1c9755e..7b9886e5b9 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -1261,7 +1261,7 @@ div.toggle_resolve_topic_spinner .loading_indicator_spinner {
     }
 }
 
-#custom-expiration-time-input,
+.custom-time-input-value,
 #invite-user-form {
     margin: 0;
 }
@@ -1285,7 +1285,7 @@ div.toggle_resolve_topic_spinner .loading_indicator_spinner {
     width: 100%;
 }
 
-#custom-expiration-time-input {
+.custom-time-input-value {
     width: 5ch;
     margin-right: 15px;
 
@@ -1307,7 +1307,7 @@ div.toggle_resolve_topic_spinner .loading_indicator_spinner {
     }
 }
 
-#custom-expiration-time-unit {
+.custom-time-input-unit {
     width: auto;
 }
 
diff --git a/web/templates/invite_user_modal.hbs b/web/templates/invite_user_modal.hbs
index fdcade3f55..cda8a092ee 100644
--- a/web/templates/invite_user_modal.hbs
+++ b/web/templates/invite_user_modal.hbs
@@ -43,8 +43,8 @@
         <p id="expires_on"></p>
         <div id="custom-invite-expiration-time" class="dependent-settings-block">
             <label for="expires_in" class="modal-field-label">{{t "Custom time" }}</label>
-            <input type="text" autocomplete="off" name="custom-expiration-time" id="custom-expiration-time-input" class="custom-expiration-time inline-block" value="" maxlength="3"/>
-            <select class="custom-expiration-time invite-user-select modal_select bootstrap-focus-style" id="custom-expiration-time-unit">
+            <input type="text" autocomplete="off" name="custom-expiration-time" id="custom-expiration-time-input" class="custom-time-input-value inline-block" value="" maxlength="3"/>
+            <select class="custom-time-input-unit invite-user-select modal_select bootstrap-focus-style" id="custom-expiration-time-unit">
                 {{#each time_choices}}
                     <option name="custom_time_choice" class="custom_time_choice" value="{{this.name}}">{{this.description}}</option>
                 {{/each}}