Restyle add recipe sidebar

views/dashboardPage/components/addRecipe.ejs

@@ -6,7 +6,7 @@
         </svg>
     </button>
 
-    <h1>Add a recipe</h1>
+    <h1>New Recipe</h1>
 
     <div class="recipeBasicInfo">
         <label>Name:
@@ -22,16 +22,21 @@
         </label>
     </div>
 
-        <div id="recipeInputIngredients">
-            <div>
-                <label>Ingredient:
-                    <select></select>
-                </label>
+    <h2>Ingredients</h2>
+    
+    <div id="recipeInputIngredients">
+        <div>
+            <h4>Ingredient 1</h4>
+
+            <label>Ingredient:
+                <select></select>
+            </label>
 
-                <label>Quantity:
-                    <input type="number" step="0.01" min="0">
-                </label>
-            </div>
+            <label>Quantity:
+                <input type="number" step="0.01" min="0">
+            </label>
         </div>
+    </div>
     
+    <button class="button">Create</button>
 </div>

views/dashboardPage/components/components.css

@@ -124,16 +124,59 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    padding-bottom: 50px;
 }
 
     #addRecipe label{
         display: flex;
+        justify-content: space-between;
+        margin: 15px 0;
     }
 
     #addRecipe input{
         width: 50%;
     }
 
+    #addRecipe h2{
+        margin-top: 10px;
+    }
+
+    .recipeBasicInfo{
+        width: 75%;
+        background: rgb(0, 27, 45);
+        padding: 15px;
+        border-radius: 5px;
+        color: white;
+    }
+
+    #recipeInputIngredients{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        box-sizing: border-box;
+        margin: 0 0 25px 0;
+        width:75%;
+        overflow-y: auto;
+        overflow-x: hidden;
+        box-shadow: 0 0 2px gray;
+        border-radius: 5px;
+    }
+
     #recipeInputIngredients div{
+        width: 75%;
         background: rgb(0, 27, 45);
+        padding: 10px;
+        border-radius: 5px;
+        color: white;
+        margin: 10px 0;
+        padding: 10px 15px;
+        text-align: center;
+    }
+
+    #recipeInputIngredients div h4{
+        color: rgb(255, 99, 107);
+    }
+
+    #addRecipe button:last-of-type{
+        margin-top: auto;
     }

views/dashboardPage/recipeBook.js

@@ -58,8 +58,6 @@ window.recipeBookStrandObj = {
 
         document.querySelector("#addRecipe").classList = "sidebar";
 
-        document.querySelector("#ingredientCount").value = 1;
-
         let ingredientsSelect = document.querySelector("#recipeInputIngredients select");
         let categories = categorizeIngredients();
         for(let category of categories){
@@ -86,10 +84,14 @@ window.recipeBookStrandObj = {
 
             for(let i = 0; i < newDivs; i++){
                 let newNode = ingredientsDiv.children[0].cloneNode(true);
-                newNode.children[1].children[0].value = "";
+                newNode.children[2].children[0].value = "";
 
                 ingredientsDiv.appendChild(newNode);
             }
+
+            for(let i = 0; i < newCount; i++){
+                ingredientsDiv.children[i].children[0].innerText = `Ingredient ${i + 1}`;
+            }
         }else if(newCount < oldCount){
             let newDivs = oldCount - newCount;