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" ? (
<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}
>
<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 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}
</h3>
{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">
{dropItem.list.map((item, idx) => (
<li key={idx}>{item}</li>
<li className="break-words" key={idx}>{item}</li>
))}
</ul>
</div>
@ -62,7 +62,7 @@ export default function SingleAlert({
removeAlert(dropItem.id);
}, 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>
<XMarkIcon className="h-5 w-5" aria-hidden="true" />
@ -72,22 +72,22 @@ export default function SingleAlert({
</div>
) : type === "notice" ? (
<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}
>
<div className="flex-shrink-0">
<InformationCircleIcon
className="h-5 w-5 text-blue-400"
className="h-5 w-5 text-blue-400 dark:text-blue-50"
aria-hidden="true"
/>
</div>
<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">
{dropItem.link ? (
<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
</Link>
@ -106,7 +106,7 @@ export default function SingleAlert({
removeAlert(dropItem.id);
}, 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>
<XMarkIcon className="h-5 w-5" aria-hidden="true" />
@ -116,17 +116,17 @@ export default function SingleAlert({
</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}
>
<div className="flex-shrink-0">
<CheckCircleIcon
className="h-5 w-5 text-green-400"
className="h-5 w-5 text-green-400 dark:text-green-50"
aria-hidden="true"
/>
</div>
<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}
</p>
</div>
@ -140,7 +140,7 @@ export default function SingleAlert({
removeAlert(dropItem.id);
}, 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>
<XMarkIcon className="h-5 w-5" aria-hidden="true" />