changed dark mode classes

This commit is contained in:
Lucas Oliveira 2023-05-11 23:18:30 -03:00
commit 3fde0df580

View file

@ -30,21 +30,21 @@ export default function SingleAlert({
> >
{type === "error" ? ( {type === "error" ? (
<div <div
className="flex bg-red-50 rounded-md p-3 mb-2 mx-2" className="flex bg-red-50 dark:bg-red-600/50 rounded-md p-3 mb-2 mx-2"
key={dropItem.id} key={dropItem.id}
> >
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" /> <XCircleIcon className="h-5 w-5 text-red-400 dark:text-red-50" aria-hidden="true" />
</div> </div>
<div className="ml-3"> <div className="ml-3">
<h3 className="text-sm font-medium text-red-800"> <h3 className="text-sm break-words font-medium text-red-800 dark:text-white/80">
{dropItem.title} {dropItem.title}
</h3> </h3>
{dropItem.list ? ( {dropItem.list ? (
<div className="mt-2 text-sm text-red-700"> <div className="mt-2 text-sm text-red-700 dark:text-red-50">
<ul className="list-disc space-y-1 pl-5"> <ul className="list-disc space-y-1 pl-5">
{dropItem.list.map((item, idx) => ( {dropItem.list.map((item, idx) => (
<li key={idx}>{item}</li> <li className="break-words" key={idx}>{item}</li>
))} ))}
</ul> </ul>
</div> </div>
@ -62,7 +62,7 @@ export default function SingleAlert({
removeAlert(dropItem.id); removeAlert(dropItem.id);
}, 500); }, 500);
}} }}
className="inline-flex rounded-md bg-red-50 p-1.5 text-red-500" className="inline-flex rounded-md bg-red-50 dark:bg-transparent p-1.5 text-red-500 dark:text-red-50"
> >
<span className="sr-only">Dismiss</span> <span className="sr-only">Dismiss</span>
<XMarkIcon className="h-5 w-5" aria-hidden="true" /> <XMarkIcon className="h-5 w-5" aria-hidden="true" />
@ -72,22 +72,22 @@ export default function SingleAlert({
</div> </div>
) : type === "notice" ? ( ) : type === "notice" ? (
<div <div
className="flex rounded-md bg-blue-50 p-3 mb-2 mx-2" className="flex rounded-md bg-blue-50 dark:bg-blue-600/50 p-3 mb-2 mx-2"
key={dropItem.id} key={dropItem.id}
> >
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<InformationCircleIcon <InformationCircleIcon
className="h-5 w-5 text-blue-400" className="h-5 w-5 text-blue-400 dark:text-blue-50"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
<div className="ml-3 flex-1 md:flex md:justify-between"> <div className="ml-3 flex-1 md:flex md:justify-between">
<p className="text-sm text-blue-700">{dropItem.title}</p> <p className="text-sm text-blue-700 dark:text-white/80">{dropItem.title}</p>
<p className="mt-3 text-sm md:mt-0 md:ml-6"> <p className="mt-3 text-sm md:mt-0 md:ml-6">
{dropItem.link ? ( {dropItem.link ? (
<Link <Link
to={dropItem.link} to={dropItem.link}
className="whitespace-nowrap font-medium text-blue-700 hover:text-blue-600" className="whitespace-nowrap font-medium text-blue-700 dark:text-blue-50 dark:hover:text-blue-100 hover:text-blue-600"
> >
Details Details
</Link> </Link>
@ -106,7 +106,7 @@ export default function SingleAlert({
removeAlert(dropItem.id); removeAlert(dropItem.id);
}, 500); }, 500);
}} }}
className="inline-flex rounded-md bg-blue-50 p-1.5 text-blue-500" className="inline-flex rounded-md bg-blue-50 dark:bg-transparent p-1.5 text-blue-500 dark:text-blue-50"
> >
<span className="sr-only">Dismiss</span> <span className="sr-only">Dismiss</span>
<XMarkIcon className="h-5 w-5" aria-hidden="true" /> <XMarkIcon className="h-5 w-5" aria-hidden="true" />
@ -116,17 +116,17 @@ export default function SingleAlert({
</div> </div>
) : ( ) : (
<div <div
className="flex bg-green-50 p-3 mb-2 mx-2 rounded-md" className="flex bg-green-50 dark:bg-green-600/50 p-3 mb-2 mx-2 rounded-md"
key={dropItem.id} key={dropItem.id}
> >
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<CheckCircleIcon <CheckCircleIcon
className="h-5 w-5 text-green-400" className="h-5 w-5 text-green-400 dark:text-green-50"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
<div className="ml-3"> <div className="ml-3">
<p className="text-sm font-medium text-green-800"> <p className="text-sm font-medium text-green-800 dark:bg-white/80">
{dropItem.title} {dropItem.title}
</p> </p>
</div> </div>
@ -140,7 +140,7 @@ export default function SingleAlert({
removeAlert(dropItem.id); removeAlert(dropItem.id);
}, 500); }, 500);
}} }}
className="inline-flex rounded-md bg-green-50 p-1.5 text-green-500" className="inline-flex rounded-md bg-green-50 dark:bg-transparent p-1.5 text-green-500 dark:text-green-50"
> >
<span className="sr-only">Dismiss</span> <span className="sr-only">Dismiss</span>
<XMarkIcon className="h-5 w-5" aria-hidden="true" /> <XMarkIcon className="h-5 w-5" aria-hidden="true" />