Add all of the style to the new banner.

views/dashboardPage/bundle.js

@@ -1539,30 +1539,38 @@ controller = {
     },
 
     createBanner: function(text, status){
-        let container = document.getElementById("banner");
+        let container = document.getElementById("bannerContainer");
         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].style.backgroundColor = "rgb(200, 0, 0)";
                 banner.children[0].children[0].style.display = "block";
                 break;
             case "alert":
-                banner.children[0].backgroundColor = "yellow";
+                banner.children[0].style.backgroundColor = "rgb(230, 210, 0)";
                 banner.children[0].children[1].style.display = "block";
                 break;
             case "success":
-                banner.children[0].backgroundColor = "green";
+                banner.children[0].style.backgroundColor = "rgb(0, 145, 55)";
                 banner.children[0].children[2].style.display = "block";
                 break;
         }
 
         banner.children[1].innerText = text;
         container.appendChild(banner);
-        // setTimeout(()=>{
+
+        // let timer = setTimeout(()=>{
         //     container.removeChild(banner);
         // }, 10000);
+
+        document.getElementById("closeBanner").addEventListener("click", ()=>{
+            container.removeChild(banner);
+            // clearTimeout(timer);
+        });
+
+        
     },
 
     changeMenu: function(){

views/dashboardPage/dashboard.ejs

@@ -103,24 +103,31 @@
                 <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">
+                            <svg style="display:none;" width="50" height="50" 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">
+                            <svg style="display:none;" width="50" height="50" 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">
+                            <svg style="display:none;" width="50" height="50" 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>
+                        <button id="closeBanner">
+                            <svg width="18" height="18" viewBox="0 0 24 24" fill="rgb(200, 0, 0)" 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>
+                        </button>
                     </div>
                 </template>
             </div>

views/dashboardPage/js/dashboard.js

@@ -237,30 +237,38 @@ controller = {
     },
 
     createBanner: function(text, status){
-        let container = document.getElementById("banner");
+        let container = document.getElementById("bannerContainer");
         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].style.backgroundColor = "rgb(200, 0, 0)";
                 banner.children[0].children[0].style.display = "block";
                 break;
             case "alert":
-                banner.children[0].backgroundColor = "yellow";
+                banner.children[0].style.backgroundColor = "rgb(230, 210, 0)";
                 banner.children[0].children[1].style.display = "block";
                 break;
             case "success":
-                banner.children[0].backgroundColor = "green";
+                banner.children[0].style.backgroundColor = "rgb(0, 145, 55)";
                 banner.children[0].children[2].style.display = "block";
                 break;
         }
 
         banner.children[1].innerText = text;
         container.appendChild(banner);
-        // setTimeout(()=>{
+
+        // let timer = setTimeout(()=>{
         //     container.removeChild(banner);
         // }, 10000);
+
+        document.getElementById("closeBanner").addEventListener("click", ()=>{
+            container.removeChild(banner);
+            // clearTimeout(timer);
+        });
+
+        
     },
 
     changeMenu: function(){

views/shared/shared.css

@@ -289,28 +289,51 @@ form{
 /*
 Banner
 */
-#banner{
+#bannerContainer{
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
+    position: absolute;
+    margin-top: 15px;
 }
 
     .banner{
+        display: flex;
         width: 75%;
-        margin: 10px 0;
-        padding: 10px 0;
+        height: 65px;
+        margin: 10px auto;
+        box-shadow: 0 0 10px black;
+        border: 2px solid black;
+        background: white;
     }
 
         .banner > div{
-            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
             width: 25%;
+            color: white;
         }
 
         .banner > p{
+            display: flex;
+            align-items: center;
             font-size: 20px;
             font-weight: bold;
             width: 75%;
+            padding-left: 10px;
+        }
+
+        .banner > button{
+            background: none;
+            border: none;
+            height: 20px;
+            position: relative;
+            top: -10px;
+            right: -10px;
+            cursor: pointer;
+            color: white;
         }
 
 /* Footer Partial */