highperfocused/multica
1
0
Fork 0
mirror of https://github.com/multica-ai/multica.git synced 2026-07-27 21:33:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #45 from multica-ai/fix/toast-neutral-style

Browse Source 
Refactor toast notifications to use neutral background with colored i…
This commit is contained in:
Naiyuan Qing
2026-01-16 11:04:44 +08:00
committed by GitHub
parent 523a312882 3a46030f7b
commit a53dfac07f
3 changed files with 19 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/src/App.tsx
View File

@@ -169,7 +169,7 @@ function AppContent(): React.JSX.Element {
/>
{/* Toast notifications */}
<Toaster position="top-center" />
<Toaster position="bottom-right" />
</div>
)
}

36
src/renderer/src/components/ui/sonner.tsx
View File

@@ -10,38 +10,36 @@ import { Toaster as Sonner, type ToasterProps } from 'sonner'
const Toaster = ({ ...props }: ToasterProps) => {
const { resolvedTheme } = useTheme()
const isDark = resolvedTheme === 'dark'
return (
<Sonner
theme={resolvedTheme as ToasterProps['theme']}
className="toaster group"
richColors
icons={{
success: <CircleCheckIcon className="size-4" />,
info: <InfoIcon className="size-4" />,
warning: <TriangleAlertIcon className="size-4" />,
error: <OctagonXIcon className="size-4" />,
success: <CircleCheckIcon className="size-4 text-green-500" />,
info: <InfoIcon className="size-4 text-blue-500" />,
warning: <TriangleAlertIcon className="size-4 text-amber-500" />,
error: <OctagonXIcon className="size-4 text-red-500" />,
loading: <Loader2Icon className="size-4 animate-spin" />
}}
style={
{
// Normal toast
// All toast types use neutral background
'--normal-bg': 'var(--popover)',
'--normal-text': 'var(--popover-foreground)',
'--normal-border': 'var(--border)',
// Error toast - red styling
'--error-bg': isDark ? 'oklch(0.25 0.08 25)' : 'oklch(0.97 0.02 25)',
'--error-text': isDark ? 'oklch(0.9 0.1 25)' : 'oklch(0.45 0.18 25)',
'--error-border': isDark ? 'oklch(0.45 0.15 25)' : 'oklch(0.7 0.15 25)',
// Success toast - green styling
'--success-bg': isDark ? 'oklch(0.25 0.06 145)' : 'oklch(0.97 0.02 145)',
'--success-text': isDark ? 'oklch(0.85 0.12 145)' : 'oklch(0.4 0.12 145)',
'--success-border': isDark ? 'oklch(0.45 0.1 145)' : 'oklch(0.7 0.1 145)',
// Warning toast - amber styling
'--warning-bg': isDark ? 'oklch(0.28 0.08 70)' : 'oklch(0.97 0.03 70)',
'--warning-text': isDark ? 'oklch(0.9 0.12 70)' : 'oklch(0.45 0.14 70)',
'--warning-border': isDark ? 'oklch(0.5 0.12 70)' : 'oklch(0.75 0.12 70)',
'--success-bg': 'var(--popover)',
'--success-text': 'var(--popover-foreground)',
'--success-border': 'var(--border)',
'--error-bg': 'var(--popover)',
'--error-text': 'var(--popover-foreground)',
'--error-border': 'var(--border)',
'--warning-bg': 'var(--popover)',
'--warning-text': 'var(--popover-foreground)',
'--warning-border': 'var(--border)',
'--info-bg': 'var(--popover)',
'--info-text': 'var(--popover-foreground)',
'--info-border': 'var(--border)',
'--border-radius': 'var(--radius)'
} as React.CSSProperties
}

2
src/renderer/src/hooks/useApp.ts
View File

@@ -299,7 +299,7 @@ export function useApp(): AppState & AppActions {
)
setCurrentSession(updatedSession)
await loadRunningStatus()
toast.success(`Switched to ${newAgentId}`)
toast.success(`Successfully switched to ${newAgentId}`)
} catch (err) {
toast.error(`Failed to switch agent: ${getErrorMessage(err)}`)
} finally {