Added search icon in every search bar (#1399)

Rakesh9100 · Dec 11, 2024 · 2ff62d3 · 2ff62d3
1 parent 62e767a
commit 2ff62d3
Show file tree

Hide file tree

Showing 23 changed files with 152 additions and 44 deletions.
diff --git a/assets/html_files/accordions.html b/assets/html_files/accordions.html
@@ -91,12 +91,16 @@
     </header>
 
     <section>
-
         <div class="heading">Accordions</div>
         <!-- Search Bar -->
         <div id="searchBar">
             <h1 class="SearchDarkMode">Search Accordion</h1><br>
-            <input type="text" id="componentSearch" placeholder="Enter Accordion Name" oninput="filtereachComponents()">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Accordion Name" oninput="filtereachComponents()">
+                <!-- Search icon positioned inside the input field -->
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
+            </div>
         </div>
 
         <div class="no-results">

diff --git a/assets/html_files/backgrounds.html b/assets/html_files/backgrounds.html
@@ -91,13 +91,17 @@
     </header>
 
     <section>
-
         <div class="heading">Backgrounds</div>
         <!-- Search Bar -->
         <div id="searchBar">
             <h1 class="SearchDarkMode">Search Background</h1><br>
-            <input type="text" id="componentSearch" placeholder="Enter Background Name" oninput="filtereachComponents()">
-        </div>
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Background Name" oninput="filtereachComponents()">
+                <!-- Search icon positioned inside the input field -->
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
+            </div>
+        </div>        
 
         <div class="no-results">
             <img src="../images/no-results.png" alt="" height="100px" width="100px">

diff --git a/assets/html_files/breadcrumbs.html b/assets/html_files/breadcrumbs.html
@@ -91,12 +91,16 @@
     </header>
 
     <section>
-
         <div class="heading">Breadcrumbs</div>
         <!-- Search Bar -->
         <div id="searchBar">
             <h1 class="SearchDarkMode">Search Breadcrumb</h1><br>
-            <input type="text" id="componentSearch" placeholder="Enter Breadcrumb Name" oninput="filtereachComponents()">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Breadcrumb Name" oninput="filtereachComponents()">
+                <!-- Search icon positioned inside the input field -->
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
+            </div>
         </div>
 
         <div class="no-results">

diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html
@@ -91,12 +91,16 @@
     </header>
 
     <section>
-
         <div class="heading">Buttons</div>
         <!-- Search Bar -->
         <div id="searchBar">
             <h1 class="SearchDarkMode">Search Button</h1><br>
-            <input type="text" id="componentSearch" placeholder="Enter Button Name" oninput="filtereachComponents()">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Button Name" oninput="filtereachComponents()">
+                <!-- Search icon positioned inside the input field -->
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
+            </div>
         </div>
 
         <div class="no-results">

diff --git a/assets/html_files/cards.html b/assets/html_files/cards.html
@@ -96,7 +96,12 @@
         <!-- Search Bar -->
         <div id="searchBar">
             <h1 class="SearchDarkMode">Search Card</h1><br>
-            <input type="text" id="componentSearch" placeholder="Enter Card Name" oninput="filtereachComponents()">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Card Name" oninput="filtereachComponents()">
+                <!-- Search icon positioned inside the input field -->
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
+            </div>
         </div>
 
         <div class="no-results">

diff --git a/assets/html_files/carousels.html b/assets/html_files/carousels.html
@@ -91,12 +91,16 @@
     </header>
 
     <section>
-
         <div class="heading">Carousels</div>
         <!-- Search Bar -->
         <div id="searchBar">
             <h1 class="SearchDarkMode">Search Carousel</h1><br>
-            <input type="text" id="componentSearch" placeholder="Enter Carousel Name" oninput="filtereachComponents()">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Carousel Name" oninput="filtereachComponents()">
+                <!-- Search icon positioned inside the input field -->
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
+            </div>
         </div>
 
         <div class="no-results">

diff --git a/assets/html_files/cursors.html b/assets/html_files/cursors.html
@@ -85,12 +85,16 @@
     </header>
 
     <section>
-
         <div class="heading">Cursors</div>
         <!-- Search Bar -->
         <div id="searchBar">
             <h1 class="SearchDarkMode">Search Cursor</h1><br>
-            <input type="text" id="componentSearch" placeholder="Enter Cursor Name" oninput="filtereachComponents()">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Cursor Name" oninput="filtereachComponents()">
+                <!-- Search icon positioned inside the input field -->
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
+            </div>
         </div>
 
         <div class="no-results">

diff --git a/assets/html_files/dropdowns.html b/assets/html_files/dropdowns.html
@@ -91,12 +91,16 @@
     </header>
 
     <section>
-
         <div class="heading">Dropdowns</div>
         <!-- Search Bar -->
         <div id="searchBar">
             <h1 class="SearchDarkMode">Search Dropdown</h1><br>
-            <input type="text" id="componentSearch" placeholder="Enter Dropdown Name" oninput="filtereachComponents()">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Dropdown Name" oninput="filtereachComponents()">
+                <!-- Search icon positioned inside the input field -->
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
+            </div>
         </div>
 
         <div class="no-results">

diff --git a/assets/html_files/footers.html b/assets/html_files/footers.html
@@ -91,12 +91,16 @@
     </header>
 
     <section>
-
         <div class="heading">Footers</div>
         <!-- Search Bar -->
         <div id="searchBar">
             <h1 class="SearchDarkMode">Search Footer</h1><br>
-            <input type="text" id="componentSearch" placeholder="Enter Footer Name" oninput="filtereachComponents()">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Footer Name" oninput="filtereachComponents()">
+                <!-- Search icon positioned inside the input field -->
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
+            </div>
         </div>
 
         <div class="no-results">

diff --git a/assets/html_files/forms.html b/assets/html_files/forms.html
@@ -91,12 +91,16 @@
     </header>
 
     <section>
-
         <div class="heading">Forms</div>
         <!-- Search Bar -->
         <div id="searchBar">
             <h1 class="SearchDarkMode">Search Form</h1><br>
-            <input type="text" id="componentSearch" placeholder="Enter Form Name" oninput="filtereachComponents()">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Form Name" oninput="filtereachComponents()">
+                <!-- Search icon positioned inside the input field -->
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
+            </div>
         </div>
 
         <div class="no-results">

diff --git a/assets/html_files/heroes.html b/assets/html_files/heroes.html
@@ -91,12 +91,16 @@
     </header>
 
     <section>
-
         <div class="heading">Heroes</div>
         <!-- Search Bar -->
         <div id="searchBar">
-            <h1 class="SearchDarkMode">Search Heroes</h1><br>
-            <input type="text" id="componentSearch" placeholder="Enter Hero Name" oninput="filtereachComponents()">
+            <h1 class="SearchDarkMode">Search Hero</h1><br>
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Hero Name" oninput="filtereachComponents()">
+                <!-- Search icon positioned inside the input field -->
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
+            </div>
         </div>
 
         <div class="no-results">

diff --git a/assets/html_files/loaders.html b/assets/html_files/loaders.html
@@ -91,12 +91,16 @@
     </header>
 
     <section>
-
         <div class="heading">Loaders</div>
         <!-- Search Bar -->
         <div id="searchBar">
             <h1 class="SearchDarkMode">Search Loader</h1><br>
-            <input type="text" id="componentSearch" placeholder="Enter Loader Name" oninput="filtereachComponents()">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Loader Name" oninput="filtereachComponents()">
+                <!-- Search icon positioned inside the input field -->
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
+            </div>
         </div>
 
         <div class="no-results">

diff --git a/assets/html_files/navigation-bars.html b/assets/html_files/navigation-bars.html
@@ -91,12 +91,16 @@
     </header>
 
     <section>
-
         <div class="heading">Navigation Bars</div>
         <!-- Search Bar -->
         <div id="searchBar">
             <h1 class="SearchDarkMode">Search Navigation Bar</h1><br>
-            <input type="text" id="componentSearch" placeholder="Enter Navigation Bar Name" oninput="filtereachComponents()">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Navigation Bar Name" oninput="filtereachComponents()">
+                <!-- Search icon positioned inside the input field -->
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
+            </div>
         </div>
 
         <div class="no-results">

diff --git a/assets/html_files/popups.html b/assets/html_files/popups.html
@@ -91,12 +91,16 @@
     </header>
 
     <section>
-
         <div class="heading">Popups</div>
         <!-- Search Bar -->
         <div id="searchBar">
-            <h1 class="SearchDarkMode">Search Popups</h1><br>
-            <input type="text" id="componentSearch" placeholder="Enter Popup Name" oninput="filtereachComponents()">
+            <h1 class="SearchDarkMode">Search Popup</h1><br>
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Popup Name" oninput="filtereachComponents()">
+                <!-- Search icon positioned inside the input field -->
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
+            </div>
         </div>
 
         <div class="no-results">

diff --git a/assets/html_files/scrollbars.html b/assets/html_files/scrollbars.html
@@ -91,12 +91,16 @@
     </header>
 
     <section>
-
         <div class="heading">Scrollbars</div>
         <!-- Search Bar -->
         <div id="searchBar">
             <h1 class="SearchDarkMode">Search Scrollbar</h1><br>
-            <input type="text" id="componentSearch" placeholder="Enter Scrollbar Name" oninput="filtereachComponents()">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Scrollbar Name" oninput="filtereachComponents()">
+                <!-- Search icon positioned inside the input field -->
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
+            </div>
         </div>
 
         <div class="no-results">

diff --git a/assets/html_files/search-bars.html b/assets/html_files/search-bars.html
@@ -91,12 +91,16 @@
     </header>
 
     <section>
-
         <div class="heading">Search Bars</div>
         <!-- Search Bar -->
         <div id="searchBar">
             <h1 class="SearchDarkMode">Search Search Bar</h1><br>
-            <input type="text" id="componentSearch" placeholder="Enter SearchBar Name" oninput="filtereachComponents()">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Search Bar Name" oninput="filtereachComponents()">
+                <!-- Search icon positioned inside the input field -->
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
+            </div>
         </div>
 
         <div class="no-results">

diff --git a/assets/html_files/tables.html b/assets/html_files/tables.html
@@ -91,12 +91,16 @@
     </header>
 
     <section>
-
         <div class="heading">Tables</div>
         <!-- Search Bar -->
         <div id="searchBar">
             <h1 class="SearchDarkMode">Search Table</h1><br>
-            <input type="text" id="componentSearch" placeholder="Enter Table Name" oninput="filtereachComponents()">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Table Name" oninput="filtereachComponents()">
+                <!-- Search icon positioned inside the input field -->
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
+            </div>
         </div>
 
         <div class="no-results">

diff --git a/assets/html_files/text-animations.html b/assets/html_files/text-animations.html
@@ -91,12 +91,16 @@
     </header>
 
     <section>
-
         <div class="heading">Text Animations</div>
         <!-- Search Bar -->
         <div id="searchBar">
             <h1 class="SearchDarkMode">Search Text Animation</h1><br>
-            <input type="text" id="componentSearch" placeholder="Enter Text Animation Name" oninput="filtereachComponents()">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Text Animation Name" oninput="filtereachComponents()">
+                <!-- Search icon positioned inside the input field -->
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
+            </div>
         </div>
 
         <div class="no-results">

diff --git a/assets/html_files/toggle-switches.html b/assets/html_files/toggle-switches.html
@@ -91,12 +91,16 @@
     </header>
 
     <section>
-
         <div class="heading">Toggle Switches</div>
         <!-- Search Bar -->
         <div id="searchBar">
             <h1 class="SearchDarkMode">Search Toggle Switch</h1><br>
-            <input type="text" id="componentSearch" placeholder="Enter Toggle Switch Name" oninput="filtereachComponents()">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Toggle Switch Name" oninput="filtereachComponents()">
+                <!-- Search icon positioned inside the input field -->
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
+            </div>
         </div>
 
         <div class="no-results">

diff --git a/assets/html_files/tooltips.html b/assets/html_files/tooltips.html
@@ -95,7 +95,12 @@
         <!-- Search Bar -->
         <div id="searchBar">
             <h1 class="SearchDarkMode">Search Tooltip</h1><br>
-            <input type="text" id="componentSearch" placeholder="Enter Tooltip Name" oninput="filtereachComponents()">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Tooltip Name" oninput="filtereachComponents()">
+                <!-- Search icon positioned inside the input field -->
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
+            </div>
         </div>
 
         <div class="no-results">

diff --git a/assets/html_files/transfer-lists.html b/assets/html_files/transfer-lists.html
@@ -96,7 +96,12 @@
         <!-- Search Bar -->
         <div id="searchBar">
             <h1 class="SearchDarkMode">Search Transfer List</h1><br>
-            <input type="text" id="componentSearch" placeholder="Enter Transfer List Name" oninput="filtereachComponents()">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Transfer List Name" oninput="filtereachComponents()">
+                <!-- Search icon positioned inside the input field -->
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
+            </div>
         </div>
 
         <div class="no-results">