Remove unused css from sidebars.css.

Update style on new transaction sidebar.

views/dashboardPage/bundle.js

@@ -2097,6 +2097,7 @@ let editRecipe = {
                 }else{
                     merchant.updateRecipe(response);
                     controller.openStrand("recipeBook");
+                    banner.createNotification("RECIPE UPDATED");
                 }
             })
             .catch((err)=>{
@@ -2742,7 +2743,7 @@ let newOrder = {
 
         for(let i = 0; i < merchant.ingredients.length; i++){
             let ingredient = document.createElement("button");
-            ingredient.classList = "newOrderIngredient";
+            ingredient.classList = "choosable";
             ingredient.innerText = merchant.ingredients[i].ingredient.name;
             ingredient.onclick = ()=>{this.addIngredient(merchant.ingredients[i], ingredient)};
             ingredientList.appendChild(ingredient);
@@ -3601,27 +3602,6 @@ let recipeDetails = {
             .finally(()=>{
                 loader.style.display = "none";
             });
-    },
-
-    displayAddIngredient: function(){
-        let template = document.getElementById("addRecIngredient").content.children[0].cloneNode(true);
-        template.name = "new";
-        document.getElementById("recipeIngredientList").appendChild(template);
-
-        let categories = merchant.categorizeIngredients();
-
-        for(let i = 0; i < categories.length; i++){
-            let optGroup = document.createElement("optgroup");
-            optGroup.label = categories[i].name;
-            template.children[0].appendChild(optGroup);
-
-            for(let j = 0; j < categories[i].ingredients.length; j++){
-                let option = document.createElement("option");
-                option.innerText = `${categories[i].ingredients[j].ingredient.name} (${categories[i].ingredients[j].ingredient.unit})`;
-                option.ingredient = categories[i].ingredients[j].ingredient;
-                optGroup.appendChild(option);
-            }
-        }
     }
 }
 

views/dashboardPage/dashboard.css

@@ -159,6 +159,8 @@ Multi-strand use classes
     cursor: pointer;
     width: 99%;
     box-sizing: border-box;
+    border: none;
+    font-size: 16px;
 }
 
     .choosable.tall{

views/dashboardPage/js/editRecipe.js

@@ -109,6 +109,7 @@ let editRecipe = {
                 }else{
                     merchant.updateRecipe(response);
                     controller.openStrand("recipeBook");
+                    banner.createNotification("RECIPE UPDATED");
                 }
             })
             .catch((err)=>{

views/dashboardPage/js/newOrder.js

@@ -15,7 +15,7 @@ let newOrder = {
 
         for(let i = 0; i < merchant.ingredients.length; i++){
             let ingredient = document.createElement("button");
-            ingredient.classList = "newOrderIngredient";
+            ingredient.classList = "choosable";
             ingredient.innerText = merchant.ingredients[i].ingredient.name;
             ingredient.onclick = ()=>{this.addIngredient(merchant.ingredients[i], ingredient)};
             ingredientList.appendChild(ingredient);

views/dashboardPage/js/recipeDetails.js

@@ -52,27 +52,6 @@ let recipeDetails = {
             .finally(()=>{
                 loader.style.display = "none";
             });
-    },
-
-    displayAddIngredient: function(){
-        let template = document.getElementById("addRecIngredient").content.children[0].cloneNode(true);
-        template.name = "new";
-        document.getElementById("recipeIngredientList").appendChild(template);
-
-        let categories = merchant.categorizeIngredients();
-
-        for(let i = 0; i < categories.length; i++){
-            let optGroup = document.createElement("optgroup");
-            optGroup.label = categories[i].name;
-            template.children[0].appendChild(optGroup);
-
-            for(let j = 0; j < categories[i].ingredients.length; j++){
-                let option = document.createElement("option");
-                option.innerText = `${categories[i].ingredients[j].ingredient.name} (${categories[i].ingredients[j].ingredient.unit})`;
-                option.ingredient = categories[i].ingredients[j].ingredient;
-                optGroup.appendChild(option);
-            }
-        }
     }
 }
 

views/dashboardPage/sidebars/newTransaction.ejs

@@ -8,7 +8,7 @@
         </button>
     </div>
 
-    <h2>CREATE NEW TRANSACTION</h2>
+    <h2>NEW TRANSACTION</h2>
 
     <input id="newTransactionDate" type="date">
 
@@ -17,9 +17,9 @@
     <button id="submitNewTransaction" class="button">Create</button>
 
     <template id="createTransaction">
-        <div class="createTransaction smallItemDisplay">
+        <div class="newTransactionRecipe">
             <p></p>
-            <input type="number" min="0" step="1">
+            <input type="number" min="0" step="1" value="0">
         </div>
     </template>
 </div>

views/dashboardPage/sidebars/sidebars.css

@@ -215,14 +215,6 @@ Ingredient Details
     width: 100%;
 }
 
-    #ingredientDetails > p{
-        border-radius: 10px;
-        background: gray;
-        color: white;
-        padding: 0 3px;
-        font-size: 14px;
-    }
-
     #ingredientDetails label{
         display: flex;
         flex-direction: column;
@@ -238,37 +230,6 @@ Ingredient Details
         padding: 10px;
     }
 
-    .ingredientButtons{
-        display: flex;
-        justify-content: space-around;
-        padding: 10px;
-    }
-
-        .unitButton{
-            margin: 5px;
-            padding: 3px;
-            background: none;
-            border: 1px solid black;
-            font-size: 15px;
-            font-weight: bold;
-            cursor: pointer;
-            border-radius: 5px;
-        }
-
-            .unitButton:hover{
-                background: rgb(0, 27, 45);
-                color: white;
-            }
-
-            .unitActive{
-                background: rgb(255, 99, 107);
-            }
-
-        #defaultUnit{
-            padding: 5px;
-            font-size: 15px;
-        }
-
     #ingredientRecipeList{
         display: flex;
         flex-direction: column;
