danvics/zerobyte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

refactor: improve colors

Browse source
This commit is contained in:
Nicolas Meienberger 2026-03-18 19:42:39 +01:00
parent c54ee10f73
commit 7fba271107
1 changed files with 23 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
app/client/modules/backups/components/schedule-summary.tsx
View file

@ -21,6 +21,7 @@ import { handleRepositoryError } from "~/client/lib/errors";
import { formatShortDateTime, formatTimeAgo } from "~/client/lib/datetime"; import { formatShortDateTime, formatTimeAgo } from "~/client/lib/datetime";
import { Link } from "@tanstack/react-router"; import { Link } from "@tanstack/react-router";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "~/client/components/ui/collapsible"; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "~/client/components/ui/collapsible";
import { cn } from "~/client/lib/utils";
type Props = { type Props = {
schedule: BackupSchedule; schedule: BackupSchedule;
@ -206,16 +207,32 @@ export const ScheduleSummary = (props: Props) => {
{backupDetails && (schedule.lastBackupStatus === "warning" || schedule.lastBackupStatus === "error") && ( {backupDetails && (schedule.lastBackupStatus === "warning" || schedule.lastBackupStatus === "error") && (
<div className="@medium:col-span-2 @wide:col-span-4"> <div className="@medium:col-span-2 @wide:col-span-4">
<Collapsible className="border border-border/50 rounded-lg overflow-hidden"> <Collapsible
<CollapsibleTrigger className="w-full p-3 hover:bg-muted/50 transition-colors"> className={cn("border border-border/50 rounded-lg overflow-hidden", {
"border-yellow-500/20 bg-yellow-500/5": schedule.lastBackupStatus === "warning",
"border-red-500/20 bg-red-500/5": schedule.lastBackupStatus === "error",
})}
>
<CollapsibleTrigger
className={cn("w-full justify-start p-3 hover:bg-muted/50 transition-colors", {
"hover:bg-yellow-500/10": schedule.lastBackupStatus === "warning",
"hover:bg-red-500/10": schedule.lastBackupStatus === "error",
})}
>
<span>{schedule.lastBackupStatus === "warning" ? "Warning details" : "Error details"}</span> <span>{schedule.lastBackupStatus === "warning" ? "Warning details" : "Error details"}</span>
</CollapsibleTrigger> </CollapsibleTrigger>
<CollapsibleContent className="border-t border-border/50 bg-muted/30"> <CollapsibleContent
className={cn("border-t border-border/50 bg-muted/30", {
"border-yellow-500/20 bg-yellow-500/8": schedule.lastBackupStatus === "warning",
"border-red-500/20 bg-red-500/8": schedule.lastBackupStatus === "error",
})}
>
<div className="p-3"> <div className="p-3">
<p <p
className={`font-mono text-sm whitespace-pre-wrap wrap-break-word ${ className={cn("font-mono text-sm whitespace-pre-wrap wrap-break-word", {
schedule.lastBackupStatus === "warning" ? "text-yellow-600" : "text-red-600" "text-yellow-600": schedule.lastBackupStatus === "warning",
}`} "text-red-600": schedule.lastBackupStatus === "error",
})}
> >
{backupDetails} {backupDetails}
</p> </p>