feat: update toast component to use handleCloseToast function + animation exit improvements

Author: pheralb

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>

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%);
   }