Skip to content

Commit

Permalink
Merge pull request #948 from 190km/notifications-style
Browse files Browse the repository at this point in the history 
style(notifications): better notification item style
  • Loading branch information
@Siumauricio
Siumauricio authored Dec 21, 2024
2 parents e2d20fb + ed8be62 commit d979aa1
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 46 deletions.
11 changes: 8 additions & 3 deletions apps/dokploy/components/dashboard/settings/notifications/delete-notification.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -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>
Expand Down
90 changes: 50 additions & 40 deletions apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 5 additions & 3 deletions apps/dokploy/components/dashboard/settings/notifications/update-notification.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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">
Expand Down

0 comments on commit d979aa1

Please sign in to comment.