Fix style on the new recipe sidebar.

views/dashboardPage/css/sidebars/newRecipe.css

@@ -1,18 +1,24 @@
 #addRecipe{
     display: flex;
     flex-direction: column;
+    justify-content: space-between;
     align-items: center;
     width: 100%;
-    padding-bottom: 50px;
+    height: 100%;
 }
 
-    /* #addRecipe .choosable{
+    #addRecipe .choosable{
+        display: flex;
+        justify-content: left;
         background: rgb(240, 252, 255);
-    } */
+        color: black;
+    }
 
     #newRecipeContent{
         display: flex;
+        flex-grow: 10;
         width: 100%;
+        max-height: 85%;
         padding: 10px;
     }
 
@@ -22,9 +28,54 @@
             height: 100%;
             overflow-y: auto;
             padding: 10px;
+            box-sizing: border-box;
         }
 
         #newRecipeData{
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            align-items: center;
+            height: 100%;
             width: 60%;
             padding: 10px;
-        }
+            box-sizing: border-box;
+        }
+
+            #newRecipeDataInputs{
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+            }
+
+            #newRecipeDataInputs > *{
+                margin: 5px 0;
+            }
+
+            #newRecipeChosenList{
+                height: 75%;
+                box-sizing: border-box;
+                overflow-y: auto;
+            }
+
+                .newRecipeChosenIngredient{
+                    width: 95%;
+                    margin: 15px auto;
+                }
+
+                    .newRecipeChosenIngredient div{
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                    }
+
+                    .newRecipeChosenIngredient button{
+                        padding: 0;
+                        margin: 0 5px;
+                        max-height: none;
+                        min-width: none;
+                    }
+
+                    .newRecipeChosenIngredient input{
+                        width: 100%;
+                    }

views/dashboardPage/ejs/sidebars/newRecipe.ejs

@@ -8,13 +8,13 @@
         </button>
     </div>
 
+    <h1>NEW RECIPE</h1>
+
     <div id="newRecipeContent">
-        <div id="recipeChoices">
-            <div id="recipeChoicesList"></div>
-        </div>
+        <div id="recipeChoices"></div>
 
         <div id="newRecipeData">
-            <div>
+            <div id="newRecipeDataInputs">
                 <input id="newRecipeName" type="text" placeholder="NAME">
 
                 <input id="newRecipePrice" type="number" step="0.01" min="0" placeholder="PRICE">
@@ -28,13 +28,13 @@
 
     <template id="newRecipeChosenIngredient">
         <div class="newRecipeChosenIngredient">
+            <p></p>
+
             <div>
-                <p></p>
+                <input type="number" step="0.01" min="0">
 
                 <button class="sidebarButton">REMOVE</button>
             </div>
-
-            <input type="number" step="0.01" min="0">
         </div>
     </template>
 </div>

views/dashboardPage/js/sidebars/newRecipe.js

@@ -14,7 +14,7 @@ let newRecipe = {
     populateChoices: function(){
         this.unchosen.sort((a, b) => (a.name > b.name) ? 1 : -1);
 
-        let list = document.getElementById("recipeChoicesList");
+        let list = document.getElementById("recipeChoices");
         while(list.children.length > 0){
             list.removeChild(list.firstChild);
         }
@@ -34,13 +34,13 @@ let newRecipe = {
 
     add: function(ingredient){
         let element = document.getElementById("newRecipeChosenIngredient").content.children[0].cloneNode(true);
-        element.children[0].children[0].innerText = ingredient.name;
-        element.children[0].children[1].onclick = ()=>{
+        element.children[0].innerText = ingredient.name;
+        element.children[1].children[0].placeholder = `QUANTITY (${ingredient.unit.toUpperCase()})`;
+        element.children[1].children[1].onclick = ()=>{
             this.unchosen.push(ingredient);
             element.parentElement.removeChild(element);
             this.populateChoices();
         };
-        element.children[1].placeholder = `UNIT (${ingredient.unit.toUpperCase()})`;
         document.getElementById("newRecipeChosenList").appendChild(element);
     },
 };