21

assets/css/custom.css

@@ -351,8 +351,8 @@ footer.bg-light {
 /* Category Filter Button Styles */
 #category-filters .btn {
     border-radius: 20px; /* Rounded corners */
-    padding: 8px 20px;
-    font-size: 0.9rem;
+    padding: 6px 12px;
+    font-size: 0.8rem;
     font-weight: 600;
     line-height: 1.5;
     border: 1px solid rgba(255, 255, 255, 0.2);
@@ -502,3 +502,29 @@ footer.bg-light {
         gap: 0.5rem;
     }
 }
+
+/* Search Input with Icon */
+.search-container {
+    position: relative;
+}
+
+@media (min-width: 769px) {
+    .btn-primary,
+    #print-shopping-list-btn {
+        padding-top: 8px;
+        padding-bottom: 8px;
+    }
+}
+
+.search-container .bi-search {
+    position: absolute;
+    top: 50%;
+    left: 1rem;
+    transform: translateY(-50%);
+    z-index: 2;
+    color: rgba(255, 255, 255, 0.5);
+}
+
+#recipe-search {
+    padding-left: 2.5rem;
+}

index.php

@@ -56,7 +56,8 @@
                         Add Recipe
                     </button>
                 </div>
-                <div class="mb-3">
+                <div class="mb-3 search-container">
+                    <i class="bi bi-search"></i>
                     <input type="text" id="recipe-search" class="form-control" placeholder="Search recipes...">
                 </div>
                 <div class="mb-3 d-flex flex-wrap gap-2" id="category-filters">
@@ -80,7 +81,7 @@
                     <h2 class="text-center mb-0">Shopping List</h2>
                     <div>
                         <button id="add-product-btn" class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#add-product-modal">Add Product</button>
-                        <button id="print-shopping-list-btn" class="btn btn-outline-secondary btn-sm"><i class="bi bi-printer"></i> Print</button>
+                        <button id="print-shopping-list-btn" class="btn btn-outline-secondary"><i class="bi bi-printer"></i> Print</button>
                     </div>
                 </div>
                 <div class="card shadow">