refactor: remove icons where it was making the context worse

This commit is contained in:
Nicolas Meienberger
2025-12-06 11:13:26 +01:00
parent c42380b26b
commit fdb84374a0
17 changed files with 33 additions and 69 deletions

View File

@@ -1,5 +1,5 @@
import { useMutation } from "@tanstack/react-query";
import { HardDrive, Plus, X } from "lucide-react";
import { HardDrive, Plus } from "lucide-react";
import { useId } from "react";
import { useNavigate } from "react-router";
import { toast } from "sonner";
@@ -70,7 +70,6 @@ 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}>

View File

@@ -2,7 +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 { Plug, Unplug } 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";
@@ -149,7 +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" />
<Plug className="h-4 w-4 mr-2" />
Mount
</Button>
<Button
@@ -158,11 +158,10 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
loading={unmountVol.isPending}
className={cn({ hidden: volume.status !== "mounted" })}
>
<CircleStop className="h-4 w-4 mr-2" />
<Unplug 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>
@@ -204,15 +203,11 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
</AlertDialogDescription>
</AlertDialogHeader>
<div className="flex gap-3 justify-end">
<AlertDialogCancel>
<X className="h-4 w-4 mr-2" />
Cancel
</AlertDialogCancel>
<AlertDialogCancel>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>

View File

@@ -2,7 +2,7 @@ import { useMutation } from "@tanstack/react-query";
import { useState } from "react";
import { useNavigate } from "react-router";
import { toast } from "sonner";
import { Check, X } from "lucide-react";
import { Check } from "lucide-react";
import { CreateVolumeForm, type FormValues } from "~/client/components/create-volume-form";
import {
AlertDialog,
@@ -94,12 +94,9 @@ export const VolumeInfoTabContent = ({ volume, statfs }: Props) => {
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>
<X className="h-4 w-4 mr-2" />
Cancel
</AlertDialogCancel>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction onClick={confirmUpdate}>
<Check className="h-4 w-4 mr-2" />
<Check className="h-4 w-4" />
Update
</AlertDialogAction>
</AlertDialogFooter>