From 79a605a5e9fdce989166d58069ea3173b2c56dd3 Mon Sep 17 00:00:00 2001
From: Alvin <524715@vistacollege.nl>
Date: Wed, 29 Oct 2025 10:50:54 +0100
Subject: [PATCH] Implement search bar styling and update placeholders across
 admin and student reservation pages

---
 public/admin-reservations.html   |  6 +++---
 public/admin.html                |  6 +++---
 public/css/style.css             | 27 +++++++++++++++++++++++++++
 public/student-reservations.html |  6 +++---
 public/student.html              |  4 ++--
 5 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/public/admin-reservations.html b/public/admin-reservations.html
index 8783f43..bbd52c8 100644
--- a/public/admin-reservations.html
+++ b/public/admin-reservations.html
@@ -45,11 +45,11 @@
             </div>
             <div class="card-body">
                 <div class="row g-3 mb-3">
-                    <div class="col-md-12">
+                    <div class="col-md-6">
                         <label for="searchInput" class="form-label">Search</label>
-                        <div class="input-group">
+                        <div class="input-group search-input-group">
                             <span class="input-group-text"><i class="bi bi-search"></i></span>
-                            <input type="text" class="form-control" id="searchInput" placeholder="Search by student name, item name, or location...">
+                            <input type="text" class="form-control" id="searchInput" placeholder="Search reservations...">
                             <button class="btn btn-outline-secondary" type="button" id="clearSearch" title="Clear search">
                                 <i class="bi bi-x-lg"></i>
                             </button>
diff --git a/public/admin.html b/public/admin.html
index 69a16a8..14efa35 100644
--- a/public/admin.html
+++ b/public/admin.html
@@ -57,11 +57,11 @@
                 </div>
                 
                 <!-- Search Bar -->
-                <div class="row mb-4">
+                <div class="row mb-3">
                     <div class="col-md-6">
-                        <div class="input-group">
+                        <div class="input-group search-input-group">
                             <span class="input-group-text"><i class="bi bi-search"></i></span>
-                            <input type="text" class="form-control" id="searchInput" placeholder="Search items by name, description, or location...">
+                            <input type="text" class="form-control" id="searchInput" placeholder="Search items...">
                             <button class="btn btn-outline-secondary" type="button" id="clearSearch" title="Clear search">
                                 <i class="bi bi-x-lg"></i>
                             </button>
diff --git a/public/css/style.css b/public/css/style.css
index 0ab4b84..56e7f2f 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -447,4 +447,31 @@ body {
 /* Small button spacing */
 .btn-sm {
     margin: 0 2px;
+}
+
+/* Simple Search Bar Styling */
+.search-input-group .input-group-text {
+    background-color: var(--vista-coral);
+    border-color: var(--vista-coral);
+    color: var(--vista-white);
+}
+
+.search-input-group .form-control {
+    border-color: var(--vista-coral);
+}
+
+.search-input-group .form-control:focus {
+    border-color: var(--vista-coral);
+    box-shadow: 0 0 0 0.25rem rgba(211, 112, 90, 0.25);
+}
+
+.search-input-group .btn-outline-secondary {
+    border-color: var(--vista-coral);
+    color: var(--vista-coral);
+}
+
+.search-input-group .btn-outline-secondary:hover {
+    background-color: var(--vista-coral);
+    border-color: var(--vista-coral);
+    color: var(--vista-white);
 }
\ No newline at end of file
diff --git a/public/student-reservations.html b/public/student-reservations.html
index 45a45b6..d46fd8f 100644
--- a/public/student-reservations.html
+++ b/public/student-reservations.html
@@ -64,11 +64,11 @@
                     </div>
                 </div>
                 <div class="row g-3 mb-3">
-                    <div class="col-md-12">
+                    <div class="col-md-6">
                         <label for="searchInput" class="form-label">Search</label>
-                        <div class="input-group">
+                        <div class="input-group search-input-group">
                             <span class="input-group-text"><i class="bi bi-search"></i></span>
-                            <input type="text" class="form-control" id="searchInput" placeholder="Search by item name or location...">
+                            <input type="text" class="form-control" id="searchInput" placeholder="Search reservations...">
                             <button class="btn btn-outline-secondary" type="button" id="clearSearch" title="Clear search">
                                 <i class="bi bi-x-lg"></i>
                             </button>
diff --git a/public/student.html b/public/student.html
index ced38f4..9e8ae1a 100644
--- a/public/student.html
+++ b/public/student.html
@@ -39,9 +39,9 @@
                 <h2>Available Items</h2>
             </div>
             <div class="col-md-4">
-                <div class="input-group">
+                <div class="input-group search-input-group">
                     <span class="input-group-text"><i class="bi bi-search"></i></span>
-                    <input type="text" class="form-control" id="searchInput" placeholder="Search items by name or description...">
+                    <input type="text" class="form-control" id="searchInput" placeholder="Search items...">
                     <button class="btn btn-outline-secondary" type="button" id="clearSearch" title="Clear search">
                         <i class="bi bi-x-lg"></i>
                     </button>