Updated toast outlines for persistent toasts (#371)

withstudiocms · Nov 3, 2024 · 79032e9 · 79032e9
1 parent f0d60a7
commit 79032e9
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/.changeset/thick-dryers-train.md b/.changeset/thick-dryers-train.md
@@ -0,0 +1,5 @@
+---
+"@studiocms/ui": patch
+---
+
+Adjusted persistent toasts to include an outline for better visibility
diff --git a/packages/studiocms_ui/src/components/Toast/Toaster.astro b/packages/studiocms_ui/src/components/Toast/Toaster.astro
@@ -71,7 +71,7 @@ const {
     const toastContainer = document.createElement('div');
     const toastID = generateID('toast');
     toastContainer.id = toastID;
-    toastContainer.classList.add('toast-container', props.type, `${props.closeButton || props.persistent && "closeable"}`);
+    toastContainer.classList.add('toast-container', props.type, `${props.closeButton || props.persistent && "closeable"}`, `${props.persistent && 'persistent'}`);
 
     const toastHeader = document.createElement('div');
     toastHeader.classList.add('toast-header');
@@ -262,6 +262,22 @@ const {
     animation: toast-closing .25s ease forwards;
   }
 
+  .toast-container.persistent {
+    border: 1px solid hsl(var(--primary-base));
+  }
+
+  .toast-container.persistent.success {
+    border: 1px solid hsl(var(--success-base));
+  }
+
+  .toast-container.persistent.warning {
+    border: 1px solid hsl(var(--warning-base));
+  }
+
+  .toast-container.persistent.danger {
+    border: 1px solid hsl(var(--danger-base));
+  }
+
   @keyframes toast-pop-in {
     0% {
       opacity: 0;