fix styles, debugging styles

Author: Otto Wachter

js/modules/toast.js

@@ -38,7 +38,7 @@ const toastModule = new function() {
     // Create the container for the toasts
     createContainer(position) {
       const container = document.createElement('div');
-      container.className = `enable-toast enable-toast--${position}`;
+      container.className = `enable-toast__container enable-toast__container--${position}`;
       return container;
     }
 
@@ -57,7 +57,7 @@ const toastModule = new function() {
       toastElement.offsetHeight; // Force reflow to ensure the element is rendered before adding the visible class
 
       setTimeout(() => {
-        toastElement.classList.add('enable-toast--visible');
+        toastElement.classList.add('enable-toast__item--visible');
       }, 100); // Slight delay to ensure screen readers catch the change
 
       // Update the toast rack with the new toast
@@ -66,7 +66,7 @@ const toastModule = new function() {
       this.updateToggleRackButton();
     }
 
-    // Create the individual toast element
+    // Create the individual toast element (Using enable-toast__item)
     createToastElement(toastData) {
       const { message, level, id } = toastData;
       const toast = document.createElement('div');
@@ -98,7 +98,7 @@ const toastModule = new function() {
     dismissToast(toastData) {
       const toastElement = this.container.querySelector(`[data-id="${toastData.id}"]`);
       if (toastElement) {
-        toastElement.classList.add('enable-toast--exit');
+        toastElement.classList.add('enable-toast__item--exit');
         setTimeout(() => {
           toastElement.remove();
           this.visibleQueue = this.visibleQueue.filter(t => t.id !== toastData.id);
@@ -123,9 +123,9 @@ const toastModule = new function() {
       this.visibleQueue.forEach((toast, index) => {
         const toastElement = this.container.querySelector(`[data-id="${toast.id}"]`);
         if (index < this.maxVisible) {
-          toastElement.classList.add('enable-toast--visible');
+          toastElement.classList.add('enable-toast__item--visible');
         } else {
-          toastElement.classList.remove('enable-toast--visible');
+          toastElement.classList.remove('enable-toast__item--visible');
         }
       });
 
@@ -146,7 +146,7 @@ const toastModule = new function() {
       this.toastQueue.forEach(toastData => {
         const { message, level, id } = toastData;
         const toastElement = document.createElement('div');
-        toastElement.className = 'enable-toast__item enable-toast--visible';
+        toastElement.className = 'enable-toast__item enable-toast__item--visible';
         toastElement.style.backgroundColor = this.levels[level]?.color || '#333';
         toastElement.setAttribute('data-id', id);
 
@@ -189,4 +189,4 @@ const toastModule = new function() {
   }
 };
 
-export default toastModule;
+export default toastModule;

less/toast.less

@@ -13,13 +13,22 @@
 @rack-width: 300px;
 @rack-max-height: 400px;
 
-// Toast container positions
+// Debugging colors for visibility
+@debug-border-color: yellow;
+@debug-background: rgba(255, 255, 0, 0.2);
+@debug-z-index: 9999;
+
+// Toast container positions with added debugging styles
 .enable-toast {
     &__container {
         position: fixed;
-        z-index: 9999;
+        z-index: @debug-z-index; // Increased z-index for debugging visibility
         display: flex;
         transition: @toast-transition;
+        border: 2px dashed @debug-border-color; // Debugging border to visualize container
+
+        // Debugging background to visualize container
+        background-color: @debug-background;
 
         &--bottom-right,
         &--bottom-left,
@@ -56,7 +65,8 @@
         }
     }
 
-    &__toast {
+    // Toast item styles with debugging styles for visibility
+    &__item {
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -69,6 +79,10 @@
         opacity: 0;
         transition: opacity 0.5s ease-in-out;
 
+        // Debugging border and background to visualize the toast
+        border: 2px solid red;
+        background-color: @debug-background;
+
         &--visible {
             opacity: 1;
         }
@@ -78,19 +92,21 @@
         }
     }
 
-    &__close-button {
+    &__close {
         background: none;
         border: none;
         color: @toast-close-color;
         font-size: 16px;
         cursor: pointer;
 
+        // Debugging hover color
         &:hover {
             color: @toast-close-hover-color;
+            border: 1px solid @debug-border-color; // Debugging border
         }
     }
 
-    // toast rack
+    // Toast rack with debugging styles
     &__rack {
         position: fixed;
         top: 20px;
@@ -103,5 +119,14 @@
         overflow-y: auto;
         display: none;
         z-index: 9998;
+
+        // Debugging styles
+        background-color: rgba(
+            0,
+            255,
+            0,
+            0.2
+        ); // Light green background for rack visibility
+        border: 2px dashed orange;
     }
 }