Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

style(notifications): better notification item style

Browse Source
This commit is contained in:
usopp
2024-12-20 00:11:48 +01:00
parent fac29b70a5
commit e05d01788f
3 changed files with 63 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/dokploy/components/dashboard/settings/notifications/delete-notification.tsx
View File

@@ -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>

90
apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx
View File

@@ -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>

8
apps/dokploy/components/dashboard/settings/notifications/update-notification.tsx
View File

@@ -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">