From bbcca49a5eee7e30cd56fcdaffa7890029a09c5e Mon Sep 17 00:00:00 2001
From: Sahil Batra <sahil@zulip.com>
Date: Fri, 23 Dec 2022 22:17:12 +0530
Subject: [PATCH] invite: Add bootstrap CSS rules for select elements in invite
 modal.

This commit adds bootstrap CSS rules used for select elements in
invite UI in zulip.css.

This change is done so we can safely remove select CSS rules from
bootstrap.css as a part of our process to remove bootstrap.

This commit also adds class to a couple of select elements in invite
UI such that we can use those class to write CSS as using IDs would
lead to the dark-theme background not being applied correctly.
---
 static/styles/zulip.css          | 14 ++++++++++++++
 static/templates/invite_user.hbs |  4 ++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index 7958c6ae36..9cc6221424 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -2488,6 +2488,20 @@ textarea.invitee_emails {
     }
 }
 
+select.invite-expires-in,
+select.custom-expiration-time,
+select.invite-as {
+    width: 220px;
+    height: 30px;
+    padding: 4px 6px;
+    color: hsl(0, 0%, 33%);
+    border-radius: 4px;
+    border: 1px solid hsl(0, 0%, 80%);
+    cursor: pointer;
+    background-color: hsl(0, 0%, 100%);
+    vertical-align: middle;
+}
+
 #invite_status {
     display: none;
 }
diff --git a/static/templates/invite_user.hbs b/static/templates/invite_user.hbs
index 0c1ca80e41..ff211f7eb0 100644
--- a/static/templates/invite_user.hbs
+++ b/static/templates/invite_user.hbs
@@ -32,7 +32,7 @@
                 <div class="input-group">
                     <label for="expires_in">{{t "Invitation expires after" }}</label>
                     <div>
-                        <select id="expires_in">
+                        <select id="expires_in" class="invite-expires-in">
                             {{#each expires_in_options}}
                                 <option {{#if this.default }}selected{{/if}} name="expires_in" value="{{this.value}}">{{this.description}}</option>
                             {{/each}}
@@ -55,7 +55,7 @@
                         {{> help_link_widget link="/help/roles-and-permissions" }}
                     </label>
                     <div>
-                        <select id="invite_as">
+                        <select id="invite_as" class="invite-as">
                             <option name="invite_as" value="{{ invite_as_options.guest.code }}">{{t "Guests" }}</option>
                             <option name="invite_as" selected="selected" value="{{ invite_as_options.member.code }}">{{t "Members" }}</option>
                             {{#if is_admin}}