From 13d4dea504c70894ea853761a3050938b5bef08c Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sat, 29 Mar 2025 19:53:25 -0600
Subject: [PATCH] Enhance ShowBackups component: add Database icon to title for
 improved UI clarity and wrap ShowBackups in a Card component for better
 layout in server settings page.

---
 .../components/dashboard/database/backups/show-backups.tsx | 7 +++++--
 apps/dokploy/pages/dashboard/settings/server.tsx           | 7 ++++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/dokploy/components/dashboard/database/backups/show-backups.tsx b/apps/dokploy/components/dashboard/database/backups/show-backups.tsx
index a7292eb92..29d4354cf 100644
--- a/apps/dokploy/components/dashboard/database/backups/show-backups.tsx
+++ b/apps/dokploy/components/dashboard/database/backups/show-backups.tsx
@@ -14,7 +14,7 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import { DatabaseBackup, Play, Trash2 } from "lucide-react";
+import { Database, DatabaseBackup, Play, Trash2 } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { toast } from "sonner";
@@ -66,7 +66,10 @@ export const ShowBackups = ({ id, type }: Props) => {
 		<Card className="bg-background">
 			<CardHeader className="flex flex-row justify-between gap-4  flex-wrap">
 				<div className="flex flex-col gap-0.5">
-					<CardTitle className="text-xl">Backups</CardTitle>
+					<CardTitle className="text-xl flex flex-row gap-2">
+						<Database className="size-6 text-muted-foreground" />
+						Backups
+					</CardTitle>
 					<CardDescription>
 						Add backups to your database to save the data to a different
 						provider.
diff --git a/apps/dokploy/pages/dashboard/settings/server.tsx b/apps/dokploy/pages/dashboard/settings/server.tsx
index 7392ee617..30bf8c64c 100644
--- a/apps/dokploy/pages/dashboard/settings/server.tsx
+++ b/apps/dokploy/pages/dashboard/settings/server.tsx
@@ -10,6 +10,7 @@ import type { ReactElement } from "react";
 import superjson from "superjson";
 import { api } from "@/utils/api";
 import { ShowBackups } from "@/components/dashboard/database/backups/show-backups";
+import { Card } from "@/components/ui/card";
 const Page = () => {
 	const { data: user } = api.user.get.useQuery();
 	return (
@@ -17,7 +18,11 @@ const Page = () => {
 			<div className="h-full rounded-xl  max-w-5xl mx-auto flex flex-col gap-4">
 				<WebDomain />
 				<WebServer />
-				<ShowBackups id={user?.userId ?? ""} type="web-server" />
+				<div className="w-full flex flex-col gap-4">
+					<Card className="h-full bg-sidebar  p-2.5 rounded-xl  max-w-5xl mx-auto">
+						<ShowBackups id={user?.userId ?? ""} type="web-server" />
+					</Card>
+				</div>
 			</div>
 		</div>
 	);