feat: support change node header color

Author: fldm713

src/components/Note/Note.tsx

@@ -23,6 +23,7 @@ type NoteProps = {
   saving?: boolean;
   saveLabel?: React.ReactNode;
   savingLabel?: React.ReactNode;
+  headerColor?: string;
 };
 
 const defaultProps = {
@@ -51,6 +52,7 @@ const Note: FC<NoteProps> = ({
   onEdit,
   onSave,
   onUndelete,
+  headerColor = 'info',
 }) => {
   const { deleted, editing, text } = note;
 
@@ -82,6 +84,7 @@ const Note: FC<NoteProps> = ({
         showTimezone={showTimezone}
         onDelete={onDelete}
         onEdit={onEdit}
+        color={headerColor}
       />
       <CardBody>
         <CardText style={{ whiteSpace: 'pre-wrap' }}>{text}</CardText>

src/components/Note/NoteHeader.tsx

@@ -20,13 +20,18 @@ type NoteHeaderProps = {
   showTimezone?: boolean;
   onDelete?: (note: Omit<Note, 'text'>) => void;
   onEdit?: (note: Omit<Note, 'text'>) => void;
+  color?: string;
 };
 
 const defaultProps = {
   dateFormat: 'ddd MMM DD YYYY HH:mm:ss',
 };
 
-const NoteHeader: FC<NoteHeaderProps> = ({ dateFormat = defaultProps.dateFormat, ...props }) => {
+const NoteHeader: FC<NoteHeaderProps> = ({
+  dateFormat = defaultProps.dateFormat,
+  color = 'info',
+  ...props
+}) => {
   const { note, onDelete, onEdit, showTimezone } = props;
   const { date, edited, from, title } = note;
 
@@ -37,7 +42,7 @@ const NoteHeader: FC<NoteHeaderProps> = ({ dateFormat = defaultProps.dateFormat,
     'justify-content-between',
     'py-2',
     'pe-2',
-    'bg-info-subtle'
+    `bg-${color}-subtle`
   );
 
   const anyDataExisting = date || from || title;

src/components/Note/NoteMentions.tsx

@@ -30,6 +30,7 @@ type NoteMentionsProps = {
   saving?: boolean;
   saveLabel?: React.ReactNode;
   savingLabel?: React.ReactNode;
+  headerColor?: string;
 };
 
 const defaultProps = {
@@ -60,6 +61,7 @@ const NoteMentions: FC<NoteMentionsProps> = ({
   onEdit,
   onSave,
   onUndelete,
+  headerColor = 'info',
 }) => {
   const { deleted, editing, text } = note;
 
@@ -106,6 +108,7 @@ const NoteMentions: FC<NoteMentionsProps> = ({
         showTimezone={showTimezone}
         onDelete={onDelete}
         onEdit={onEdit}
+        color={headerColor}
       />
       <CardBody>
         <CardText style={{ whiteSpace: 'pre-wrap' }}>