diff --git a/apps/desktop/src/components/notifications.tsx b/apps/desktop/src/components/notifications.tsx index ec6051843cd..465e501f54c 100644 --- a/apps/desktop/src/components/notifications.tsx +++ b/apps/desktop/src/components/notifications.tsx @@ -1,5 +1,5 @@ import { useStore } from '@nanostores/react' -import { type ReactNode, useEffect, useRef, useState } from 'react' +import { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react' import { createPortal } from 'react-dom' import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert' @@ -162,6 +162,30 @@ function BottomRightStack({ ) } +// Emphasize only the leading money figure ("$16.00" — the amount used) with the +// accent color (semibold), leaving the rest of the line in its default muted +// tone. No accent, or no figure in the message → render the text untouched. +function renderMessage(message: string, accent?: string): ReactNode { + const match = accent ? /\$\d+(?:\.\d{2})?/.exec(message) : null + + if (!match) { + return message + } + + const start = match.index + const end = start + match[0].length + + return ( + <> + {message.slice(0, start)} + + {match[0]} + + {message.slice(end)} + + ) +} + function NotificationItem({ notification }: { notification: AppNotification }) { const styles = tone[notification.kind] const Icon = styles.icon @@ -169,6 +193,12 @@ function NotificationItem({ notification }: { notification: AppNotification }) { const { t } = useI18n() const copy = t.notifications + // Nudge the icon down to sit on the first text line, in `ch` so it tracks the + // toast's font size instead of a fixed rem. `accentColor` (when set) tints the + // icon + message as a severity ramp, overriding the kind's default color. + const accent = notification.accentColor + const iconStyle: CSSProperties = { marginTop: '0.42ch', ...(accent ? { color: accent } : {}) } + return ( {notification.icon ? ( - + ) : ( - + )}
{notification.title && {notification.title}} -

{notification.message}

+

{renderMessage(notification.message, accent)}

+ {notification.meta && ( +

{notification.meta}

+ )} {hasDetail && } {notification.action && (