maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix toast dimensions issues (#6522)

This commit is contained in:
Mohammed Cherfaoui 2023-01-17 22:15:04 +01:00 committed by GitHub
parent 8aa089efe6
commit a2e9bf0504
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/ui/components/toast/showToast.tsx
View File

@ -11,10 +11,12 @@ type IToast = {
export const SuccessToast = ({ message, toastVisible }: IToast) => (
<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 rtl:space-x-reverse",
"data-testid-toast-success bg-brand-500 mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md rtl:space-x-reverse md:max-w-sm",
toastVisible && "animate-fade-in-up"
)}>
<Icon.FiCheck className="h-4 w-4" />
<span>
<Icon.FiCheck className="h-4 w-4" />
</span>
<p>{message}</p>
</div>
);
@ -22,10 +24,12 @@ export const SuccessToast = ({ message, toastVisible }: IToast) => (
export const ErrorToast = ({ message, toastVisible }: IToast) => (
<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 rtl:space-x-reverse",
"animate-fade-in-up mb-2 flex h-auto items-center space-x-2 rounded-md bg-red-100 p-3 text-sm font-semibold text-red-900 shadow-md rtl:space-x-reverse md:max-w-sm",
toastVisible && "animate-fade-in-up"
)}>
<Icon.FiInfo className="h-4 w-4" />
<span>
<Icon.FiInfo className="h-4 w-4" />
</span>
<p>{message}</p>
</div>
);
@ -33,10 +37,12 @@ export const ErrorToast = ({ message, toastVisible }: IToast) => (
export const WarningToast = ({ message, toastVisible }: IToast) => (
<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 rtl:space-x-reverse",
"animate-fade-in-up bg-brand-500 mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md rtl:space-x-reverse md:max-w-sm",
toastVisible && "animate-fade-in-up"
)}>
<Icon.FiInfo className="h-4 w-4" />
<span>
<Icon.FiInfo className="h-4 w-4" />
</span>
<p>{message}</p>
</div>
);
@ -44,10 +50,12 @@ export const WarningToast = ({ message, toastVisible }: IToast) => (
export const DefaultToast = ({ message, toastVisible }: IToast) => (
<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 rtl:space-x-reverse",
"animate-fade-in-up bg-brand-500 mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md rtl:space-x-reverse md:max-w-sm",
toastVisible && "animate-fade-in-up"
)}>
<Icon.FiCheck className="h-4 w-4" />
<span>
<Icon.FiCheck className="h-4 w-4" />
</span>
<p>{message}</p>
</div>
);