fix(UI): invert update banner colors

This commit is contained in:
Jake Turner 2026-02-18 20:59:22 +00:00
parent 226cc64230
commit 93eb647c08
No known key found for this signature in database
GPG Key ID: 6DCBBAE4FEAB53EB
2 changed files with 11 additions and 3 deletions

View File

@ -6,7 +6,7 @@ import StyledButton, { StyledButtonProps } from './StyledButton'
export type AlertProps = React.HTMLAttributes<HTMLDivElement> & { export type AlertProps = React.HTMLAttributes<HTMLDivElement> & {
title: string title: string
message?: string message?: string
type: 'warning' | 'error' | 'success' | 'info' type: 'warning' | 'error' | 'success' | 'info' | 'info-inverted'
children?: React.ReactNode children?: React.ReactNode
dismissible?: boolean dismissible?: boolean
onDismiss?: () => void onDismiss?: () => void
@ -73,6 +73,8 @@ export default function Alert({
? 'border-desert-olive' ? 'border-desert-olive'
: type === 'info' : type === 'info'
? 'border-desert-stone' ? 'border-desert-stone'
: type === 'info-inverted'
? 'border-desert-tan'
: '' : ''
) )
return classNames(baseStyles, 'border-2 bg-desert-white shadow-md', ...variantStyles) return classNames(baseStyles, 'border-2 bg-desert-white shadow-md', ...variantStyles)
@ -86,6 +88,8 @@ export default function Alert({
? 'bg-desert-olive text-desert-white border border-desert-olive-dark' ? 'bg-desert-olive text-desert-white border border-desert-olive-dark'
: type === 'info' : type === 'info'
? 'bg-desert-green text-desert-white border border-desert-green-dark' ? 'bg-desert-green text-desert-white border border-desert-green-dark'
: type === 'info-inverted'
? 'bg-desert-tan text-desert-white border border-desert-tan-dark'
: '' : ''
) )
return classNames(baseStyles, 'shadow-lg', ...variantStyles) return classNames(baseStyles, 'shadow-lg', ...variantStyles)
@ -99,6 +103,8 @@ export default function Alert({
? 'bg-desert-olive-lighter bg-opacity-20 border-desert-olive-light' ? 'bg-desert-olive-lighter bg-opacity-20 border-desert-olive-light'
: type === 'info' : type === 'info'
? 'bg-desert-green bg-opacity-20 border-desert-green-light' ? 'bg-desert-green bg-opacity-20 border-desert-green-light'
: type === 'info-inverted'
? 'bg-desert-tan bg-opacity-20 border-desert-tan-light'
: '' : ''
) )
return classNames(baseStyles, 'border-l-4 border-y border-r shadow-sm', ...variantStyles) return classNames(baseStyles, 'border-l-4 border-y border-r shadow-sm', ...variantStyles)
@ -117,6 +123,8 @@ export default function Alert({
return 'text-desert-olive-dark' return 'text-desert-olive-dark'
case 'info': case 'info':
return 'text-desert-stone-dark' return 'text-desert-stone-dark'
case 'info-inverted':
return 'text-desert-tan-dark'
default: default:
return 'text-desert-stone-dark' return 'text-desert-stone-dark'
} }

View File

@ -136,11 +136,11 @@ export default function Home(props: {
<div className='flex justify-center items-center p-4 w-full'> <div className='flex justify-center items-center p-4 w-full'>
<Alert <Alert
title="An update is available for Project N.O.M.A.D.!" title="An update is available for Project N.O.M.A.D.!"
type="info" type="info-inverted"
variant="solid" variant="solid"
className="w-full" className="w-full"
buttonProps={{ buttonProps={{
variant: 'secondary', variant: 'primary',
children: 'Go to Settings', children: 'Go to Settings',
icon: 'IconSettings', icon: 'IconSettings',
onClick: () => { onClick: () => {