vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 1.3k Packages Projects Releases Wiki Activity

feat: add transition in toasts (#4658)

Browse Source 
* 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>
This commit is contained in:
Udit Takkar
2022-09-28 19:01:19 +01:00
committed by GitHub
co-authored by Alex van Andel Peer Richelsen
parent 5af20f5a7b
commit 14a6c5a03f
2 changed files with 40 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/config/tailwind-preset.js
+15
View File
@@ -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)",
},
packages/ui/v2/core/notifications.tsx
+25 -8
View File
@@ -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>