feat: add icons to buttons and alerts for improved UI clarity

This commit is contained in:
Jakub Trávník
2025-12-03 17:31:44 +01:00
parent 7ff38f0128
commit ff4c1404a6
20 changed files with 131 additions and 33 deletions

View File

@@ -1,5 +1,5 @@
import { useMutation } from "@tanstack/react-query";
import { Bell } from "lucide-react";
import { Bell, Plus, X } from "lucide-react";
import { useId } from "react";
import { useNavigate } from "react-router";
import { toast } from "sonner";
@@ -65,9 +65,11 @@ export default function CreateNotification() {
<CreateNotificationForm mode="create" formId={formId} onSubmit={handleSubmit} />
<div className="flex justify-end gap-2 pt-4 border-t">
<Button type="button" variant="secondary" onClick={() => navigate("/notifications")}>
<X className="h-4 w-4 mr-2" />
Cancel
</Button>
<Button type="submit" form={formId} loading={createNotification.isPending}>
<Plus className="h-4 w-4 mr-2" />
Create Destination
</Button>
</div>

View File

@@ -24,7 +24,7 @@ import { getNotificationDestination } from "~/client/api-client/sdk.gen";
import type { Route } from "./+types/notification-details";
import { cn } from "~/client/lib/utils";
import { Card, CardContent, CardHeader, CardTitle } from "~/client/components/ui/card";
import { Bell, TestTube2 } from "lucide-react";
import { Bell, Save, TestTube2, Trash2, X } from "lucide-react";
import { Alert, AlertDescription } from "~/client/components/ui/alert";
import { CreateNotificationForm, type NotificationFormValues } from "../components/create-notification-form";
@@ -147,6 +147,7 @@ export default function NotificationDetailsPage({ loaderData }: Route.ComponentP
variant="destructive"
loading={deleteDestination.isPending}
>
<Trash2 className="h-4 w-4 mr-2" />
Delete
</Button>
</div>
@@ -174,6 +175,7 @@ export default function NotificationDetailsPage({ loaderData }: Route.ComponentP
<CreateNotificationForm mode="update" formId={formId} onSubmit={handleSubmit} initialValues={data.config} />
<div className="flex justify-end gap-2 pt-4 border-t">
<Button type="submit" form={formId} loading={updateDestination.isPending}>
<Save className="h-4 w-4 mr-2" />
Save Changes
</Button>
</div>
@@ -190,8 +192,14 @@ export default function NotificationDetailsPage({ loaderData }: Route.ComponentP
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction onClick={handleConfirmDelete}>Delete</AlertDialogAction>
<AlertDialogCancel>
<X className="h-4 w-4 mr-2" />
Cancel
</AlertDialogCancel>
<AlertDialogAction onClick={handleConfirmDelete}>
<Trash2 className="h-4 w-4 mr-2" />
Delete
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>