Update some of the style for the inputs on the new ingredient sidebar.

views/dashboardPage/css/dashboard.css

@@ -226,7 +226,7 @@ Multi-strand use classes
             color: white;
         }
 
-    .searchInput{
+    .searchBar .searchInput, .searchBar .searchInput:focus{
         border: 4px solid rgb(0, 27, 45);
         font-size: 20px;
         padding: 1px 0 1px 4px;

views/dashboardPage/css/sidebars/newIngredient.css

@@ -7,7 +7,7 @@
 
     #newIngredient label{
         display: flex;
-        justify-content: space-between;
+        justify-content: center;
         align-items: center;
         width: 100%;
         background: white;

views/dashboardPage/ejs/sidebars/newIngredient.ejs

@@ -10,19 +10,19 @@
 
     <h1>CREATE INGREDIENT</h1>
 
-    <label>NAME:
+    <label>
         <input id="newIngName" type="text">
     </label>
 
-    <label>CATEGORY:
+    <label>
         <input id="newIngCategory" type="text">
     </label>
 
-    <label>QUANTITY:
+    <label>
         <input id="newIngQuantity" type="number" min="0" step="0.01">
     </label>
 
-    <label>UNIT:
+    <label>
         <select id="unitSelector">
             <optgroup label="MASS/WEIGHT">
                 <option type="mass" value="g">G</option>

views/dashboardPage/js/sidebars/newIngredient.js

@@ -2,9 +2,9 @@ let newIngredient = {
     display: function(){
         const selector = document.getElementById("unitSelector");
 
-        document.getElementById("newIngName").value = "";
-        document.getElementById("newIngCategory").value = "";
-        document.getElementById("newIngQuantity").value = 0;
+        document.getElementById("newIngName").placeholder = "NAME";
+        document.getElementById("newIngCategory").placeholder = "CATEGORY";
+        document.getElementById("newIngQuantity").placeholder = "QUANTITY";
         document.getElementById("bottleSizeLabel").style.display = "none";
         selector.value = "g";
 

views/shared/css/general.css

@@ -23,9 +23,9 @@ input[type=password],
 input[type=number]{
     border-radius: 0;
     border: none;
-    border-bottom: 1px solid black;
+    border-bottom: 2px solid black;
     font-size: 18px;
-    padding: 0 0 1px 5px;
+    padding: 1px 0 1px 5px;
 }
 
 input[type=text]:focus,