@@ -277,14 +238,9 @@ Ingredient Details
         list-style: none;
         overflow: auto;
         max-height: 150px;
-        width: 100%;
-        margin-left: auto;
+        width: 75%;
     }
 
-        #ingredientRecipeList > *{
-            width: 75%;
-        }
-
 /*
 EDIT INGREDIENT
 */
@@ -306,6 +262,26 @@ EDIT INGREDIENT
         justify-content: space-around;
     }
 
+        .unitButton{
+            margin: 5px;
+            padding: 3px;
+            background: none;
+            border: 1px solid black;
+            font-size: 15px;
+            font-weight: bold;
+            cursor: pointer;
+            border-radius: 5px;
+        }
+
+            .unitButton:hover{
+                background: rgb(0, 27, 45);
+                color: white;
+            }
+
+            .unitActive{
+                background: rgb(255, 99, 107);
+            }
+
 /* 
 Recipe Details 
 */
@@ -315,12 +291,6 @@ Recipe Details
     width: 100%;
 }
 
-    #recipeNameIn{
-        font-size: 32px;
-        width: 75%;
-        text-align: center;
-    }
-
     #recipeIngredientList{
         width: 100%;
     }
@@ -336,21 +306,6 @@ Recipe Details
             font-weight: bold;
         }
 
-    #recipeUpdate{
-        margin: 25px 0 0 0;
-    }
-
-    .addRecIngredient{
-        display: flex;
-        justify-content: center;
-        margin-right: 3px;
-    }
-
-        .addRecIngredient input{
-            max-width: 25%;
-            margin-left: 3px;
-        }
-
 /*
 Add Recipe
 */
@@ -425,6 +380,7 @@ Add Recipe
     #addRecipe button:last-of-type{
         margin-top: auto;
     }
+
 /*
 EDIT RECIPE
 */
@@ -491,23 +447,6 @@ EDIT RECIPE
         overflow-y: auto;
     }
 
-        .newOrderIngredient{
-            background: rgb(0, 27, 45);
-            color: white;
-            font-size: 17px;
-            font-weight: bold;
-            border: none;
-            border-radius: 5px;
-            padding: 5px;
-            margin: 1px 0;
-            cursor: pointer;
-        }
-
-            .newOrderIngredient:hover{
-                background: rgb(201, 201, 201);
-                color: black;
-            }
-
 #newOrder{
     display: flex;
     flex-direction: column;
@@ -592,7 +531,7 @@ EDIT RECIPE
     }
 
     #newIngredient .button{
-        margin: 15px 0 0 auto;
+        margin: 15px auto;
     }
 
 /* Order Details */
@@ -670,12 +609,26 @@ New Transaction
     width: 100%;
 }
 
+    .newTransaction > h2{
+        text-align: center;
+    }
+
     .newTransactionRecipes{
         width: 100%;
         height: 90%;
         overflow-y: auto;
     }
 
+    .newTransactionRecipe{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background: rgb(201, 201, 201);
+        border-radius: 10px;
+        margin: 10px 0;
+        padding: 5px 0;
+    }
+
 @media screen and (max-width: 1400px){
     .sidebar{
         width: 30vw;