mirror
/
photoview
mirror of https://github.com/photoview/photoview.git
1
Fork 0
Code

set different color for background of errors and success messages

This commit is contained in:
Konstantin Koval 2024-06-08 20:33:39 +03:00
parent 441bba290c
commit b293d4996e
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui/src/components/messages/Message.tsx
View File

@ -7,17 +7,23 @@ export type MessageProps = {
content?: string content?: string
children?: React.ReactNode children?: React.ReactNode
onDismiss?(): void onDismiss?(): void
negative?: boolean
positive?: boolean
} }
const Message = forwardRef( const Message = forwardRef(
( (
{ onDismiss, header, children, content }: MessageProps, { onDismiss, header, children, content, negative, positive }: MessageProps,
ref: React.ForwardedRef<HTMLDivElement> ref: React.ForwardedRef<HTMLDivElement>
) => { ) => {
let backgroundColor = 'bg-white dark:bg-dark-bg2'
if (negative) backgroundColor = 'bg-red-100 dark:bg-red-900'
if (positive) backgroundColor = 'bg-green-100 dark:bg-green-900'
return ( return (
<div <div
ref={ref} ref={ref}
className="bg-white dark:bg-dark-bg2 shadow-md border rounded p-2 relative" className={`${backgroundColor} shadow-md border rounded p-2 relative`}
> >
<button onClick={onDismiss} className="absolute top-3 right-2"> <button onClick={onDismiss} className="absolute top-3 right-2">
<DismissIcon className="w-[10px] h-[10px] text-gray-700 dark:text-gray-200" /> <DismissIcon className="w-[10px] h-[10px] text-gray-700 dark:text-gray-200" />