feat: update toast component to use handleCloseToast function + anima…

…tion exit improvements
pheralb · Jul 8, 2024 · e0eb094 · e0eb094
1 parent a5f0ec8
commit e0eb094
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/library/src/components/toast.tsx b/library/src/components/toast.tsx
@@ -106,7 +106,7 @@ const Toast = (props: ToastComponentProps) => {
             {props.action.text ?? 'Action'}
           </button>
         )}
-        <button onClick={props.onClose} title="Close toast">
+        <button onClick={handleCloseToast} title="Close toast">
           Close
         </button>
       </div>

diff --git a/library/src/styles/toast-component.css b/library/src/styles/toast-component.css
@@ -179,7 +179,7 @@
     opacity: 1;
     transform: translateX(0);
   }
-  100% {
+  90% {
     opacity: 0;
     transform: translateX(-90%);
   }
@@ -209,9 +209,9 @@
     opacity: 1;
     transform: translateY(0);
   }
-  100% {
+  90% {
     opacity: 0;
-    transform: translateY(100%);
+    transform: translateY(90%);
   }
 }
 
@@ -224,9 +224,9 @@
     opacity: 1;
     transform: translateY(0);
   }
-  100% {
+  90% {
     opacity: 0;
-    transform: translateY(-100%);
+    transform: translateY(-90%);
   }
 }
 
@@ -239,7 +239,7 @@
     opacity: 1;
     transform: translateX(0);
   }
-  100% {
+  90% {
     opacity: 0;
     transform: translateX(90%);
   }