override the green color for tertiary buttons to fix the notification…

… action btns

packages/framework/esm-styleguide/src/_overrides.scss

@@ -494,3 +494,10 @@ html[dir='rtl'] {
     }
   }
 }
+
+// This is to override the green border and background color which we apply to tertiary buttons. Since this in the Notification carbon uses blue.
+.cds--actionable-notification__action-button.cds--btn--tertiary {
+  background-color: transparent;
+  border: 1px solid #0f62fe;
+  color: #0f62fe;
+}

packages/framework/esm-styleguide/src/toasts/_toasts.scss

@@ -1,4 +1,6 @@
 .omrs-toasts-container {
+  display: flex;
+  flex-direction: column;
   z-index: 100000;
   position: fixed;
   width: 20rem;

packages/framework/esm-styleguide/src/toasts/toast.component.tsx

@@ -35,38 +35,30 @@ export const Toast: React.FC<ToastProps> = ({ toast, closeToast }) => {
     title,
     actionButtonLabel,
     onActionButtonClick = () => {},
-    millis = defaultOptions.millis,
+    millis = actionButtonLabel ? null : defaultOptions.millis,
   } = toast;
 
-  const [waitingForTime, setWaitingForTime] = useState(true);
-
   const handleActionClick = useCallback(() => {
     onActionButtonClick();
     closeToast();
   }, [closeToast, onActionButtonClick]);
 
   useEffect(() => {
-    if (waitingForTime) {
+    if (millis) {
       const timeoutId = setTimeout(closeToast, millis);
       return () => clearTimeout(timeoutId);
     }
-  }, [waitingForTime, closeToast, millis]);
+  }, [closeToast, millis]);
 
   return (
-    <div
-      onMouseEnter={() => setWaitingForTime(false)}
-      onMouseLeave={() => setWaitingForTime(true)}
-    >
-      <ActionableNotification
-        actionButtonLabel={actionButtonLabel}
-        kind={kind || "info"}
-        lowContrast={critical}
-        subtitle={description}
-        title={title || ""}
-        onActionButtonClick={handleActionClick}
-        onClose={closeToast}
-        timeout={actionButtonLabel ? null : millis}
-      />
-    </div>
+    <ActionableNotification
+      actionButtonLabel={actionButtonLabel}
+      kind={kind || "info"}
+      lowContrast={critical}
+      subtitle={description}
+      title={title || ""}
+      onActionButtonClick={handleActionClick}
+      onClose={closeToast}
+    />
   );
 };