ondra/ironmount
1
1
Fork 0
mirror of https://github.com/nicotsx/ironmount.git synced 2025-12-10 12:10:51 +01:00
Code Issues Packages Projects Releases 1 Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

5
app/client/modules/backups/components/schedule-notifications-config.tsx
View File

@@ -1,5 +1,5 @@
import { useMutation, useQuery } from "@tanstack/react-query";
import { Bell, Plus, Trash2 } from "lucide-react";
import { Bell, Plus, Save, Trash2, X } from "lucide-react";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { Button } from "~/client/components/ui/button";
@@ -174,6 +174,7 @@ export const ScheduleNotificationsConfig = ({ scheduleId, destinations }: Props)
</SelectContent>
</Select>
<Button variant="ghost" size="sm" onClick={() => setIsAddingNew(false)}>
<X className="h-4 w-4 mr-2" />
Cancel
</Button>
</div>
@@ -254,9 +255,11 @@ export const ScheduleNotificationsConfig = ({ scheduleId, destinations }: Props)
{hasChanges && (
<div className="flex gap-2 justify-end mt-4 pt-4">
<Button variant="outline" size="sm" onClick={handleReset}>
<X className="h-4 w-4 mr-2" />
Cancel
</Button>
<Button variant="default" size="sm" onClick={handleSave} loading={updateNotifications.isPending}>
<Save className="h-4 w-4 mr-2" />
Save changes
</Button>
</div>

18
app/client/modules/backups/components/schedule-summary.tsx
View File

@@ -1,4 +1,4 @@
import { Eraser, Pencil, Play, Square, Trash2 } from "lucide-react";
import { Check, Eraser, Pencil, Play, Square, Trash2, X } from "lucide-react";
import { useMemo, useState } from "react";
import { OnOff } from "~/client/components/onoff";
import { Button } from "~/client/components/ui/button";
@@ -199,11 +199,15 @@ export const ScheduleSummary = (props: Props) => {
</AlertDialogDescription>
</AlertDialogHeader>
<div className="flex gap-3 justify-end">
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogCancel>
<X className="h-4 w-4 mr-2" />
Cancel
</AlertDialogCancel>
<AlertDialogAction
onClick={handleConfirmDelete}
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
>
<Trash2 className="h-4 w-4 mr-2" />
Delete schedule
</AlertDialogAction>
</div>
@@ -220,8 +224,14 @@ export const ScheduleSummary = (props: Props) => {
</AlertDialogDescription>
</AlertDialogHeader>
<div className="flex gap-3 justify-end">
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction onClick={handleConfirmForget}>Run cleanup</AlertDialogAction>
<AlertDialogCancel>
<X className="h-4 w-4 mr-2" />
Cancel
</AlertDialogCancel>
<AlertDialogAction onClick={handleConfirmForget}>
<Check className="h-4 w-4 mr-2" />
Run cleanup
</AlertDialogAction>
</div>
</AlertDialogContent>
</AlertDialog>

4
app/client/modules/backups/components/snapshot-file-browser.tsx
View File

@@ -1,6 +1,6 @@
import { useCallback } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { FileIcon } from "lucide-react";
import { FileIcon, RotateCcw, Trash2 } from "lucide-react";
import { Link } from "react-router";
import { FileTree } from "~/client/components/file-tree";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
@@ -98,6 +98,7 @@ export const SnapshotFileBrowser = (props: Props) => {
}
className={buttonVariants({ variant: "primary", size: "sm" })}
>
<RotateCcw className="h-4 w-4 mr-2" />
Restore
</Link>
{onDeleteSnapshot && (
@@ -108,6 +109,7 @@ export const SnapshotFileBrowser = (props: Props) => {
disabled={isDeletingSnapshot}
loading={isDeletingSnapshot}
>
<Trash2 className="h-4 w-4 mr-2" />
{isDeletingSnapshot ? "Deleting..." : "Delete Snapshot"}
</Button>
)}

9
app/client/modules/backups/routes/backup-details.tsx
View File

@@ -2,6 +2,7 @@ import { useId, useState } from "react";
import { useQuery, useMutation } from "@tanstack/react-query";
import { redirect, useNavigate } from "react-router";
import { toast } from "sonner";
import { Save, Trash2, X } from "lucide-react";
import { Button } from "~/client/components/ui/button";
import {
AlertDialog,
@@ -201,9 +202,11 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
<CreateScheduleForm volume={schedule.volume} initialValues={schedule} onSubmit={handleSubmit} formId={formId} />
<div className="flex justify-end mt-4 gap-2">
<Button type="submit" className="ml-auto" variant="primary" form={formId} loading={updateSchedule.isPending}>
<Save className="h-4 w-4 mr-2" />
Update schedule
</Button>
<Button variant="outline" onClick={() => setIsEditMode(false)}>
<X className="h-4 w-4 mr-2" />
Cancel
</Button>
</div>
@@ -254,12 +257,16 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogCancel>
<X className="h-4 w-4 mr-2" />
Cancel
</AlertDialogCancel>
<AlertDialogAction
onClick={handleConfirmDelete}
disabled={deleteSnapshot.isPending}
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
>
<Trash2 className="h-4 w-4 mr-2" />
Delete snapshot
</AlertDialogAction>
</AlertDialogFooter>

3
app/client/modules/backups/routes/create-backup.tsx
View File

@@ -1,6 +1,6 @@
import { useId, useState } from "react";
import { useMutation, useQuery } from "@tanstack/react-query";
import { Database, HardDrive } from "lucide-react";
import { Database, HardDrive, Plus } from "lucide-react";
import { Link, useNavigate } from "react-router";
import { toast } from "sonner";
import {
@@ -160,6 +160,7 @@ export default function CreateBackup({ loaderData }: Route.ComponentProps) {
<CreateScheduleForm volume={selectedVolume} onSubmit={handleSubmit} formId={formId} />
<div className="flex justify-end mt-4 gap-2">
<Button type="submit" variant="primary" form={formId} loading={createSchedule.isPending}>
<Plus className="h-4 w-4 mr-2" />
Create
</Button>
</div>