Add style to new ingredient sidebar for the spreadsheet choice.

views/dashboardPage/bundle.js

@@ -2011,7 +2011,7 @@ let newIngredient = {
     },
 
     submitFile: function(){
-        const file = document.getElementById("file").files[0];
+        const file = document.getElementById("ingredientFile").files[0];
         let data = new FormData();
         data.append("spreadsheet", file);
 
@@ -2036,7 +2036,6 @@ let newIngredient = {
                 
             })
             .catch((err)=>{
-                console.log(err);
                 banner.createError("SOMETHING WENT WRONG.  TRY REFRESHING THE PAGE");
             })
             .finally(()=>{

views/dashboardPage/dashboard.css

@@ -151,6 +151,28 @@ Multi-strand use classes
             font-weight: bold;
         }
 
+.fileUpload{
+    background: rgb(240, 252, 255);
+    padding: 5px;
+    border-radius: 5px;
+    font-size: 16px;
+}
+
+    .fileUpload::file-selector-button{
+        background: rgb(0, 27, 45);
+        border-radius: 5px;
+        color: white;
+        border: none;
+        cursor: pointer;
+        font-size: 18px;
+        margin: auto 0;
+    }
+
+        .fileUpload::file-selector-button:hover{
+            background: rgb(201, 201, 201);
+            color: black;
+        }
+
 /* 
 Home Strand 
 */

views/dashboardPage/js/sidebars/newIngredient.js

@@ -79,7 +79,7 @@ let newIngredient = {
     },
 
     submitFile: function(){
-        const file = document.getElementById("file").files[0];
+        const file = document.getElementById("ingredientFile").files[0];
         let data = new FormData();
         data.append("spreadsheet", file);
 
@@ -104,7 +104,6 @@ let newIngredient = {
                 
             })
             .catch((err)=>{
-                console.log(err);
                 banner.createError("SOMETHING WENT WRONG.  TRY REFRESHING THE PAGE");
             })
             .finally(()=>{

views/dashboardPage/sidebars.css

@@ -534,6 +534,11 @@ EDIT RECIPE
         margin: 15px auto;
     }
 
+    #newIngredient h2{
+        text-align: center;
+        margin-bottom: 25px;
+    }
+
 /* Order Details */
 #orderDetails{
     display: flex;

views/dashboardPage/sidebars/newIngredient.ejs

@@ -8,7 +8,7 @@
         </button>
     </div>
 
-    <h1>NEW INGREDIENT</h1>
+    <h1>CREATE INGREDIENT</h1>
 
     <label>NAME:
         <input id="newIngName" type="text">
@@ -75,7 +75,11 @@
 
     <button id="submitNewIng" class="button">CREATE</button>
 
-    <input id="file" type="file">
+    <div class="lineBorder"></div>
 
-    <button id="submitFile" class="button">SUBMIT FILE</button>
+    <h2>OR UPLOAD SPREADSHEET</h2>
+
+    <input id="ingredientFile" class="fileUpload" type="file">
+
+    <button id="submitFile" class="button">UPLOAD</button>
 </div>