mirror of
https://github.com/Crosstalk-Solutions/project-nomad.git
synced 2026-04-04 07:46:16 +02:00
fix(UI): invert update banner colors
This commit is contained in:
parent
226cc64230
commit
93eb647c08
|
|
@ -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'
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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: () => {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user