Enable removing of ingredients from recipes

views/dashboardPage/components/addIngredients.ejs

@@ -1,6 +1,6 @@
 <div id="addIngredients">
     <div class="sidebarIconButtons">
-        <button onclick="closeSidebar()">
+        <button class="iconButton" onclick="closeSidebar()">
             <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <line x1="5" y1="12" x2="19" y2="12"></line>
                 <polyline points="12 5 19 12 12 19"></polyline>

views/dashboardPage/components/addRecipe.ejs

@@ -1,6 +1,6 @@
 <div id="addRecipe">
     <div class="sidebarIconButtons">
-        <button onclick="closeSidebar()">
+        <button class="iconButton" onclick="closeSidebar()">
             <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <line x1="5" y1="12" x2="19" y2="12"></line>
                 <polyline points="12 5 19 12 12 19"></polyline>

views/dashboardPage/components/components.css

@@ -190,7 +190,7 @@
     margin-bottom: 50px;
 }
 
-.sidebarIconButtons > button{
+.iconButton{
     display: flex;
     align-items: center;
     background: none;
@@ -200,7 +200,7 @@
     border-radius: 5px;
 }
 
-    .sidebarIconButtons > button:hover{
+    .iconButton:hover{
         background: rgb(0, 27, 45);
         color: white;
     }

views/dashboardPage/components/ingredientDetails.ejs

@@ -1,20 +1,20 @@
 <div id="ingredientDetails">
     <div class="sidebarIconButtons">
-        <button onclick="closeSidebar()">
+        <button class="iconButton" onclick="closeSidebar()">
             <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <line x1="5" y1="12" x2="19" y2="12"></line>
                 <polyline points="12 5 19 12 12 19"></polyline>
             </svg>
         </button>
 
-        <button onclick="ingredientDetailsComp.edit()">
+        <button class="iconButton" onclick="ingredientDetailsComp.edit()">
             <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M12 20h9"></path>
                 <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
             </svg>
         </button>
 
-        <button onclick="ingredientDetailsComp.remove()">
+        <button class="iconButton" onclick="ingredientDetailsComp.remove()">
             <svg width="30" height="30" 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>
                 <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>

views/dashboardPage/components/recipeDetails.ejs

@@ -1,6 +1,6 @@
 <div id="recipeDetails">
     <div class="sidebarIconButtons">
-        <button onclick="closeSidebar()">
+        <button class="iconButton" onclick="closeSidebar()">
             <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <line x1="5" y1="12" x2="19" y2="12"></line>
                 <polyline points="12 5 19 12 12 19"></polyline>
@@ -8,14 +8,14 @@
         </button>
 
         <% if(merchant.pos === "none"){ %>
-            <button onclick="recipeDetailsComp.edit()">
+            <button class="iconButton" onclick="recipeDetailsComp.edit()">
                 <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <path d="M12 20h9"></path>
                     <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
                 </svg>
             </button>
 
-            <button onclick="recipeDetailsComp.remove()">
+            <button class="iconButton" onclick="recipeDetailsComp.remove()">
                 <svg width="30" height="30" 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>
                     <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
@@ -44,6 +44,12 @@
             <p></p>
             <input type="number" min="0" step="0.01" style="display: none;">
             <p></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>
+                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+                </svg>
+            </button>
         </div>
     </template>
 
@@ -99,6 +105,8 @@
                     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[3].style.display = "block";
+                    div.children[3].onclick = ()=>{div.parentElement.removeChild(div)};
                 }
 
                 let price = document.querySelector("#recipePrice");