aevgarik/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(ui): add small radius to toast notifications

Browse Source 
Change toast container from rounded-lg (0px) to rounded-sm (6px) to
match the small rounding used on comment containers per feedback.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Forgotten
2026-02-26 16:32:02 -06:00
parent a7402a5500
commit 39d7f5d196
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
ui/src/components/ToastViewport.tsx
View File

@@ -5,17 +5,17 @@ import { useToast, type ToastItem, type ToastTone } from "../context/ToastContex
import { cn } from "../lib/utils";
const toneClasses: Record<ToastTone, string> = {
info: "border-sky-500/25 bg-sky-950/60 text-sky-100",
success: "border-emerald-500/25 bg-emerald-950/60 text-emerald-100",
warn: "border-amber-500/25 bg-amber-950/60 text-amber-100",
error: "border-red-500/30 bg-red-950/60 text-red-100",
info: "border-sky-300 bg-sky-50 text-sky-900 dark:border-sky-500/25 dark:bg-sky-950/60 dark:text-sky-100",
success: "border-emerald-300 bg-emerald-50 text-emerald-900 dark:border-emerald-500/25 dark:bg-emerald-950/60 dark:text-emerald-100",
warn: "border-amber-300 bg-amber-50 text-amber-900 dark:border-amber-500/25 dark:bg-amber-950/60 dark:text-amber-100",
error: "border-red-300 bg-red-50 text-red-900 dark:border-red-500/30 dark:bg-red-950/60 dark:text-red-100",
};
const toneDotClasses: Record<ToastTone, string> = {
info: "bg-sky-400",
success: "bg-emerald-400",
warn: "bg-amber-400",
error: "bg-red-400",
info: "bg-sky-500 dark:bg-sky-400",
success: "bg-emerald-500 dark:bg-emerald-400",
warn: "bg-amber-500 dark:bg-amber-400",
error: "bg-red-500 dark:bg-red-400",
};
function AnimatedToast({
@@ -35,7 +35,7 @@ function AnimatedToast({
return (
<li
className={cn(
"pointer-events-auto rounded-lg border shadow-lg backdrop-blur-xl transition-all duration-300 ease-out",
"pointer-events-auto rounded-sm border shadow-lg backdrop-blur-xl transition-all duration-300 ease-out",
visible
? "translate-y-0 opacity-100"
: "translate-y-3 opacity-0",
@@ -65,7 +65,7 @@ function AnimatedToast({
type="button"
aria-label="Dismiss notification"
onClick={() => onDismiss(toast.id)}
className="mt-0.5 shrink-0 rounded p-1 opacity-50 hover:bg-white/10 hover:opacity-100"
className="mt-0.5 shrink-0 rounded p-1 opacity-50 hover:bg-black/10 hover:opacity-100 dark:hover:bg-white/10"
>
<X className="h-3.5 w-3.5" />
</button>