opensource/sim
3
0
Fork 0
mirror of https://github.com/simstudioai/sim.git synced 2026-09-24 15:45:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): close button improvement on notifications

Browse Source
This commit is contained in:
Emir Karabeg
2025-02-28 22:43:13 -08:00
parent a4eefd1f64
commit 86e1f2d8dd
1 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/w/components/notifications/notifications.tsx
+13 -11
View File
@@ -227,14 +227,14 @@ function NotificationAlert({
>
{type === 'api' ? (
// Special layout for API notifications with equal spacing
<div className="flex items-start py-1">
<div className="flex items-start py-1 relative">
{/* Left icon */}
<div className="flex-shrink-0 mt-0.5">
<Icon className="!text-[#7F2FFF] h-4 w-4" />
</div>
{/* Content area with equal margins */}
<div className="flex-1 space-y-2 pt-[3.5px] mx-4">
<div className="flex-1 space-y-2 pt-[3.5px] mx-4 pr-4">
<AlertTitle className="-mt-0.5">
<span>API</span>
</AlertTitle>
@@ -308,19 +308,20 @@ function NotificationAlert({
</AlertDescription>
</div>
{/* Close button on the right, aligned with header */}
<div className="flex-shrink-0 mt-[-3.5px]">
{options?.isPersistent && (
{/* Absolute positioned close button in the top right */}
{options?.isPersistent && (
<div className="absolute top-0.5 right-1">
<Button
variant="ghost"
size="icon"
className="h-6 w-6 hover:bg-transparent hover:text-destructive"
size="sm"
className="h-6 w-6 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
onClick={() => onHide(id)}
>
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</Button>
)}
</div>
</div>
)}
</div>
) : (
// Original layout for error and console notifications
@@ -344,11 +345,12 @@ function NotificationAlert({
{options?.isPersistent && (
<Button
variant="ghost"
size="icon"
className="h-6 w-6 hover:bg-transparent hover:text-destructive"
size="sm"
className="h-6 w-6 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
onClick={() => onHide(id)}
>
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</Button>
)}
</AlertTitle>