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

Merge pull request #948 from 190km/notifications-style

Browse Source 
style(notifications): better notification item style
This commit is contained in:
Mauricio Siu
2024-12-20 23:34:57 -06:00
committed by GitHub
parent e2d20fb0e3 ed8be62ff3
commit d979aa17c2
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"; } from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { TrashIcon } from "lucide-react"; import { Trash2 } from "lucide-react";
import React from "react"; import React from "react";
import { toast } from "sonner"; import { toast } from "sonner";
@@ -24,8 +24,13 @@ export const DeleteNotification = ({ notificationId }: Props) => {
return ( return (
<AlertDialog> <AlertDialog>
<AlertDialogTrigger asChild> <AlertDialogTrigger asChild>
<Button variant="ghost" isLoading={isLoading}> <Button
<TrashIcon className="size-4 text-muted-foreground" /> 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> </Button>
</AlertDialogTrigger> </AlertDialogTrigger>
<AlertDialogContent> <AlertDialogContent>

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

@@ -40,48 +40,58 @@ export const ShowNotifications = () => {
</div> </div>
) : ( ) : (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="grid lg:grid-cols-2 xl:grid-cols-3 gap-4"> <div className="grid lg:grid-cols-1 xl:grid-cols-2 gap-4">
{data?.map((notification, index) => ( {data?.map((notification, index) => (
<div <div
key={notification.notificationId} key={notification.notificationId}
className="flex items-center justify-between border gap-2 p-3.5 rounded-lg" 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 flex-row gap-2 items-center w-full "> <div className="flex items-center gap-4">
{notification.notificationType === "slack" && ( {notification.notificationType === "slack" && (
<SlackIcon className="text-muted-foreground size-6 flex-shrink-0" /> <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" />
{notification.notificationType === "telegram" && ( </div>
<TelegramIcon className="text-muted-foreground size-8 flex-shrink-0" /> )}
)} {notification.notificationType === "telegram" && (
{notification.notificationType === "discord" && ( <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-cyan-500/10">
<DiscordIcon className="text-muted-foreground size-7 flex-shrink-0" /> <TelegramIcon className="h-6 w-6 text-indigo-400" />
)} </div>
{notification.notificationType === "email" && ( )}
<Mail {notification.notificationType === "discord" && (
size={29} <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-500/10">
className="text-muted-foreground size-6 flex-shrink-0" <DiscordIcon className="h-6 w-6 text-indigo-400" />
/> </div>
)} )}
<span className="text-sm text-muted-foreground"> {notification.notificationType === "email" && (
{notification.name} <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-zinc-500/10">
</span> <Mail className="h-6 w-6 text-indigo-400" />
</div> </div>
)}
<div className="flex flex-row gap-1 w-fit"> <div className="flex flex-col">
<UpdateNotification <span className="text-sm font-medium text-zinc-300">
notificationId={notification.notificationId} {notification.name}
/> </span>
<DeleteNotification <span className="text-xs font-medium text-muted-foreground">
notificationId={notification.notificationId} {notification.notificationType?.[0]?.toUpperCase() + notification.notificationType?.slice(1)} notification
/> </span>
</div> </div>
</div> </div>
))} <div className="flex items-center gap-2">
</div> <UpdateNotification
<div className="flex flex-col gap-4 justify-end w-full items-end"> notificationId={notification.notificationId}
<AddNotification /> />
<DeleteNotification
notificationId={notification.notificationId}
/>
</div>
</div> </div>
))}
</div> </div>
<div className="flex flex-col gap-4 justify-end w-full items-end">
<AddNotification />
</div>
</div>
)} )}
</CardContent> </CardContent>
</Card> </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 { Switch } from "@/components/ui/switch";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { Mail, PenBoxIcon } from "lucide-react"; import { Mail, Pen } from "lucide-react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { FieldErrors, useFieldArray, useForm } from "react-hook-form"; import { FieldErrors, useFieldArray, useForm } from "react-hook-form";
import { toast } from "sonner"; import { toast } from "sonner";
@@ -218,8 +218,10 @@ export const UpdateNotification = ({ notificationId }: Props) => {
return ( return (
<Dialog open={isOpen} onOpenChange={setIsOpen}> <Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger className="" asChild> <DialogTrigger className="" asChild>
<Button variant="ghost"> <Button variant="ghost"
<PenBoxIcon className="size-4 text-muted-foreground" /> size="icon"
className="h-9 w-9">
<Pen className="size-4 text-muted-foreground" />
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl"> <DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">