added first version of notification modal to frontend

base/static/shell.css

@@ -58,3 +58,13 @@ main {
   position: relative;
 }
 
+/* notification modal */ 
+.notification-title.notification-info {
+    color: var(--okay)
+}
+.notification-title.notification-warning {
+    color: var(--warn)
+}
+.notification-title.notification-error {
+    color: var(--critical)
+}

base/static/shell.js

@@ -50,6 +50,36 @@ async function select_module(name, btn) {
     });
 }
 
+function openNotificationModal() {
+    let html = `
+        <div class="modal-kicker">NOTIFICATIONS</div>
+        <i class="fa-solid fa-bell"></i>
+        <span class="modal-title">Whats new:</span>
+        <div class="scroll">
+    `
+    for (let i = 0; i < 50; i++) {
+        let status = Math.floor(Math.random() * 3)
+        
+        html += `<p class="notification-title `
+        switch (status) {
+        case 0:
+            html += `notification-info"><i class="fa-solid fa-fw fa-info`
+            break;
+        case 1:
+            html += `notification-warning"><i class="fa-solid fa-fw fa-triangle-exclamation`
+            break;
+        case 2:
+            html += `notification-error"><i class="fa-solid fa-fw fa-circle-xmark`
+            break;
+        }
+        html += `"></i><span> Something happened</span>`
+    }
+    html += `</div>`
+
+    AW.modal.open(html);
+}
+
+
 load_modules();
 
 // wire up the bottom buttons on the navbar
@@ -70,5 +100,6 @@ document.getElementById("nav-button-reload").onclick = async () => {
 
 document.getElementById("nav-button-notifications").onclick = () => {
     console.log("Hello notifications"); 
+    openNotificationModal();
 };
 

modules/testmodule/static/_script.js

@@ -53,8 +53,6 @@ AW.define(() => {
     }
 
     function openTestModal() {
-        console.log("hi");
-
         AW.modal.open(
             `<div class="modal-kicker">Kicker</div>
             <i class="fa-solid fa-tree"></i>