From 87fd7b3810c1ba60cd5306cfe276417bdddeaeda Mon Sep 17 00:00:00 2001
From: Sahil Batra <sahil@zulip.com>
Date: Tue, 20 Jun 2023 17:32:47 +0530
Subject: [PATCH] integrations: Re-add bootstrap CSS for search input.

This commit re-adds bootstrap CSS for search input in
integrations page using a more specific selector in
integrations.css. We also change the selector to use
a class name instead of "input".

This is a prep commit for removing bootstrap CSS for text type
inputs.
---
 templates/zerver/integrations/index.html | 2 +-
 web/styles/portico/integrations.css      | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/templates/zerver/integrations/index.html b/templates/zerver/integrations/index.html
index ce73f64291..c9d32dc90e 100644
--- a/templates/zerver/integrations/index.html
+++ b/templates/zerver/integrations/index.html
@@ -37,7 +37,7 @@
                     <div class="searchbar">
                         <div class="searchbar-reset">
                             <i class="fa fa-search" aria-hidden="true"></i>
-                            <input type="text" placeholder="{{ _('Search integrations') }}"/>
+                            <input type="text" class="search_input" placeholder="{{ _('Search integrations') }}"/>
                         </div>
                     </div>
                 </div>
diff --git a/web/styles/portico/integrations.css b/web/styles/portico/integrations.css
index b9ca94735f..385e1b7ada 100644
--- a/web/styles/portico/integrations.css
+++ b/web/styles/portico/integrations.css
@@ -108,7 +108,7 @@ $category-text: hsl(219deg 23% 33%);
             .searchbar-reset {
                 position: relative;
 
-                & input {
+                .search_input {
                     box-shadow: 0 0 7px 2px hsl(0deg 0% 0% / 3%);
 
                     font-size: 1em;
@@ -120,9 +120,13 @@ $category-text: hsl(219deg 23% 33%);
                     border-radius: 40px;
                     border: 1px solid $light-blue-border;
                     display: block;
+                    color: hsl(0deg 0% 33%);
+                    margin-bottom: 10px;
+                    transition: border linear 0.2s, box-shadow linear 0.2s;
 
                     &:focus {
                         border: 1px solid $border-green;
+                        outline: 0;
                     }
 
                     @media (width <= 768px) {