public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix toast dimensions issues (#6522)

pull/6526/merge
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) => ( export const SuccessToast = ({ message, toastVisible }: IToast) => (
<div <div
className={classNames( 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" toastVisible && "animate-fade-in-up"
)}> )}>
<Icon.FiCheck className="h-4 w-4" /> <span>
<Icon.FiCheck className="h-4 w-4" />
</span>
<p>{message}</p> <p>{message}</p>
</div> </div>
); );
@ -22,10 +24,12 @@ export const SuccessToast = ({ message, toastVisible }: IToast) => (
export const ErrorToast = ({ message, toastVisible }: IToast) => ( export const ErrorToast = ({ message, toastVisible }: IToast) => (
<div <div
className={classNames( 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" toastVisible && "animate-fade-in-up"
)}> )}>
<Icon.FiInfo className="h-4 w-4" /> <span>
<Icon.FiInfo className="h-4 w-4" />
</span>
<p>{message}</p> <p>{message}</p>
</div> </div>
); );
@ -33,10 +37,12 @@ export const ErrorToast = ({ message, toastVisible }: IToast) => (
export const WarningToast = ({ message, toastVisible }: IToast) => ( export const WarningToast = ({ message, toastVisible }: IToast) => (
<div <div
className={classNames( 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" toastVisible && "animate-fade-in-up"
)}> )}>
<Icon.FiInfo className="h-4 w-4" /> <span>
<Icon.FiInfo className="h-4 w-4" />
</span>
<p>{message}</p> <p>{message}</p>
</div> </div>
); );
@ -44,10 +50,12 @@ export const WarningToast = ({ message, toastVisible }: IToast) => (
export const DefaultToast = ({ message, toastVisible }: IToast) => ( export const DefaultToast = ({ message, toastVisible }: IToast) => (
<div <div
className={classNames( 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" toastVisible && "animate-fade-in-up"
)}> )}>
<Icon.FiCheck className="h-4 w-4" /> <span>
<Icon.FiCheck className="h-4 w-4" />
</span>
<p>{message}</p> <p>{message}</p>
</div> </div>
); );