Improve style on updating recipe

views/dashboardPage/components/components.css

@@ -1,7 +1,3 @@
-#addIngredients .sidebarIconButtons{
-    margin-bottom: 0;
-}
-
 .button2Link{
     background: none;
     border: none;
@@ -201,7 +197,7 @@
     display: flex;
     justify-content: space-between;
     width: 100%;
-    margin-bottom: 50px;
+    margin-bottom: 10px;
 }
 
 .iconButton{
@@ -366,6 +362,12 @@
     width: 100%;
 }
 
+    #recipeNameIn{
+        font-size: 32px;
+        width: 75%;
+        text-align: center;
+    }
+
     #recipeIngredientList{
         width: 100%;
     }
@@ -373,9 +375,33 @@
     .recipeIngredient{
         display: flex;
         justify-content: space-between;
+        align-items: center;
         margin: 25px;
+        text-align: center;
+    }
+
+        .recipeIngredient > *:first-of-type{
+            text-align: left;
+        }
+
+        .recipeIngredientElement{
+            width: 30%;
+        }
+
+    .addRecIngredient{
+        display: flex;
+        justify-content: center;
     }
 
+        .addRecIngredient{
+            margin-right: 3px;
+        }
+
+        .addRecIngredient input{
+            max-width: 25%;
+            margin-left: 3px;
+        }
+
     #recipePrice{
         display: flex;
         flex-direction: column;
@@ -461,10 +487,6 @@
     width: 100%;
 }
 
-    #newOrder .sidebarIconButtons{
-        margin-bottom: 10px;
-    }
-
     #newOrderCategories{
         display: flex;
         flex-direction: column;

views/dashboardPage/components/components.js

@@ -44,12 +44,12 @@ let recipeDetailsComp = {
             let nameIn = document.querySelector("#recipeNameIn");
             name.style.display = "none";
             nameIn.style.display = "block";
-            nameIn.placeholder = name.innerText;
+            nameIn.value = this.recipe.name;
 
             let price = document.querySelector("#recipePrice");
             price.children[1].style.display = "none";
             price.children[2].style.display = "block";
-            price.children[2].placeholder = price.children[1].innerText;
+            price.children[2].value = parseFloat((this.recipe.price / 100).toFixed(2));
         }
 
         for(let i = 0; i < ingredientDivs.children.length; i++){
@@ -57,7 +57,7 @@ let recipeDetailsComp = {
 
             div.children[2].innerText = this.recipe.ingredients[i].ingredient.unit;
             div.children[1].style.display = "block";
-            div.children[1].placeholder = this.recipe.ingredients[i].quantity;
+            div.children[1].value = parseFloat(this.recipe.ingredients[i].quantity);
             div.children[3].style.display = "block";
             div.children[3].onclick = ()=>{div.parentElement.removeChild(div)};
         }
@@ -85,7 +85,7 @@ let recipeDetailsComp = {
             }else{
                 this.recipe.ingredients.push({
                     ingredient: divs[i].ingredient,
-                    quantity: divs[i].children[1].value || divs[i].children[1].placeholder
+                    quantity: divs[i].children[1].value
                 });
             }
         }

views/dashboardPage/components/recipeDetails.ejs

@@ -49,9 +49,9 @@
 
     <template id="recipeIngredient">
         <div class="recipeIngredient">
-            <p></p>
-            <input type="number" min="0" step="0.01" style="display: none;">
-            <p></p>
+            <p class="recipeIngredientElement"></p>
+            <input class="recipeIngredientElement"type="number" min="0" step="0.01" style="display: none;">
+            <p class="recipeIngredientElement"></p>
             <button class="iconButton" style="display: none;">
                 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <polyline points="3 6 5 6 21 6"></polyline>