Add style to search bar and the clear button

views/dashboardPage/dashboard.css

@@ -55,6 +55,27 @@ body{
         color: white;
     }
 
+.searchBar{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+
+.clearButton{
+    background: none;
+    border: none;
+    color: red;
+    border-radius: 50%;
+    height: 30px;
+    width: 30px;
+    cursor: pointer;
+}
+
+    .clearButton:hover{
+        background: rgb(0, 27, 45);
+    }
+
 /* Cards */
 .card{
     margin: 0 15px;

views/dashboardPage/dashboard.ejs

@@ -63,15 +63,23 @@
                     </button>
                 </div>
 
-                <div>
-                    <input id="ingredientSearch" type="text" placeholder="filter" oninput="ingredientsStrandObj.search()">
+                <div class="searchBar">
+                    <input id="ingredientSearch" type="text" placeholder="FILTER" oninput="ingredientsStrandObj.search()">
 
-                    <select onchange="ingredientsStrandObj.sort(this.value)">Sort Bys:
+                    <select id="ingredientSelect" onchange="ingredientsStrandObj.sort(this.value)">Sort Bys:
                         <option value="">Sort By:</option>
                         <option value="_name">Ingredient</option>
                         <option value="category">Category</option>
                         <option value="unit">Unit of Measurement</option>
                     </select>
+
+                    <button id="ingredientClearButton" class="clearButton" onclick="ingredientsStrandObj.clearSorting()" style="display: none;">
+                        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <circle cx="12" cy="12" r="10"></circle>
+                            <line x1="15" y1="9" x2="9" y2="15"></line>
+                            <line x1="9" y1="9" x2="15" y2="15"></line>
+                        </svg>
+                    </button>
                 </div>
 
                 <div id="categoryList"></div>

views/dashboardPage/ingredients.js

@@ -73,8 +73,11 @@ window.ingredientsStrandObj = {
 
     search: function(){
         let input = document.querySelector("#ingredientSearch").value.toLowerCase();
+        document.querySelector("#ingredientSelect").selectedIndex = 0;
+
         if(input === ""){
             this.populateByProperty("category");
+            document.querySelector("#ingredientClearButton").style.display = "none";
             return;
         }
 
@@ -85,6 +88,7 @@ window.ingredientsStrandObj = {
             }
         }
 
+        document.querySelector("#ingredientClearButton").style.display = "inline";
         this.displayIngredientsOnly(matchingIngredients);
     },
 
@@ -105,7 +109,16 @@ window.ingredientsStrandObj = {
             return;
         }
 
+        document.querySelector("#ingredientClearButton").style.display = "inline";
         let sortedIngredients = this.ingredients.slice().sort((a, b)=> (a[sortType] > b[sortType]) ? 1 : -1);
         this.displayIngredientsOnly(sortedIngredients);
+    },
+
+    clearSorting: function(button){
+        document.querySelector("#ingredientSearch").value = "";
+        document.querySelector("#ingredientSelect").selectedIndex = 0;
+        document.querySelector("#ingredientClearButton").style.display = "none";
+
+        this.populateByProperty("category");
     }
 }