refactor: adjust icon sizes and styles in overview components

This commit is contained in:
Mauricio Siu 2026-08-14 00:25:59 -06:00
parent 518ee44ea6
commit b8e8704493
2 changed files with 8 additions and 68 deletions

View File

@ -5,24 +5,15 @@ import {
CircuitBoard,
GlobeIcon,
Loader2,
MoreHorizontal,
RefreshCw,
ServerIcon,
} from "lucide-react";
import Link from "next/link";
import { useMemo, useState } from "react";
import { RestoreVolumeBackups } from "@/components/dashboard/application/volume-backups/restore-volume-backups";
import { RestoreBackup } from "@/components/dashboard/database/backups/restore-backup";
import { DB_ENGINE_ICONS } from "@/components/icons/data-tools-icons";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
Select,
SelectContent,
@ -213,7 +204,6 @@ export const ShowOverviewBackups = () => {
<TableHead>Destination</TableHead>
<TableHead>Kind</TableHead>
<TableHead>Status</TableHead>
<TableHead className="text-right">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@ -226,13 +216,6 @@ export const ShowOverviewBackups = () => {
) : (
row.serviceName
);
const canRestoreBackup =
row.kind === "backup" && !!row.serviceOwnerId;
const canRestoreVolumeBackup =
row.kind === "volumeBackup" &&
!!row.serviceOwnerId &&
(row.serviceOwnerType === "application" ||
row.serviceOwnerType === "compose");
return (
<TableRow key={row.deploymentId}>
<TableCell className="whitespace-nowrap text-sm">
@ -259,52 +242,6 @@ export const ShowOverviewBackups = () => {
</Badge>
)}
</TableCell>
<TableCell className="text-right">
{(canRestoreBackup || canRestoreVolumeBackup) && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0">
<span className="sr-only">Open menu</span>
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{canRestoreBackup && row.serviceOwnerId && (
<RestoreBackup
id={row.serviceOwnerId}
databaseType={row.databaseType as any}
serverId={row.serverId}
backupType={row.backupType ?? "database"}
trigger={
<DropdownMenuItem
onSelect={(e) => e.preventDefault()}
>
Restore
</DropdownMenuItem>
}
/>
)}
{canRestoreVolumeBackup &&
row.serviceOwnerId &&
(row.serviceOwnerType === "application" ||
row.serviceOwnerType === "compose") && (
<RestoreVolumeBackups
id={row.serviceOwnerId}
type={row.serviceOwnerType}
serverId={row.serverId ?? undefined}
trigger={
<DropdownMenuItem
onSelect={(e) => e.preventDefault()}
>
Restore
</DropdownMenuItem>
}
/>
)}
</DropdownMenuContent>
</DropdownMenu>
)}
</TableCell>
</TableRow>
);
})}

View File

@ -250,21 +250,21 @@ export const ShowOverviewServices = () => {
if (service.type in DB_ENGINE_ICONS) {
const Icon =
DB_ENGINE_ICONS[service.type as keyof typeof DB_ENGINE_ICONS];
return <Icon className="h-7 w-7" />;
return <Icon className="h-5 w-5" />;
}
if (service.icon) {
return (
<img
src={service.icon}
alt={service.name}
className="size-7 object-contain rounded-sm"
className="size-5 object-contain rounded-sm"
/>
);
}
return service.type === "compose" ? (
<CircuitBoard className="h-6 w-6" />
<CircuitBoard className="h-5 w-5" />
) : (
<GlobeIcon className="h-6 w-6" />
<GlobeIcon className="h-5 w-5" />
);
};
@ -419,7 +419,10 @@ export const ShowOverviewServices = () => {
</TableCell>
<TableCell>{TYPE_LABELS[service.type]}</TableCell>
<TableCell>
<StatusTooltip status={service.status as any} />
<StatusTooltip
status={service.status as any}
className="size-2.5"
/>
</TableCell>
<TableCell>
<div className="flex items-center gap-1.5 text-muted-foreground">