alerts

Author: tfwright

assets/css/app.css

@@ -20,7 +20,6 @@
         .header {
             background: #fff;
             border-bottom: 1px solid #d2d2d7;
-            padding: 0 24px;
             position: fixed;
             top: 0;
             left: 0;
@@ -29,8 +28,7 @@
         }
 
         .header-content {
-            max-width: 1400px;
-            margin: 0 auto;
+            margin: 0 32px 0 24px;
             display: flex;
             align-items: center;
             justify-content: space-between;
@@ -55,15 +53,45 @@
             top: 64px;
             left: 0;
             right: 0;
-            background: #fef2f2;
-            border-bottom: 2px solid #dc2626;
             padding: 14px 24px;
             display: flex;
             align-items: center;
             justify-content: space-between;
             z-index: 99;
         }
 
+        .alert-bar.error {
+            background: #fef2f2;
+            border-bottom: 2px solid #dc2626;
+            color: #dc2626;
+        }
+        .alert-bar.error:hover {
+            color: #7f1d1d;
+        }
+
+        .alert-bar.success {
+            background: #f0fdf4;
+            border-bottom: 2px solid #16a34a;
+            color: #16a34a;
+        }
+        .alert-bar.success:hover {
+            color: #166534;
+        }
+
+        .alert-bar.info{
+            background: #eff6ff;
+            border-bottom: 2px solid #2563eb;
+            color: #2563eb;
+        }
+        .alert-bar.info:hover {
+            color: #1e40af;
+        }
+
+        #alert-bar[class$='loading'] {
+            opacity:.5;
+            pointer-events: none;
+        }
+
         .alert-content {
             display: flex;
             align-items: center;
@@ -74,20 +102,16 @@
         .alert-icon {
             width: 20px;
             height: 20px;
-            color: #dc2626;
             flex-shrink: 0;
+            cursor: pointer;
         }
 
         .alert-message {
-            color: #7f1d1d;
             font-size: 14px;
             font-weight: 500;
         }
 
         .alert-close {
-            background: #ffffff;
-            border: 1px solid #dc2626;
-            color: #dc2626;
             cursor: pointer;
             padding: 6px 12px;
             border-radius: 6px;
@@ -98,15 +122,6 @@
             flex-shrink: 0;
         }
 
-        .alert-close:hover {
-            background: #dc2626;
-            color: #ffffff;
-        }
-
-        .alert-bar.hidden {
-            display: none;
-        }
-
         /* Breadcrumb Navigation */
         .breadcrumb {
             display: none;
@@ -384,14 +399,6 @@
             transition: width 0.3s ease;
         }
 
-        .progress-bar.warning {
-            background: #f59e0b;
-        }
-
-        .progress-bar.success {
-            background: #10b981;
-        }
-
         /* Content Area */
         .content {
             flex: 1;
@@ -547,7 +554,7 @@
             z-index: 1000;
         }
 
-        .settings-menu a {
+        .settings-menu a, .settings-menu span {
             display: block;
             padding: 10px 16px;
             color: #1d1d1f;
@@ -556,7 +563,7 @@
             transition: background 0.2s;
         }
 
-        .settings-menu a:hover {
+        .settings-menu a:hover, .settings-menu span:hover {
             background: #f5f5f7;
         }
 

assets/js/app.js

@@ -2,7 +2,6 @@ import "phoenix_html";
 import { Socket } from "phoenix";
 import { LiveSocket } from "phoenix_live_view";
 import ClipboardJS from "clipboard";
-import Toastify from "toastify-js";
 import topbar from "topbar";
 
 topbar.config({
@@ -12,18 +11,6 @@ topbar.config({
 });
 window.addEventListener("phx:page-loading-start", (info) => topbar.show());
 window.addEventListener("phx:page-loading-stop", () => topbar.hide());
-window.addEventListener("phx:success", (e) => {
-  Toastify({
-    text: e.detail.msg,
-    className: "toast__container--success",
-  }).showToast();
-});
-window.addEventListener("phx:error", (e) => {
-  Toastify({
-    text: e.detail.msg,
-    className: "toast__container--error",
-  }).showToast();
-});
 
 let Hooks = {};