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

4
app/client/modules/volumes/routes/create-volume.tsx
View File

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

10
app/client/modules/volumes/routes/volume-details.tsx
View File

@@ -2,6 +2,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
import { useNavigate, useParams, useSearchParams } from "react-router";
import { toast } from "sonner";
import { useState } from "react";
import { CircleStop, Play, Trash2, X } from "lucide-react";
import { StatusDot } from "~/client/components/status-dot";
import { Button } from "~/client/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/client/components/ui/tabs";
@@ -148,6 +149,7 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
loading={mountVol.isPending}
className={cn({ hidden: volume.status === "mounted" })}
>
<Play className="h-4 w-4 mr-2" />
Mount
</Button>
<Button
@@ -156,9 +158,11 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
loading={unmountVol.isPending}
className={cn({ hidden: volume.status !== "mounted" })}
>
<CircleStop className="h-4 w-4 mr-2" />
Unmount
</Button>
<Button variant="destructive" onClick={() => setShowDeleteConfirm(true)} disabled={deleteVol.isPending}>
<Trash2 className="h-4 w-4 mr-2" />
Delete
</Button>
</div>
@@ -200,11 +204,15 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
</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 volume
</AlertDialogAction>
</div>