Update search bar for recipes

views/dashboardPage/bundle.js

@@ -3390,7 +3390,6 @@ let recipeBook = {
                 document.getElementById("posUpdateRecipe").onclick = ()=>{this.posUpdate(Recipe)};
             }
             document.getElementById("recipeSearch").oninput = ()=>{this.search()};
-            document.getElementById("recipeClearButton").onclick = ()=>{this.clearSorting()};
 
             this.populateRecipes();
 
@@ -3426,7 +3425,6 @@ let recipeBook = {
     search: function(){
         let input = document.getElementById("recipeSearch").value.toLowerCase();
         let recipeList = document.getElementById("recipeList");
-        let clearButton = document.getElementById("recipeClearButton");
 
         let matchingRecipes = [];
         for(let i = 0; i < this.recipeDivList.length; i++){
@@ -3441,17 +3439,6 @@ let recipeBook = {
         for(let i = 0; i < matchingRecipes.length; i++){
             recipeList.appendChild(matchingRecipes[i]);
         }
-
-        if(input === ""){
-            clearButton.style.display = "none";
-        }else{
-            clearButton.style.display = "inline";
-        }
-    },
-
-    clearSorting: function(){
-        document.getElementById("recipeSearch").value = "";
-        this.search();
     },
 
     posUpdate: function(Recipe){

views/dashboardPage/dashboard.css

@@ -366,18 +366,6 @@ Recipe Book Strand
     align-items: center;
 }
 
-    #recipeBookStrand .searchBar{
-        width: 50%;
-    }
-
-        #recipeSearch{
-            width: 50%;
-        }
-
-        #recipeSelect{
-            width: 25%;
-        }
-
     #recipeList{
         display: flex;
         flex-direction: column;

views/dashboardPage/dashboard.ejs

@@ -205,21 +205,11 @@
                 </div>
 
                 <div class="searchBar">
-                    <div class="searchAndIcon">
-                        <svg class="mobileHide" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <circle cx="11" cy="11" r="8"></circle>
-                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-                        </svg>
-                        <input id="recipeSearch" type="text" placeholder="FILTER">
-                    </div>
-
-                    <button id="recipeClearButton" class="clearButton" 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>
+                    <svg class="searchButton" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="11" cy="11" r="8"></circle>
+                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                    </svg>
+                    <input id="recipeSearch" class="searchInput" type="text" placeholder="SEARCH">
                 </div>
 
                 <div id="recipeList"></div>

views/dashboardPage/js/recipeBook.js

@@ -10,7 +10,6 @@ let recipeBook = {
                 document.getElementById("posUpdateRecipe").onclick = ()=>{this.posUpdate(Recipe)};
             }
             document.getElementById("recipeSearch").oninput = ()=>{this.search()};
-            document.getElementById("recipeClearButton").onclick = ()=>{this.clearSorting()};
 
             this.populateRecipes();
 
@@ -46,7 +45,6 @@ let recipeBook = {
     search: function(){
         let input = document.getElementById("recipeSearch").value.toLowerCase();
         let recipeList = document.getElementById("recipeList");
-        let clearButton = document.getElementById("recipeClearButton");
 
         let matchingRecipes = [];
         for(let i = 0; i < this.recipeDivList.length; i++){
@@ -61,17 +59,6 @@ let recipeBook = {
         for(let i = 0; i < matchingRecipes.length; i++){
             recipeList.appendChild(matchingRecipes[i]);
         }
-
-        if(input === ""){
-            clearButton.style.display = "none";
-        }else{
-            clearButton.style.display = "inline";
-        }
-    },
-
-    clearSorting: function(){
-        document.getElementById("recipeSearch").value = "";
-        this.search();
     },
 
     posUpdate: function(Recipe){