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

19
app/client/components/create-repository-form.tsx
View File

@@ -2,6 +2,7 @@ import { arktypeResolver } from "@hookform/resolvers/arktype";
import { type } from "arktype";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { Check, Pencil, Save, X } from "lucide-react";
import { cn, slugify } from "~/client/lib/utils";
import { deepClean } from "~/utils/object";
import { Button } from "./ui/button";
@@ -267,6 +268,7 @@ export const CreateRepositoryForm = ({
{form.watch("path") || "/var/lib/zerobyte/repositories"}
</div>
<Button type="button" variant="outline" onClick={() => setShowPathWarning(true)} size="sm">
<Pencil className="h-4 w-4 mr-2" />
Change
</Button>
</div>
@@ -292,13 +294,17 @@ export const CreateRepositoryForm = ({
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogCancel>
<X className="h-4 w-4 mr-2" />
Cancel
</AlertDialogCancel>
<AlertDialogAction
onClick={() => {
setShowPathBrowser(true);
setShowPathWarning(false);
}}
>
<Check className="h-4 w-4 mr-2" />
I Understand, Continue
</AlertDialogAction>
</AlertDialogFooter>
@@ -320,8 +326,14 @@ export const CreateRepositoryForm = ({
/>
</div>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction onClick={() => setShowPathBrowser(false)}>Done</AlertDialogAction>
<AlertDialogCancel>
<X className="h-4 w-4 mr-2" />
Cancel
</AlertDialogCancel>
<AlertDialogAction onClick={() => setShowPathBrowser(false)}>
<Check className="h-4 w-4 mr-2" />
Done
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
@@ -775,6 +787,7 @@ export const CreateRepositoryForm = ({
{mode === "update" && (
<Button type="submit" className="w-full" loading={loading}>
<Save className="h-4 w-4 mr-2" />
Save Changes
</Button>
)}

5
app/client/components/create-volume-form.tsx
View File

@@ -1,7 +1,7 @@
import { arktypeResolver } from "@hookform/resolvers/arktype";
import { useMutation } from "@tanstack/react-query";
import { type } from "arktype";
import { CheckCircle, Loader2, XCircle } from "lucide-react";
import { CheckCircle, Loader2, Pencil, Plug, Save, XCircle } from "lucide-react";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { cn, slugify } from "~/client/lib/utils";
@@ -152,6 +152,7 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
<div className="text-sm font-mono break-all">{field.value}</div>
</div>
<Button type="button" variant="outline" size="sm" onClick={() => field.onChange("")}>
<Pencil className="h-4 w-4 mr-2" />
Change
</Button>
</div>
@@ -561,6 +562,7 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
{!testBackendConnection.isPending && testMessage && !testMessage.success && (
<XCircle className="mr-2 h-4 w-4 text-red-500" />
)}
{!testBackendConnection.isPending && !testMessage && <Plug className="mr-2 h-4 w-4" />}
{testBackendConnection.isPending
? "Testing..."
: testMessage
@@ -584,6 +586,7 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
)}
{mode === "update" && (
<Button type="submit" className="w-full" loading={loading}>
<Save className="h-4 w-4 mr-2" />
Save Changes
</Button>
)}

4
app/client/components/restore-form.tsx
View File

@@ -2,7 +2,7 @@ import { useCallback, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useNavigate } from "react-router";
import { toast } from "sonner";
import { ChevronDown, FileIcon, FolderOpen, RotateCcw } from "lucide-react";
import { ChevronDown, FileIcon, FolderOpen, RotateCcw, X } from "lucide-react";
import { Button } from "~/client/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
import { Checkbox } from "~/client/components/ui/checkbox";
@@ -161,9 +161,11 @@ export function RestoreForm({ snapshot, repositoryName, snapshotId, returnPath }
</div>
<div className="flex gap-2">
<Button variant="outline" onClick={() => navigate(returnPath)}>
<X className="h-4 w-4 mr-2" />
Cancel
</Button>
<Button variant="primary" onClick={handleRestore} disabled={isRestoring || !canRestore}>
<RotateCcw className="h-4 w-4 mr-2" />
{isRestoring
? "Restoring..."
: selectedPaths.size > 0

8
app/client/components/snapshots-table.tsx
View File

@@ -1,6 +1,6 @@
import { useState } from "react";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Calendar, Clock, Database, FolderTree, HardDrive, Trash2 } from "lucide-react";
import { Calendar, Clock, Database, FolderTree, HardDrive, Trash2, X } from "lucide-react";
import { useNavigate } from "react-router";
import { toast } from "sonner";
import { ByteSize } from "~/client/components/bytes-size";
@@ -163,12 +163,16 @@ export const SnapshotsTable = ({ snapshots, repositoryName }: Props) => {
</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>