fix stying

Author: ci-bot

apps/remix-ide/src/app/plugins/notification.tsx

@@ -44,6 +44,7 @@ export class NotificationPlugin extends Plugin implements MethodApi<INotificatio
 
   async toast(message: string | JSX.Element, timeout?: number, timestamp?: number): Promise<number>  {
     timestamp = timestamp || Date.now()
+    timestamp = timestamp + ++this.toastId
     this.dispatcher.toast(message, timeout, timestamp)
     return timestamp
   }

libs/remix-ui/toaster/src/lib/toaster.css

@@ -1,7 +1,7 @@
 /* Sonner toast styling */
 .remixui_sonner_toast {
   border-radius: 8px;
-  padding: 20px 28px;
+  padding: 20px 48px 20px 28px;
   font-weight: 700 !important;
   font-size: 19px !important;
   min-width: 350px;
@@ -45,7 +45,6 @@
 
 [data-sonner-toast]:hover {
   transform: none !important;
-  scale: 1 !important;
 }
 
 [data-sonner-toast][data-styled="true"] {
@@ -87,7 +86,6 @@
 [data-sonner-toast] [data-close-button]:hover {
   opacity: 1;
   background: rgba(0, 0, 0, 0.05) !important;
-  transform: scale(1.1);
 }
 
 [data-sonner-toast] [data-close-button] svg {
@@ -105,3 +103,40 @@
 .dark [data-sonner-toast] [data-close-button]:hover {
   background: rgba(255, 255, 255, 0.1) !important;
 }
+
+/* Custom codicon close button styling */
+[data-sonner-toast] .codicon-close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  background: transparent !important;
+  border: none;
+  color: var(--bs-dark, #212529) !important;
+  opacity: 0.7;
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  width: 24px;
+  height: 24px;
+  z-index: 1;
+}
+
+[data-sonner-toast] .codicon-close:hover {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.05) !important;
+}
+
+/* Dark theme codicon close button */
+[data-sonner-toast][data-theme="dark"] .codicon-close,
+.dark [data-sonner-toast] .codicon-close {
+  color: var(--bs-light, #f8f9fa) !important;
+}
+
+[data-sonner-toast][data-theme="dark"] .codicon-close:hover,
+.dark [data-sonner-toast] .codicon-close:hover {
+  background: rgba(255, 255, 255, 0.1) !important;
+}

libs/remix-ui/toaster/src/lib/toaster.tsx

@@ -31,18 +31,22 @@ export const ToastTrigger = (props: ToasterProps) => {
 
       // Show toast using Sonner - Sonner handles deduplication via ID automatically
       const duration = props.timeout || 2000
-      const showCloseButton = duration > 5000
+      const showCloseButton = duration > 2000
       const showLoadingIcon = duration > 2000
 
       if (typeof props.message === 'string') {
         const toastId = toast.custom(
           () => (
             <div>
               {showLoadingIcon && (
-                <span className="spinner-border spinner-border-sm me-2" role="status">
+                <span className="spinner-border spinner-border-sm me-2 alert-info" role="status">
                   <span className="visually-hidden">Loading...</span>
                 </span>
               )}
+              {showCloseButton && (
+                <span className="codicon codicon-close" onClick={() => toast.dismiss(toastId)} role="status">
+                </span>
+              )}
               {props.message}
             </div>
           ),
@@ -59,16 +63,24 @@ export const ToastTrigger = (props: ToasterProps) => {
             }
           }
         )
+        // Call the callback with the toast ID so caller can dismiss it later
+        if (props.onToastCreated) {
+          props.onToastCreated(toastId)
+        }
       } else {
         // For JSX elements, use toast.custom
         const toastId = toast.custom(
           () => (
             <div>
               {showLoadingIcon && (
-                <span className="spinner-border spinner-border-sm me-2" role="status">
+                <span className="spinner-border spinner-border-sm me-2 alert-info" role="status">
                   <span className="visually-hidden">Loading...</span>
                 </span>
               )}
+              {showCloseButton && (
+                <span className="codicon codicon-close" onClick={() => toast.dismiss(toastId)}  role="status">
+                </span>
+              )}
               {props.message}
             </div>
           ),
@@ -84,6 +96,10 @@ export const ToastTrigger = (props: ToasterProps) => {
             }
           }
         )
+        // Call the callback with the toast ID so caller can dismiss it later
+      if (props.onToastCreated) {
+        props.onToastCreated(toastId)
+      }
       }
     }
   }, [])
@@ -130,10 +146,14 @@ export const Toaster = (props: ToasterProps) => {
           () => (
             <div className="remixui_sonner_toast alert alert-info bg-light">
               {showLoadingIcon && (
-                <span className="spinner-border spinner-border-sm me-2" role="status">
+                <span className="spinner-border spinner-border-sm me-2 alert-info" role="status">
                   <span className="visually-hidden">Loading...</span>
                 </span>
               )}
+              {showCloseButton && (
+                <span className="codicon codicon-close" onClick={() => toast.dismiss(toastId)} role="status">
+                </span>
+              )}
               {props.message}
             </div>
           ),
@@ -156,10 +176,14 @@ export const Toaster = (props: ToasterProps) => {
           () => (
             <div className="remixui_sonner_toast alert alert-info bg-light">
               {showLoadingIcon && (
-                <span className="spinner-border spinner-border-sm me-2" role="status">
+                <span className="spinner-border spinner-border-sm me-2 alert-info" role="status">
                   <span className="visually-hidden">Loading...</span>
                 </span>
               )}
+              {showCloseButton && (
+                <span className="codicon codicon-close" onClick={() => toast.dismiss(toastId)}  role="status">
+                </span>
+              )}
               {props.message}
             </div>
           ),