Add banner control function to the controller.

Rename banner creation functions throughout the SPA.
Slight restyle of the banner.
Remove banner.ejs from the main ejs file.

views/dashboardPage/dashboard.ejs

@@ -99,7 +99,31 @@
         </button>
 
         <div class="contentBlock">
-            <% include ../shared/banner %>
+            <div id="bannerContainer">
+                <template id="banner">
+                    <div class="banner">
+                        <div>
+                            <svg style="display:none;"width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <circle cx="12" cy="12" r="10"></circle>
+                                <line x1="15" y1="9" x2="9" y2="15"></line>
+                                <line x1="9" y1="9" x2="15" y2="15"></line>
+                            </svg>
+
+                            <svg style="display:none;" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <circle cx="12" cy="12" r="10"></circle>
+                                <line x1="12" y1="8" x2="12" y2="12"></line>
+                                <line x1="12" y1="16" x2="12.01" y2="16"></line>
+                            </svg>
+
+                            <svg style="display:none;" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                            </svg>
+                        </div>
+                        <p></p>
+                    </div>
+                </template>
+            </div>
             
             <div id="homeStrand" class="strand">
                 <div class="strandHead">

views/dashboardPage/js/classes/Ingredient.js

@@ -1,11 +1,11 @@
 class Ingredient{
     constructor(id, name, category, unitType, unit, parent, specialUnit = undefined, unitSize = undefined){
         if(!this.isSanitaryString(name)){
-            banner.createError("NAME CONTAINS ILLEGAL CHARCTERS");
+            controller.createBanner("NAME CONTAINS ILLEGAL CHARCTERS", "error");
             return false;
         }
         if(!this.isSanitaryString(category)){
-            banner.createError("CATEGORY CONTAINS ILLEGAL CHARACTERS");
+            controller.createBanner("CATEGORY CONTAINS ILLEGAL CHARACTERS", "error");
             return false;
         }
 

views/dashboardPage/js/classes/Recipe.js

@@ -1,7 +1,7 @@
 class RecipeIngredient{
     constructor(ingredient, quantity){
         if(quantity < 0){
-            banner.createError("QUANTITY CANNOT BE A NEGATIVE NUMBER");
+            controller.createBanner("QUANTITY CANNOT BE A NEGATIVE NUMBER", "error");
             return false;
         }
         this._ingredient = ingredient;
@@ -42,7 +42,7 @@ class RecipeIngredient{
 
     set quantity(quantity){
         if(quantity < 0){
-            banner.createError("QUANTITY CANNOT BE A NEGATIVE NUMBER");
+            controller.createBanner("QUANTITY CANNOT BE A NEGATIVE NUMBER", "error");
             return false;
         }
 
@@ -97,11 +97,11 @@ parent = merchant that it belongs to
 class Recipe{
     constructor(id, name, price, ingredients, parent){
         if(price < 0){
-            banner.createError("PRICE CANNOT BE A NEGATIVE NUMBER");
+            controller.createBanner("PRICE CANNOT BE A NEGATIVE NUMBER", "error");
             return false;
         }
         if(!this.isSanitaryString(name)){
-            banner.createError("NAME CONTAINS ILLEGAL CHARACTERS");
+            controller.createBanner("NAME CONTAINS ILLEGAL CHARACTERS", "error");
             return false;
         }
         this._id = id;
@@ -159,7 +159,7 @@ class Recipe{
 
     addIngredient(ingredient, quantity){
         if(quantity < 0){
-            banner.createError("QUANTITY CANNOT BE A NEGATIVE NUMBER");
+            controller.createBanner("QUANTITY CANNOT BE A NEGATIVE NUMBER", "error");
             return false;
         }
 

views/dashboardPage/js/classes/Transaction.js

@@ -1,11 +1,11 @@
 class TransactionRecipe{
     constructor(recipe, quantity){
         if(quantity < 0){
-            banner.createError("QUANTITY CANNOT BE A NEGATIVE NUMBER");
+            controller.createBanner("QUANTITY CANNOT BE A NEGATIVE NUMBER", "error");
             return false;
         }
         if(quantity % 1 !== 0){
-            banner.createError("RECIPES WITHIN A TRANSACTION MUST BE WHOLE NUMBERS");
+            controller.createBanner("RECIPES WITHIN A TRANSACTION MUST BE WHOLE NUMBERS", "error");
             return false;
         }
         this._recipe = recipe;
@@ -25,7 +25,7 @@ class Transaction{
     constructor(id, date, recipes, parent){
         date = new Date(date);
         if(date > new Date()){
-            banner.createError("DATE CANNOT BE SET TO THE FUTURE");
+            controller.createBanner("DATE CANNOT BE SET TO THE FUTURE", "error");
             return false;
         }
         this._id = id;

views/dashboardPage/js/dashboard.js

@@ -236,6 +236,33 @@ controller = {
         modal.style.display = "none";
     },
 
+    createBanner: function(text, status){
+        let container = document.getElementById("banner");
+        let template = document.getElementById("banner").content.children[0];
+        let banner = template.cloneNode(true);
+
+        switch(status){
+            case "error":
+                banner.children[0].backgroundColor = "red";
+                banner.children[0].children[0].style.display = "block";
+                break;
+            case "alert":
+                banner.children[0].backgroundColor = "yellow";
+                banner.children[0].children[1].style.display = "block";
+                break;
+            case "success":
+                banner.children[0].backgroundColor = "green";
+                banner.children[0].children[2].style.display = "block";
+                break;
+        }
+
+        banner.children[1].innerText = text;
+        container.appendChild(banner);
+        // setTimeout(()=>{
+        //     container.removeChild(banner);
+        // }, 10000);
+    },
+
     changeMenu: function(){
         let menu = document.querySelector(".menu");
         let buttons = document.querySelectorAll(".menuButton");

views/dashboardPage/js/sidebars/editIngredient.js

@@ -108,17 +108,17 @@ let editIngredient = {
         .then(response => response.json())
         .then((response)=>{
             if(typeof(response) === "string"){
-                banner.createError(response);
+                controller.createBanner(response, "error");
             }else{
                 merchant.removeIngredient(merchant.getIngredient(response.ingredient._id));
                 merchant.addIngredient(response.ingredient, response.quantity, response.unit);
 
                 controller.openStrand("ingredients");
-                banner.createNotification("INGREDIENT UPDATED");
+                controller.createBanner("INGREDIENT UPDATED", "success");
             }
         })
         .catch((err)=>{
-            banner.createError("SOMETHING WENT WRONG, PLEASE REFRESH THE PAGE");
+            controller.createBanner("SOMETHING WENT WRONG, PLEASE REFRESH THE PAGE", "error");
         })
         .finally(()=>{
             loader.style.display = "none";

views/dashboardPage/js/sidebars/editRecipe.js

@@ -105,15 +105,15 @@ let editRecipe = {
             .then(response => response.json())
             .then((response)=>{
                 if(typeof(response) === "string"){
-                    banner.createError(response);
+                    controller.createBanner(response, "error");
                 }else{
                     merchant.updateRecipe(response);
                     controller.openStrand("recipeBook");
-                    banner.createNotification("RECIPE UPDATED");
+                    controller.createBanner("RECIPE UPDATED", "success");
                 }
             })
             .catch((err)=>{
-                banner.createError("SOMETHING WENT WRONG, PLEASE REFRESH THE PAGE");
+                controller.createBanner("SOMETHING WENT WRONG, PLEASE REFRESH THE PAGE", "error");
             })
             .finally(()=>{
                 loader.style.display = "none";

views/dashboardPage/js/sidebars/ingredientDetails.js

@@ -57,7 +57,7 @@ let ingredientDetails = {
         for(let i = 0; i < merchant.recipes.length; i++){
             for(let j = 0; j < merchant.recipes[i].ingredients.length; j++){
                 if(ingredient.ingredient === merchant.recipes[i].ingredients[j].ingredient){
-                    banner.createError("MUST REMOVE INGREDIENT FROM ALL RECIPES BEFORE REMOVING FROM INVENTORY");
+                    controller.createBanner("MUST REMOVE INGREDIENT FROM ALL RECIPES BEFORE REMOVING FROM INVENTORY", "error");
                     return;
                 }
             }
@@ -72,15 +72,17 @@ let ingredientDetails = {
             .then((response) => response.json())
             .then((response)=>{
                 if(typeof(response) === "string"){
-                    banner.createError(response);
+                    controller.createBanner(response, "error");
                 }else{
                     merchant.removeIngredient(ingredient);
                     
                     controller.openStrand("ingredients");
-                    banner.createNotification("INGREDIENT REMOVED");
+                    controller.createBanner("INGREDIENT REMOVED", "success");
                 }
             })
-            .catch((err)=>{})
+            .catch((err)=>{
+                controller.createBanner("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE", "error");
+            })
             .finally(()=>{
                 loader.style.display = "none";
             });

views/dashboardPage/js/sidebars/newIngredient.js

@@ -62,16 +62,16 @@ let newIngredient = {
             .then((response) => response.json())
             .then((response)=>{
                 if(typeof(response) === "string"){
-                    banner.createError(response);
+                    controller.createBanner(response, "error");
                 }else{
                     merchant.addIngredient(response.ingredient, response.quantity, response.defaultUnit);
                     controller.openStrand("ingredients");
 
-                    banner.createNotification("INGREDIENT CREATED");
+                    controller.createBanner("INGREDIENT CREATED", "success");
                 }
             })
             .catch((err)=>{
-                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+                controller.createBanner("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE", "error");
             })
             .finally(()=>{
                 loader.style.display = "none";
@@ -96,18 +96,19 @@ let newIngredient = {
             .then(response => response.json())
             .then((response)=>{
                 if(typeof(response) === "string"){
-                    banner.createError(response);
+                    controller.createBanner(response, "error");
                 }else{
                     for(let i = 0; i < response.length; i++){
                         merchant.addIngredient(response[i].ingredient, response[i].quantity, response[i].defaultUnit);
 
+                        controller.createBanner("INGREDINETS SUCCESSFULLY ADDED", "success");
                         controller.openStrand("ingredients");
                     }
                 }
                 
             })
             .catch((err)=>{
-                banner.createError("SOMETHING WENT WRONG.  TRY REFRESHING THE PAGE");
+                controller.createBanner("SOMETHING WENT WRONG.  TRY REFRESHING THE PAGE", "error");
             })
             .finally(()=>{
                 loader.style.display = "none";

views/dashboardPage/js/sidebars/newOrder.js

@@ -55,7 +55,7 @@ let newOrder = {
         let ingredients = document.getElementById("selectedIngredientList").children;
 
         if(date === ""){
-            banner.createError("DATE IS REQUIRED FOR ORDERS");
+            controller.createBanner("DATE IS REQUIRED FOR ORDERS", "error");
             return;
         }
 
@@ -72,12 +72,12 @@ let newOrder = {
             let price = ingredients[i].children[1].children[1].value;
 
             if(quantity === "" || price === ""){
-                banner.createError("MUST PROVIDE QUANTITY AND PRICE PER UNIT FOR ALL INGREDIENTS");
+                controller.createBanner("MUST PROVIDE QUANTITY AND PRICE PER UNIT FOR ALL INGREDIENTS", "error");
                 return;
             }
 
             if(quantity < 0 || price < 0){
-                banner.createError("QUANTITY AND PRICE MUST BE NON-NEGATIVE NUMBERS");
+                controller.createBanner("QUANTITY AND PRICE MUST BE NON-NEGATIVE NUMBERS", "error");
             }
 
             if(ingredients[i].ingredient.ingredient.specialUnit === "bottle"){
@@ -108,16 +108,16 @@ let newOrder = {
             .then((response)=>response.json())
             .then((response)=>{
                 if(typeof(response) === "string"){
-                    banner.createError(response);
+                    controller.createBanner(response, "error");
                 }else{
                     merchant.addOrder(response, true);
                     
                     controller.openStrand("orders", merchant.orders);
-                    banner.createNotification("NEW ORDER CREATED");
+                    controller.createBanner("NEW ORDER CREATED", "success");
                 }
             })
             .catch((err)=>{
-                banner.createError("SOMETHING WENT WRONG, PLEASE REFRESH THE PAGE");
+                controller.createBanner("SOMETHING WENT WRONG, PLEASE REFRESH THE PAGE", "error");
             })
             .finally(()=>{
                 loader.style.display = "none";
@@ -170,18 +170,18 @@ let newOrder = {
             .then(response => response.json())
             .then((response)=>{
                 if(typeof(response) === "string"){
-                    banner.createError(response);
+                    controller.createBanner(response, "error");
                 }else{
                     for(let i = 0; i < response.length; i++){
                         merchant.addOrder(response[i], true);
                     }
 
-                    banner.createNotification("ORDER CREATED AND INGREDIENTS UPDATED SUCCESSFULLY");
+                    controller.createBanner("ORDER CREATED AND INGREDIENTS UPDATED SUCCESSFULLY", "success");
                     controller.openStrand("orders");
                 }
             })
             .catch((err)=>{
-                banner.createError("UNABLE TO DISPLAY NEW ORDER. PLEASE REFRESH THE PAGE.");
+                controller.createBanner("UNABLE TO DISPLAY NEW ORDER. PLEASE REFRESH THE PAGE.", "error");
             })
             .finally(()=>{
                 loader.style.display = "none";

views/dashboardPage/js/sidebars/newRecipe.js

@@ -93,7 +93,7 @@ let newRecipe = {
             .then((response) => response.json())
             .then((response)=>{
                 if(typeof(response) === "string"){
-                    banner.createError(response);
+                    controller.createBanner(response, "error");
                 }else{
                     let ingredients = [];
                     for(let i = 0; i < response.ingredients.length; i++){
@@ -116,12 +116,12 @@ let newRecipe = {
                         ingredients
                     );
 
-                    banner.createNotification("RECIPE CREATED");
+                    controller.createBanner("RECIPE CREATED", "success");
                     controller.openStrand("recipeBook");
                 }
             })
             .catch((err)=>{
-                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+                controller.createBanner("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE", "error");
             })
             .finally(()=>{
                 loader.style.display = "none";
@@ -146,7 +146,7 @@ let newRecipe = {
             .then(response => response.json())
             .then((response)=>{
                 if(typeof(response) === "String"){
-                    banner.createError(response);
+                    controller.createBanner(response, "error");
                 }else{
                     for(let i = 0; i < response.length; i++){
                         merchant.addRecipe(
@@ -157,12 +157,12 @@ let newRecipe = {
                         );
                     }
 
-                    banner.createNotification("ALL INGREDIENTS SUCCESSFULLY CREATED");
+                    controller.createBanner("ALL INGREDIENTS SUCCESSFULLY CREATED", "success");
                     controller.openStrand("recipeBook");
                 }
             })
             .catch((err)=>{
-                banner.createError("UNABLE TO DISPLAY NEW RECIPES.  PLEASE REFRESH THE PAGE");
+                controller.createBanner("UNABLE TO DISPLAY NEW RECIPES.  PLEASE REFRESH THE PAGE", "error");
             })
             .finally(()=>{
                 loader.style.display = "none";

views/dashboardPage/js/sidebars/newTransaction.js

@@ -24,7 +24,7 @@ let newTransaction = {
         let date = document.getElementById("newTransactionDate").valueAsDate;
         
         if(date > new Date()){
-            banner.createError("CANNOT HAVE A DATE IN THE FUTURE");
+            controller.createBanner("CANNOT HAVE A DATE IN THE FUTURE", "error");
             return;
         }
         
@@ -52,7 +52,7 @@ let newTransaction = {
                     }
                 }
             }else if(quantity < 0){
-                banner.createError("CANNOT HAVE NEGATIVE VALUES");
+                controller.createBanner("CANNOT HAVE NEGATIVE VALUES", "error");
                 return;
             }
         }
@@ -71,16 +71,16 @@ let newTransaction = {
                 .then(response => response.json())
                 .then((response)=>{
                     if(typeof(response) === "string"){
-                        banner.createError(response);
+                        controller.createBanner(response, "error");
                     }else{
                         merchant.addTransaction(response);
 
                         controller.openStrand("transactions", merchant.getTransactions());
-                        banner.createNotification("TRANSACTION CREATED");
+                        controller.createBanner("TRANSACTION CREATED", "success");
                     }
                 })
                 .catch((err)=>{
-                    banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+                    controller.createBanner("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE", "error");
                 })
                 .finally(()=>{
                     loader.style.display = "none";
@@ -106,7 +106,7 @@ let newTransaction = {
             .then(response => response.json())
             .then((response)=>{
                 if(typeof(response) === "string"){
-                    banner.createError(response);
+                    controller.createBanner(response, "error");
                 }else{
                     for(let i = 0; i < response.recipes.length; i++){
                         response.recipes[i].recipe = response.recipes[i].recipe._id;
@@ -114,11 +114,11 @@ let newTransaction = {
                     merchant.addTransaction(response);
 
                     controller.openStrand("transactions", merchant.transactions);
-                    banner.createNotification("TRANSACTION SUCCESSFULLY CREATED.  INGREDIENTS UPDATED");
+                    controller.createBanner("TRANSACTION SUCCESSFULLY CREATED.  INGREDIENTS UPDATED", "success");
                 }
             })
             .catch((err)=>{
-                banner.createError("UNABLE TO DISPLAY NEW TRANSACTIONS.  PLEASE REFRESH THE PAGE");
+                controller.createBanner("UNABLE TO DISPLAY NEW TRANSACTIONS.  PLEASE REFRESH THE PAGE", "error");
             })
             .finally(()=>{
                 loader.style.display = "none";

views/dashboardPage/js/sidebars/orderDetails.js

@@ -51,16 +51,16 @@ let orderDetails = {
             .then((response) => response.json())
             .then((response)=>{
                 if(typeof(response) === "string"){
-                    banner.createError(response);
+                    controller.createBanner(response, "error");
                 }else{
                     merchant.removeOrder(order);
 
                     controller.openStrand("orders", merchant.orders);
-                    banner.createNotification("ORDER REMOVED");
+                    controller.createBanner("ORDER REMOVED", "success");
                 }
             })
             .catch((err)=>{
-                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+                controller.createBanner("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE", "error");
             })
             .finally(()=>{
                 loader.style.display = "none";

views/dashboardPage/js/sidebars/orderFilter.js

@@ -42,7 +42,7 @@ let orderFilter = {
         }
 
         if(data.startDate >= data.endDate){
-            banner.createError("START DATE CANNOT BE AFTER END DATE");
+            controller.createBanner("START DATE CANNOT BE AFTER END DATE", "error");
             return;
         }
 
@@ -73,9 +73,9 @@ let orderFilter = {
         .then((response)=>{
             let orders = [];
             if(typeof(response) === "string"){
-                banner.createError(response);
+                controller.createBanner(response, "error");
             }else if(response.length === 0){
-                banner.createError("NO ORDERS MATCH YOUR SEARCH");
+                controller.createBanner("NO ORDERS MATCH YOUR SEARCH", "error");
             }else{
                 for(let i = 0; i < response.length; i++){
                     orders.push(new Order(
@@ -93,7 +93,7 @@ let orderFilter = {
             controller.openStrand("orders", orders);
         })
         .catch((err)=>{
-            banner.createError("UNABLE TO DISPLAY THE ORDERS");
+            controller.createBanner("UNABLE TO DISPLAY THE ORDERS", "error");
         })
         .finally(()=>{
             loader.style.display = "none";

views/dashboardPage/js/sidebars/recipeDetails.js

@@ -38,16 +38,16 @@ let recipeDetails = {
             .then((response) => response.json())
             .then((response)=>{
                 if(typeof(response) === "string"){
-                    banner.createError(response);
+                    controller.createBanner(response, "error");
                 }else{
                     merchant.removeRecipe(recipe);
 
-                    banner.createNotification("RECIPE REMOVED");
+                    controller.createBanner("RECIPE REMOVED", "success");
                     controller.openStrand("recipeBook");
                 }
             })
             .catch((err)=>{
-                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+                controller.createBanner("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE", "error");
             })
             .finally(()=>{
                 loader.style.display = "none";

views/dashboardPage/js/sidebars/transactionDetails.js

@@ -56,16 +56,16 @@ let transactionDetails = {
         })
             .then((response)=>{
                 if(typeof(response) === "string"){
-                    banner.createError(response);
+                    controller.createBanner(response, "error");
                 }else{
                     merchant.removeTransaction(this.transaction);
 
                     controller.openStrand("transactions", merchant.getTransactions());
-                    banner.createNotification("TRANSACTION REMOVED");
+                    controller.createBanner("TRANSACTION REMOVED", "success");
                 }
             })
             .catch((err)=>{
-                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+                controller.createBanner("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE", "error");
             })
             .finally(()=>{
                 loader.style.display = "none";

views/dashboardPage/js/sidebars/transactionFilter.js

@@ -44,7 +44,7 @@ let transactionFilter = {
         }
 
         if(data.startDate >= data.endDate){
-            banner.createError("START DATE CANNOT BE AFTER END DATE");
+            controller.createBanner("START DATE CANNOT BE AFTER END DATE", "error");
             return;
         }
 
@@ -75,9 +75,9 @@ let transactionFilter = {
             .then((response)=>{
                 let transactions = [];
                 if(typeof(response) === "string"){
-                    banner.createError(response);
+                    controller.createBanner(response, "error");
                 }else if(response.length === 0){
-                    banner.createError("NO TRANSACTIONS MATCH YOUR SEARCH");
+                    controller.createBanner("NO TRANSACTIONS MATCH YOUR SEARCH", "error");
                 }else{
                     for(let i = 0; i < response.length; i++){
                         transactions.push(new Transaction(
@@ -92,7 +92,7 @@ let transactionFilter = {
                 controller.openStrand("transactions", transactions);
             })
             .catch((err)=>{
-                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+                controller.createBanner("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE", "error");
             })
             .finally(()=>{
                 loader.style.display = "none";

views/dashboardPage/js/strands/analytics.js

@@ -70,7 +70,7 @@ let analytics = {
             .then(response => response.json())
             .then((response)=>{
                 if(typeof(response) === "string"){
-                    banner.createError(response);
+                    controller.createBanner(response, "error");
                 }else{
                     this.transactionsByDate = [];
 
@@ -95,7 +95,7 @@ let analytics = {
                 }
             })
             .catch((err)=>{
-                banner.createError("UNABLE TO UPDATE THE PAGE");
+                controller.createBanner("UNABLE TO UPDATE THE PAGE", "error");
             })
             .finally(()=>{
                 loader.style.display = "none";

views/dashboardPage/js/strands/home.js

@@ -225,7 +225,7 @@ let home = {
                     lis[i].children[1].children[1].changed = false;
                 }
             }else{
-                banner.createError("CANNOT HAVE NEGATIVE INGREDIENTS");
+                controller.createBanner("CANNOT HAVE NEGATIVE INGREDIENTS", "error");
                 return;
             }
         }
@@ -244,17 +244,17 @@ let home = {
                 .then(response => response.json())
                 .then((response)=>{
                     if(typeof(response) === "string"){
-                        banner.createError(response);
+                        controller.createBanner(response, "error");
                     }else{
                         for(let i = 0; i < response.length; i++){
                             merchant.removeIngredient(merchant.getIngredient(response[i].ingredient._id));
                             merchant.addIngredient(response[i].ingredient, response[i].quantity, response[i].defaultUnit);
                         }
-                        banner.createNotification("INGREDIENTS UPDATED");
+                        controller.createBanner("INGREDIENTS UPDATED", "success");
                     }
                 })
                 .catch((err)=>{
-                    banner.createError("SOMETHING WENT WRONG.  PLEASE REFRESH THE PAGE");
+                    controller.createBanner("SOMETHING WENT WRONG.  PLEASE REFRESH THE PAGE", "error");
                 })
                 .finally(()=>{
                     loader.style.display = "none";

views/dashboardPage/js/strands/orders.js

@@ -39,7 +39,7 @@ let orders = {
         .then(response => response.json())
         .then((response)=>{
             if(typeof(response) === "string"){
-                banner.createError(response);
+                controller.createBanner(response, "error");
             }else{
                 let orders = [];
 
@@ -63,7 +63,7 @@ let orders = {
             }
         })
         .catch((err)=>{
-            banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+            controller.createBanner("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE", "error");
         })
         .finally(()=>{
             loader.style.display = "none";

views/dashboardPage/js/strands/recipeBook.js

@@ -75,7 +75,7 @@ let recipeBook = {
             .then(response => response.json())
             .then((response)=>{
                 if(typeof(response) === "string"){
-                    banner.createError(response);
+                    controller.createBanner(response, "error");
                 }else{
                     for(let i = 0; i < response.new.length; i++){
                         const recipe = new Recipe(
@@ -98,11 +98,12 @@ let recipeBook = {
                         }
                     }
 
+                    controller.createBanner("RECIPES SUCCESSFULLY UPDATED", "success");
                     this.display();
                 }
             })
             .catch((err)=>{
-                banner.createError("SOMETHING WENT WRONG.  PLEASE REFRESH THE PAGE");
+                controller.createBanner("SOMETHING WENT WRONG.  PLEASE REFRESH THE PAGE", "error");
             })
             .finally(()=>{
                 loader.style.display = "none";

views/shared/shared.css

@@ -286,23 +286,32 @@ form{
             color: rgb(255, 99, 107);
         }
 
-/* Banner partial */
-.banner{
-    justify-content: center;
+/*
+Banner
+*/
+#banner{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     width: 100%;
-    font-size: 20px;
-    color: white;
-    position: absolute;
-    padding: 5px 0;
 }
 
-    .notification{
-        background: rgba(1, 140, 15, 0.75);
+    .banner{
+        width: 75%;
+        margin: 10px 0;
+        padding: 10px 0;
     }
 
-    .error{
-        background: rgba(255, 0, 0, 0.75);
-    }
+        .banner > div{
+            height: 100%;
+            width: 25%;
+        }
+
+        .banner > p{
+            font-size: 20px;
+            font-weight: bold;
+            width: 75%;
+        }
 
 /* Footer Partial */
 .spacer{