From e05d01788f19729ddca7d0ac40416ae0197625b3 Mon Sep 17 00:00:00 2001
From: usopp <botmiley@gmail.com>
Date: Fri, 20 Dec 2024 00:11:48 +0100
Subject: [PATCH 1/3] style(notifications): better notification item style

---
 .../notifications/delete-notification.tsx     | 11 ++-
 .../notifications/show-notifications.tsx      | 90 ++++++++++---------
 .../notifications/update-notification.tsx     |  8 +-
 3 files changed, 63 insertions(+), 46 deletions(-)

diff --git a/apps/dokploy/components/dashboard/settings/notifications/delete-notification.tsx b/apps/dokploy/components/dashboard/settings/notifications/delete-notification.tsx
index 468db8510..4bb197b29 100644
--- a/apps/dokploy/components/dashboard/settings/notifications/delete-notification.tsx
+++ b/apps/dokploy/components/dashboard/settings/notifications/delete-notification.tsx
@@ -11,7 +11,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { api } from "@/utils/api";
-import { TrashIcon } from "lucide-react";
+import { Trash2 } from "lucide-react";
 import React from "react";
 import { toast } from "sonner";
 
@@ -24,8 +24,13 @@ export const DeleteNotification = ({ notificationId }: Props) => {
 	return (
 		<AlertDialog>
 			<AlertDialogTrigger asChild>
-				<Button variant="ghost" isLoading={isLoading}>
-					<TrashIcon className="size-4  text-muted-foreground" />
+				<Button 
+					variant="ghost" 
+					size="icon" 
+					className="h-9 w-9 group hover:bg-red-500/10"
+					isLoading={isLoading}
+					>
+					<Trash2 className="size-4 text-muted-foreground group-hover:text-red-500" />
 				</Button>
 			</AlertDialogTrigger>
 			<AlertDialogContent>
diff --git a/apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx b/apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx
index c22f7b720..d742500f2 100644
--- a/apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx
+++ b/apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx
@@ -40,48 +40,58 @@ export const ShowNotifications = () => {
 						</div>
 					) : (
 						<div className="flex flex-col gap-4">
-							<div className="grid lg:grid-cols-2 xl:grid-cols-3 gap-4">
-								{data?.map((notification, index) => (
-									<div
-										key={notification.notificationId}
-										className="flex items-center justify-between border gap-2 p-3.5 rounded-lg"
-									>
-										<div className="flex flex-row gap-2 items-center w-full ">
-											{notification.notificationType === "slack" && (
-												<SlackIcon className="text-muted-foreground size-6 flex-shrink-0" />
-											)}
-											{notification.notificationType === "telegram" && (
-												<TelegramIcon className="text-muted-foreground size-8 flex-shrink-0" />
-											)}
-											{notification.notificationType === "discord" && (
-												<DiscordIcon className="text-muted-foreground size-7 flex-shrink-0" />
-											)}
-											{notification.notificationType === "email" && (
-												<Mail
-													size={29}
-													className="text-muted-foreground size-6 flex-shrink-0"
-												/>
-											)}
-											<span className="text-sm text-muted-foreground">
-												{notification.name}
-											</span>
-										</div>
-
-										<div className="flex flex-row gap-1 w-fit">
-											<UpdateNotification
-												notificationId={notification.notificationId}
-											/>
-											<DeleteNotification
-												notificationId={notification.notificationId}
-											/>
-										</div>
-									</div>
-								))}
-							</div>
-							<div className="flex flex-col gap-4 justify-end w-full items-end">
-								<AddNotification />
+						<div className="grid lg:grid-cols-1 xl:grid-cols-2 gap-4">
+						  {data?.map((notification, index) => (
+							<div
+							  key={notification.notificationId}
+							  className="flex items-center justify-between rounded-xl p-4 transition-colors dark:bg-zinc-900/50 hover:bg-zinc-900 border border-zinc-800/50"
+							>
+							  <div className="flex items-center gap-4">
+								{notification.notificationType === "slack" && (
+								  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-500/10">
+									<SlackIcon className="h-6 w-6 text-indigo-400" />
+								  </div>
+								)}
+								{notification.notificationType === "telegram" && (
+								  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-cyan-500/10">
+									<TelegramIcon className="h-6 w-6 text-indigo-400" />
+								  </div>
+								)}
+								{notification.notificationType === "discord" && (
+								  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-500/10">
+									<DiscordIcon className="h-6 w-6 text-indigo-400" />
+								  </div>
+								)}
+								{notification.notificationType === "email" && (
+								  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-zinc-500/10">
+									<Mail className="h-6 w-6 text-indigo-400" />
+								  </div>
+								)}
+								<div className="flex flex-col">
+								  <span className="text-sm font-medium text-zinc-300">
+									{notification.name}
+								  </span>
+								  <span className="text-xs font-medium text-muted-foreground">
+									  {notification.notificationType[0].toUpperCase() + notification.notificationType.slice(1)} notification
+								  </span>
+								</div>
+							  </div>
+							  <div className="flex items-center gap-2">
+								<UpdateNotification
+								  notificationId={notification.notificationId}
+								/>
+								<DeleteNotification
+								  notificationId={notification.notificationId}
+								/>
+							  </div>
 							</div>
+						  ))}
+						</div>
+		  
+						<div className="flex flex-col gap-4 justify-end w-full items-end">
+						  <AddNotification />
 						</div>
+					  </div>
 					)}
 				</CardContent>
 			</Card>
diff --git a/apps/dokploy/components/dashboard/settings/notifications/update-notification.tsx b/apps/dokploy/components/dashboard/settings/notifications/update-notification.tsx
index 9bdf35f14..cfa2e0bab 100644
--- a/apps/dokploy/components/dashboard/settings/notifications/update-notification.tsx
+++ b/apps/dokploy/components/dashboard/settings/notifications/update-notification.tsx
@@ -26,7 +26,7 @@ import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Mail, PenBoxIcon } from "lucide-react";
+import { Mail, Pen } from "lucide-react";
 import { useEffect, useState } from "react";
 import { FieldErrors, useFieldArray, useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -218,8 +218,10 @@ export const UpdateNotification = ({ notificationId }: Props) => {
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger className="" asChild>
-				<Button variant="ghost">
-					<PenBoxIcon className="size-4  text-muted-foreground" />
+				<Button variant="ghost"
+                        size="icon"
+                        className="h-9 w-9">
+					<Pen className="size-4 text-muted-foreground" />
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">

From 77336a21f9889588b0b99f63c1b95afa4d726512 Mon Sep 17 00:00:00 2001
From: usopp <botmiley@gmail.com>
Date: Fri, 20 Dec 2024 00:21:51 +0100
Subject: [PATCH 2/3] chore: lint

---
 .../dashboard/settings/notifications/show-notifications.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx b/apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx
index d742500f2..28aeb8c05 100644
--- a/apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx
+++ b/apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx
@@ -72,7 +72,7 @@ export const ShowNotifications = () => {
 									{notification.name}
 								  </span>
 								  <span className="text-xs font-medium text-muted-foreground">
-									  {notification.notificationType[0].toUpperCase() + notification.notificationType.slice(1)} notification
+									  {notification.notificationType && notification.notificationType[0].toUpperCase() + notification.notificationType.slice(1)} notification
 								  </span>
 								</div>
 							  </div>

From ed8be62ff30dcaeeea34ec815e15f74e45fa46a4 Mon Sep 17 00:00:00 2001
From: usopp <botmiley@gmail.com>
Date: Fri, 20 Dec 2024 00:24:44 +0100
Subject: [PATCH 3/3] chore: lint

---
 .../dashboard/settings/notifications/show-notifications.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx b/apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx
index 28aeb8c05..10ea7304e 100644
--- a/apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx
+++ b/apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx
@@ -72,7 +72,7 @@ export const ShowNotifications = () => {
 									{notification.name}
 								  </span>
 								  <span className="text-xs font-medium text-muted-foreground">
-									  {notification.notificationType && notification.notificationType[0].toUpperCase() + notification.notificationType.slice(1)} notification
+								  	{notification.notificationType?.[0]?.toUpperCase() + notification.notificationType?.slice(1)} notification
 								  </span>
 								</div>
 							  </div>