Add styling to the ingredient search bar

views/dashboardPage/dashboard.css

@@ -57,23 +57,63 @@ body{
 
 .searchBar{
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
-    width: 100%;
+    width: 80%;
+    padding: 10px 25px;
+    box-sizing: border-box;
+    background: rgb(0, 27,45);
+    border-radius: 5px;
 }
 
-.clearButton{
-    background: none;
-    border: none;
-    color: red;
-    border-radius: 50%;
-    height: 30px;
-    width: 30px;
-    cursor: pointer;
-}
+    .searchAndIcon{
+        display: flex;
+    }
 
-    .clearButton:hover{
-        background: rgb(0, 27, 45);
+        .searchAndIcon svg{
+            background: rgb(201, 201, 201);
+            border-bottom-left-radius: 5px;
+            border-top-left-radius: 5px;
+            color: gray;
+            padding: 5px;
+        }
+
+        .searchAndIcon input{
+            background: rgb(201, 201, 201);
+            border: none;
+            height: 30px;
+            border-bottom-right-radius: 5px;
+            border-top-right-radius: 5px;
+            font-size: 20px;
+            padding: 5px 0 5px 10px;
+        }
+
+    .clearButton{
+        background: none;
+        border: none;
+        color: rgb(255, 99, 107);
+        cursor: pointer;
+    }
+
+        .clearButton:hover{
+            background: rgb(0, 27, 45);
+        }
+
+    .searchBar select{
+        background: rgb(201, 201, 201);
+        font-size: 20px;
+        border-radius: 5px;
+        border: none;
+        height: 30px;
+        padding: 5px 0;
+        box-sizing: content-box;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
+        background-repeat: no-repeat;
+        background-position-x: 100%;
+        background-position-y: 50%;
+        cursor: pointer;
     }
 
 /* Cards */
@@ -223,13 +263,10 @@ body{
     align-items:center;
     overflow-y: auto;
     width: 80%;
-    margin-top: 50px;
 }
 
 .categoryDiv > div:first-of-type{
     display: flex;
-    margin: auto;
-    width: 95%;
 }
 
 .categoryDiv > div:first-of-type p{

views/dashboardPage/dashboard.ejs

@@ -64,14 +64,13 @@
                 </div>
 
                 <div class="searchBar">
-                    <input id="ingredientSearch" type="text" placeholder="FILTER" oninput="ingredientsStrandObj.search()">
-
-                    <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>
+                    <div class="searchAndIcon">
+                        <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="11" cy="11" r="8"></circle>
+                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                        </svg>
+                        <input id="ingredientSearch" type="text" placeholder="FILTER" oninput="ingredientsStrandObj.search()">
+                    </div>
 
                     <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">
@@ -80,6 +79,13 @@
                             <line x1="9" y1="9" x2="15" y2="15"></line>
                         </svg>
                     </button>
+
+                    <select id="ingredientSelect" onchange="ingredientsStrandObj.sort(this.value)">Sort Bys:
+                        <option value="" selected disabled>Sort By:</option>
+                        <option value="_name">Ingredient</option>
+                        <option value="category">Category</option>
+                        <option value="unit">Unit of Measurement</option>
+                    </select>
                 </div>
 
                 <div id="categoryList"></div>