From 14a6c5a03f1646baca8a951faa7183aa2e6f0816 Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Wed, 28 Sep 2022 23:31:19 +0530
Subject: [PATCH] feat: add transition in toasts (#4658)

* feat: add transition in toasts

* feat: toast animation improved

* fix: type check in toast

Co-authored-by: Alex van Andel <me@alexvanandel.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 packages/config/tailwind-preset.js    | 15 ++++++++++++
 packages/ui/v2/core/notifications.tsx | 33 ++++++++++++++++++++-------
 2 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/packages/config/tailwind-preset.js b/packages/config/tailwind-preset.js
index 8e62c7a63b..2f514c4b68 100644
--- a/packages/config/tailwind-preset.js
+++ b/packages/config/tailwind-preset.js
@@ -154,6 +154,21 @@ module.exports = {
           900: "#f3f4f6",
         },
       },
+      keyframes: {
+        "fade-in-up": {
+          "0%": {
+            opacity: 0.75,
+            transform: "translateY(20px)",
+          },
+          "100%": {
+            opacity: 1,
+            transform: "translateY(0)",
+          },
+        },
+      },
+      animation: {
+        "fade-in-up": "fade-in-up 0.35s cubic-bezier(.21,1.02,.73,1)",
+      },
       boxShadow: {
         dropdown: "0px 2px 6px -1px rgba(0, 0, 0, 0.08)",
       },
diff --git a/packages/ui/v2/core/notifications.tsx b/packages/ui/v2/core/notifications.tsx
index 428b316d62..6b78b63586 100644
--- a/packages/ui/v2/core/notifications.tsx
+++ b/packages/ui/v2/core/notifications.tsx
@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import { Check, Info } from "react-feather";
 import toast from "react-hot-toast";
 
@@ -5,8 +6,12 @@ export default function showToast(message: string, variant: "success" | "warning
   switch (variant) {
     case "success":
       toast.custom(
-        () => (
-          <div className="data-testid-toast-success bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md">
+        (t) => (
+          <div
+            className={classNames(
+              "data-testid-toast-success bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md",
+              t.visible && "animate-fade-in-up"
+            )}>
             <Check className="h-4 w-4" />
             <p>{message}</p>
           </div>
@@ -16,8 +21,12 @@ export default function showToast(message: string, variant: "success" | "warning
       break;
     case "error":
       toast.custom(
-        () => (
-          <div className="mb-2 flex h-9 items-center space-x-2 rounded-md bg-red-100 p-3 text-sm font-semibold text-red-900 shadow-md">
+        (t) => (
+          <div
+            className={classNames(
+              "animate-fade-in-up mb-2 flex h-9 items-center space-x-2 rounded-md bg-red-100 p-3 text-sm font-semibold text-red-900 shadow-md",
+              t.visible && "animate-fade-in-up"
+            )}>
             <Info className="h-4 w-4" />
             <p>{message}</p>
           </div>
@@ -27,8 +36,12 @@ export default function showToast(message: string, variant: "success" | "warning
       break;
     case "warning":
       toast.custom(
-        () => (
-          <div className="bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md">
+        (t) => (
+          <div
+            className={classNames(
+              "animate-fade-in-up bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md",
+              t.visible && "animate-fade-in-up"
+            )}>
             <Info className="h-4 w-4" />
             <p>{message}</p>
           </div>
@@ -38,8 +51,12 @@ export default function showToast(message: string, variant: "success" | "warning
       break;
     default:
       toast.custom(
-        () => (
-          <div className="bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md">
+        (t) => (
+          <div
+            className={classNames(
+              "animate-fade-in-up bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md",
+              t.visible && "animate-fade-in-up"
+            )}>
             <Check className="h-4 w-4" />
             <p>{message}</p>
           </div>