1b-agent/doktainer-upstream
1
0 Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(toast): solid background color, tone variables for progress bar, zod error stringify

Browse Source
This commit is contained in:
KodekaTeam committed 2026-07-04 13:26:34 +07:00
1 parent 96c58c73ed
commit 9d61a4d983
2 files changed
+79 -57
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/globals.css
+61
View File
@@ -2,6 +2,7 @@
@import "tailwindcss";
:root {
/* Dark theme variables */
--bg-primary: #0c0e16;
--bg-secondary: #0c0e16;
--bg-card: #0c0e16;
@@ -22,6 +23,36 @@
--accent-red: #ef4444;
--accent-purple: #8b5cf6;
--accent-cyan: #06b6d4;
/* Toast tones */
--toast-success-border: 1px solid rgba(16, 185, 129, 0.28);
--toast-success-bg: #0f2f28;
--toast-success-title: #d1fae5;
--toast-success-message: rgba(209, 250, 229, 0.82);
--toast-success-close: rgba(209, 250, 229, 0.65);
--toast-success-icon: #34d399;
--toast-error-border: 1px solid rgba(239, 68, 68, 0.28);
--toast-error-bg: #321717;
--toast-error-title: #fee2e2;
--toast-error-message: rgba(254, 226, 226, 0.82);
--toast-error-close: rgba(254, 226, 226, 0.65);
--toast-error-icon: #f87171;
--toast-warning-border: 1px solid rgba(245, 158, 11, 0.28);
--toast-warning-bg: #342714;
--toast-warning-title: #fef3c7;
--toast-warning-message: rgba(254, 243, 199, 0.82);
--toast-warning-close: rgba(254, 243, 199, 0.65);
--toast-warning-icon: #fbbf24;
--toast-info-border: 1px solid rgba(59, 130, 246, 0.28);
--toast-info-bg: #172c40;
--toast-info-title: #dbeafe;
--toast-info-message: rgba(219, 234, 254, 0.82);
--toast-info-close: rgba(219, 234, 254, 0.65);
--toast-info-icon: #60a5fa;
--terminal-surface: #070b12;
--terminal-header: #0d1224;
--terminal-row-hover: rgba(59, 130, 246, 0.04);
@@ -66,6 +97,7 @@
}
html[data-theme="light"] {
/* Light theme variables */
--bg-primary: #f4f7fb;
--bg-secondary: #ffffff;
--bg-card: #ffffff;
@@ -107,6 +139,35 @@ html[data-theme="light"] {
--metrics-error-bg: rgba(254, 242, 242, 0.96);
--scrollbar-track: #e2e8f0;
--scrollbar-thumb: #cbd5e1;
/* Toast tones — light */
--toast-success-border: 1px solid rgba(16, 185, 129, 0.22);
--toast-success-bg: #ecfdf5;
--toast-success-title: #14532d;
--toast-success-message: rgba(20, 83, 45, 0.82);
--toast-success-close: rgba(20, 83, 45, 0.6);
--toast-success-icon: #10b981;
--toast-error-border: 1px solid rgba(239, 68, 68, 0.22);
--toast-error-bg: #fef2f2;
--toast-error-title: #7f1d1d;
--toast-error-message: rgba(127, 29, 29, 0.82);
--toast-error-close: rgba(127, 29, 29, 0.6);
--toast-error-icon: #ef4444;
--toast-warning-border: 1px solid rgba(245, 158, 11, 0.22);
--toast-warning-bg: #fffbeb;
--toast-warning-title: #78350f;
--toast-warning-message: rgba(120, 53, 15, 0.82);
--toast-warning-close: rgba(120, 53, 15, 0.6);
--toast-warning-icon: #f59e0b;
--toast-info-border: 1px solid rgba(59, 130, 246, 0.22);
--toast-info-bg: #eff6ff;
--toast-info-title: #1e3a8a;
--toast-info-message: rgba(30, 58, 138, 0.82);
--toast-info-close: rgba(30, 58, 138, 0.6);
--toast-info-icon: #3b82f6;
}
* {
src/components/Toast.tsx
+18 -57
View File
@@ -18,60 +18,18 @@ const toneConfig: Record<
{
title: string;
icon: typeof CheckCircle;
border: string;
background: string;
titleColor: string;
messageColor: string;
closeColor: string;
iconColor: string;
}
> = {
success: {
title: "Success",
icon: CheckCircle,
border: "1px solid rgba(16,185,129,0.35)",
background:
"linear-gradient(135deg, rgba(16,185,129,0.16), rgba(15,23,42,0.94))",
titleColor: "#d1fae5",
messageColor: "rgba(209,250,229,0.9)",
closeColor: "rgba(209,250,229,0.75)",
iconColor: "#10b981",
},
error: {
title: "Error",
icon: XCircle,
border: "1px solid rgba(239,68,68,0.35)",
background:
"linear-gradient(135deg, rgba(239,68,68,0.18), rgba(15,23,42,0.94))",
titleColor: "#fee2e2",
messageColor: "rgba(254,226,226,0.9)",
closeColor: "rgba(254,226,226,0.75)",
iconColor: "#ef4444",
},
warning: {
title: "Warning",
icon: AlertTriangle,
border: "1px solid rgba(245,158,11,0.35)",
background:
"linear-gradient(135deg, rgba(245,158,11,0.18), rgba(15,23,42,0.94))",
titleColor: "#fef3c7",
messageColor: "rgba(254,243,199,0.9)",
closeColor: "rgba(254,243,199,0.75)",
iconColor: "#f59e0b",
},
info: {
title: "Info",
icon: Info,
border: "1px solid rgba(59,130,246,0.35)",
background:
"linear-gradient(135deg, rgba(59,130,246,0.18), rgba(15,23,42,0.94))",
titleColor: "#dbeafe",
messageColor: "rgba(219,234,254,0.9)",
closeColor: "rgba(219,234,254,0.75)",
iconColor: "#3b82f6",
},
success: { title: "Success", icon: CheckCircle },
error: { title: "Error", icon: XCircle },
warning: { title: "Warning", icon: AlertTriangle },
info: { title: "Info", icon: Info },
};
function toneVar(tone: ToastTone, key: string) {
return `var(--toast-${tone}-${key})`;
}
export default function Toast({
tone,
title,
@@ -92,18 +50,21 @@ export default function Toast({
display: "flex",
alignItems: "flex-start",
gap: 10,
border: config.border,
background: config.background,
border: toneVar(tone, "border"),
background: toneVar(tone, "bg"),
boxShadow: "0 18px 40px rgba(2,6,23,0.35)",
overflow: "hidden",
position: "relative",
}}
>
<Icon size={18} style={{ color: config.iconColor, flexShrink: 0 }} />
<Icon
size={18}
style={{ color: toneVar(tone, "icon"), flexShrink: 0 }}
/>
<div style={{ flex: 1, minWidth: 0 }}>
<p
style={{
color: config.titleColor,
color: toneVar(tone, "title"),
fontSize: 13,
fontWeight: 700,
marginBottom: 2,
@@ -113,7 +74,7 @@ export default function Toast({
</p>
<p
style={{
color: config.messageColor,
color: toneVar(tone, "message"),
fontSize: 12,
lineHeight: 1.45,
}}
@@ -129,7 +90,7 @@ export default function Toast({
background: "none",
border: "none",
cursor: "pointer",
color: config.closeColor,
color: toneVar(tone, "close"),
padding: 0,
flexShrink: 0,
}}
@@ -153,7 +114,7 @@ export default function Toast({
style={{
height: "100%",
width: "100%",
background: config.iconColor,
background: toneVar(tone, "icon"),
transformOrigin: "left center",
animation: `toast-progress-shrink ${duration}ms linear forwards`,
}}