VUU-333: Fix Toast Animation (finos#1042)

* SLVUU-123: Add nominal timeout before setting toast position * SLVUU-123: Remove toastContainer class
ScottLogic · Dec 5, 2023 · 69509a4 · 69509a4
1 parent f931d6b
commit 69509a4
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 12 deletions.
diff --git a/vuu-ui/packages/vuu-popups/src/notifications/NotificationsProvider.tsx b/vuu-ui/packages/vuu-popups/src/notifications/NotificationsProvider.tsx
@@ -60,7 +60,6 @@ export const NotificationsProvider = (props: {
   return (
     <NotificationsContext.Provider value={{ notify }}>
       <div
-        className={`${classBase}-toastContainer`}
         style={{
           width:
             toastWidth + toastContainerRightPadding + toastContainerLeftPadding,
@@ -94,7 +93,10 @@ export const ToastNotification = (props: ToastNotificationProps) => {
   const [right, setRight] = useState(-toastWidth - toastContainerRightPadding);
 
   useEffect(() => {
-    setRight(toastContainerRightPadding);
+    setTimeout(
+      () => setRight(toastContainerRightPadding)
+    );
+
     if (animated) {
       setTimeout(
         () => setRight(-toastWidth - toastContainerRightPadding),

diff --git a/vuu-ui/packages/vuu-popups/src/notifications/notifications.css b/vuu-ui/packages/vuu-popups/src/notifications/notifications.css
@@ -1,13 +1,3 @@
-.vuuToastNotifications-toastContainer {
-    --top: 60px;
-    position: absolute;
-    right: 0;
-    top: var(--top);
-    overflow: hidden;
-    height:calc(100% - var(--top));
-    font-size: 12px;
-}
-
 .vuuToastNotifications-toast {
     --vuu-icon-size: 24px;
     position: absolute;