1 files changed, 25 insertions, 15 deletions
diff --git a/src/client/views/nodes/formattedText/DailyJournal.tsx b/src/client/views/nodes/formattedText/DailyJournal.tsx
index ec1f7a023..c8f049ecf 100644
--- a/src/client/views/nodes/formattedText/DailyJournal.tsx
+++ b/src/client/views/nodes/formattedText/DailyJournal.tsx
@@ -50,24 +50,19 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
 
     @action
     setDailyText() {
-        console.log('setDailyText() called...');
         const placeholderText = 'Start writing here...';
-        const initialText = `Journal Entry - ${this.journalDate}\n${placeholderText}`;
+        const dateText = `${this.journalDate}\n`;
 
         console.log('Checking if dataDoc has text field...');
 
-        const styles = {
-            bold: true, // Make the journal date bold
-            color: 'blue', // Set the journal date color to blue
-            fontSize: 18, // Set the font size to 18px for the whole text
-        };
-
-        console.log('Setting new text field with:', initialText);
-        this.dataDoc[this.fieldKey] = RichTextField.textToRtf(
-            initialText,
-            undefined, // No image DocId
-            styles, // Pass the styles object here
-            placeholderText.length // The position for text selection
+        this.dataDoc[this.fieldKey] = RichTextField.textToRtfFormat(
+            [
+                { text: 'Journal Entry:', styles: { bold: true, color: 'black', fontSize: 20 } },
+                { text: dateText, styles: { italic: true, color: 'gray', fontSize: 15 } },
+                { text: placeholderText, styles: { fontSize: 14, color: 'gray' } },
+            ],
+            undefined,
+            placeholderText.length - 2
         );
 
         console.log('Current text field:', this.dataDoc[this.fieldKey]);
@@ -83,7 +78,22 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
 
     render() {
         return (
-            <div style={{ background: 'beige', width: '100%', height: '100%' }}>
+            <div
+                style={{
+                    // background: 'beige',
+                    width: '100%',
+                    height: '100%',
+                    backgroundColor: 'beige',
+                    backgroundImage: `
+                    repeating-linear-gradient(
+                        to bottom, 
+                        rgba(255, 26, 26, 0.2) 0px, rgba(255, 26, 26, 0.2) 1px,  /* Thin red stripes */
+                        transparent 1px, transparent 20px
+                    )
+                `,
+                    backgroundSize: '100% 20px',
+                    backgroundRepeat: 'repeat',
+                }}>
                 <FormattedTextBox {...this._props} fieldKey={'text'} Document={this.Document} TemplateDataDocument={undefined} />
             </div>
         );