enhancement(web): mutation improvements and toast updates (#913)

* make notification switch take onToggleMutation

Instead of opening it like the edit button, it now enables/disables it directly.

* improved toast for update checks

* improved toast for download clients

it now mentions what client is enabled/disabled

* improved irc network toast

* added toast when copying apikey

* added toast to log download

implemented an info variant for the toasts

* improved feed toast

* improved toast for update checks

* Merge branch 'develop' into enhancement/mutation-improvements-toast-updates
This commit is contained in:
soup 2023-05-06 18:19:43 +02:00 committed by GitHub
parent 96e38e649a
commit 8acf33589d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 68 additions and 20 deletions

View file

@ -4,12 +4,12 @@
*/
import { FC } from "react";
import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, XMarkIcon } from "@heroicons/react/24/solid";
import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, InformationCircleIcon, XMarkIcon } from "@heroicons/react/24/solid";
import { toast, Toast as Tooast } from "react-hot-toast";
import { classNames } from "@utils";
type Props = {
type: "error" | "success" | "warning"
type: "error" | "success" | "warning" | "info";
body?: string
t?: Tooast;
};
@ -24,12 +24,14 @@ const Toast: FC<Props> = ({ type, body, t }) => (
{type === "success" && <CheckCircleIcon className="h-6 w-6 text-green-400" aria-hidden="true" />}
{type === "error" && <ExclamationCircleIcon className="h-6 w-6 text-red-400" aria-hidden="true" />}
{type === "warning" && <ExclamationTriangleIcon className="h-6 w-6 text-yellow-400" aria-hidden="true" />}
{type === "info" && <InformationCircleIcon className="h-6 w-6 text-blue-400" aria-hidden="true" />}
</div>
<div className="ml-3 w-0 flex-1 pt-0.5">
<p className="text-sm font-medium text-gray-900 dark:text-gray-200">
{type === "success" && "Success"}
{type === "error" && "Error"}
{type === "warning" && "Warning"}
{type === "info" && "Info"}
</p>
<span className="mt-1 text-sm text-gray-500 dark:text-gray-400">{body}</span>
</div>