styling changes

src/pages/HistoryPage.tsx

@@ -17,6 +17,7 @@ export default function HistoryPage() {
   const [selectedDate, setSelectedDate] = useState(new Date())
   const [entries, setEntries] = useState<DecryptedEntry[]>([])
   const [loadingEntries, setLoadingEntries] = useState(false)
+  const [selectedEntry, setSelectedEntry] = useState<DecryptedEntry | null>(null)
 
   // Fetch entries on mount and when userId changes
   useEffect(() => {
@@ -244,13 +245,13 @@ export default function HistoryPage() {
           </h3>
 
           {loadingEntries ? (
-            <p style={{ color: '#9ca3af', fontSize: '0.875rem', textAlign: 'center', padding: '1.5rem 0', fontFamily: 'Inter, sans-serif' }}>
+            <p style={{ color: '#9ca3af', fontSize: '0.875rem', textAlign: 'center', padding: '1.5rem 0', fontFamily: '"Sniglet", system-ui' }}>
               Loading entries…
             </p>
           ) : (
             <div className="entries-list">
               {selectedDateEntries.length === 0 ? (
-                <p style={{ color: '#9ca3af', fontSize: '0.875rem', textAlign: 'center', padding: '1.5rem 0', fontFamily: 'Inter, sans-serif' }}>
+                <p style={{ color: '#9ca3af', fontSize: '0.875rem', textAlign: 'center', padding: '1.5rem 0', fontFamily: '"Sniglet", system-ui' }}>
                   No entries for this day yet. Start writing!
                 </p>
               ) : (
@@ -259,13 +260,16 @@ export default function HistoryPage() {
                     key={entry.id}
                     type="button"
                     className="entry-card"
-                    onClick={() => console.log('Open entry', entry.id)}
+                    onClick={() => setSelectedEntry(entry)}
                   >
                     <div className="entry-header">
                       <span className="entry-date">{formatDate(entry.createdAt)}</span>
                       <span className="entry-time">{formatTime(entry.createdAt)}</span>
                     </div>
                     <h4 className="entry-title">{entry.decryptedTitle || entry.title || '[Untitled]'}</h4>
+                    {entry.decryptedContent && (
+                      <p className="entry-preview">{entry.decryptedContent}</p>
+                    )}
                   </button>
                 ))
               )}
@@ -274,6 +278,69 @@ export default function HistoryPage() {
         </section>
       </main>
 
+      {/* Entry Detail Modal */}
+      {selectedEntry && (
+        <div
+          className="entry-modal-overlay"
+          onClick={(e) => {
+            if (e.target === e.currentTarget) setSelectedEntry(null)
+          }}
+        >
+          <div className="entry-modal">
+            <div className="entry-modal-header">
+              <div className="entry-modal-meta">
+                <span className="entry-modal-date">{formatDate(selectedEntry.createdAt)}</span>
+                <span className="entry-modal-time">{formatTime(selectedEntry.createdAt)}</span>
+              </div>
+              <button
+                type="button"
+                className="entry-modal-close"
+                onClick={() => setSelectedEntry(null)}
+                title="Close"
+              >
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+              </button>
+            </div>
+
+            <h2 className="entry-modal-title">
+              {selectedEntry.decryptedTitle || selectedEntry.title || '[Untitled]'}
+            </h2>
+
+            {selectedEntry.decryptError ? (
+              <div className="entry-modal-error">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+                  <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+                </svg>
+                {selectedEntry.decryptError}
+              </div>
+            ) : (
+              <div className="entry-modal-content">
+                {selectedEntry.decryptedContent
+                  ? selectedEntry.decryptedContent.split('\n').map((line, i) => (
+                      <p key={i}>{line || '\u00A0'}</p>
+                    ))
+                  : <p className="entry-modal-empty">No content</p>
+                }
+              </div>
+            )}
+
+            {selectedEntry.encryption?.encrypted && (
+              <div className="entry-modal-badge">
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+                  <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+                </svg>
+                End-to-end encrypted
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
       <BottomNav />
     </div>
   )

src/pages/HomePage.tsx

@@ -1,6 +1,6 @@
 import { useAuth } from '../contexts/AuthContext'
 import { Link } from 'react-router-dom'
-import { useState } from 'react'
+import { useState, useRef } from 'react'
 import { createEntry } from '../lib/api'
 import { encryptEntry } from '../lib/crypto'
 import BottomNav from '../components/BottomNav'
@@ -11,6 +11,9 @@ export default function HomePage() {
   const [title, setTitle] = useState('')
   const [saving, setSaving] = useState(false)
   const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
+  
+  const titleInputRef = useRef<HTMLInputElement>(null)
+  const contentTextareaRef = useRef<HTMLTextAreaElement>(null)
 
   if (loading) {
     return (
@@ -23,7 +26,7 @@ export default function HomePage() {
   if (!user) {
     return (
       <div className="home-page" style={{ alignItems: 'center', justifyContent: 'center', gap: '1rem' }}>
-        <h1 style={{ fontFamily: 'Playfair Display, Georgia, serif', color: '#1a1a1a' }}>Grateful Journal</h1>
+        <h1 style={{ fontFamily: '"Sniglet", system-ui', color: '#1a1a1a' }}>Grateful Journal</h1>
         <p style={{ color: '#6b7280' }}>Sign in to start your journal.</p>
         <Link to="/login" className="home-login-link">Go to login</Link>
       </div>
@@ -36,6 +39,20 @@ export default function HomePage() {
     .toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric' })
     .toUpperCase()
 
+  const handleTitleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && title.trim()) {
+      e.preventDefault()
+      contentTextareaRef.current?.focus()
+    }
+  }
+
+  const handleContentKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && entry.trim()) {
+      e.preventDefault()
+      handleWrite()
+    }
+  }
+
   const handleWrite = async () => {
     if (!userId || !title.trim() || !entry.trim()) {
       setMessage({ type: 'error', text: 'Please add a title and entry content' })
@@ -109,13 +126,17 @@ export default function HomePage() {
               placeholder="Title your thoughts..."
               value={title}
               onChange={(e) => setTitle(e.target.value)}
+              onKeyDown={handleTitleKeyDown}
+              ref={titleInputRef}
               disabled={saving}
             />
             <textarea
               className="journal-entry-textarea"
-              placeholder=""
+              placeholder="Start writing your entry here..."
               value={entry}
               onChange={(e) => setEntry(e.target.value)}
+              onKeyDown={handleContentKeyDown}
+              ref={contentTextareaRef}
               disabled={saving}
             />
           </div>