theme fix

src/pages/HistoryPage.tsx

@@ -5,6 +5,7 @@ import { decryptEntry } from '../lib/crypto'
 import { formatIST, getISTDateComponents } from '../lib/timezone'
 import BottomNav from '../components/BottomNav'
 import { useOnboardingTour, hasPendingTourStep, clearPendingTourStep } from '../hooks/useOnboardingTour'
+import { PageLoader } from '../components/PageLoader'
 
 interface DecryptedEntry extends JournalEntry {
   decryptedTitle?: string
@@ -194,12 +195,7 @@ export default function HistoryPage() {
   }
 
   if (loading) {
-    return (
-      <div className="history-page" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-        <p style={{ color: '#9ca3af' }}>Loading…</p>
-        <BottomNav />
-      </div>
-    )
+    return <PageLoader />
   }
 
   return (
@@ -274,13 +270,13 @@ export default function HistoryPage() {
           </h3>
 
           {loadingEntries ? (
-            <p style={{ color: '#9ca3af', fontSize: '0.875rem', textAlign: 'center', padding: '1.5rem 0', fontFamily: '"Sniglet", system-ui' }}>
+            <p style={{ color: 'var(--color-text-muted)', 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: '"Sniglet", system-ui' }}>
+                <p style={{ color: 'var(--color-text-muted)', fontSize: '0.875rem', textAlign: 'center', padding: '1.5rem 0', fontFamily: '"Sniglet", system-ui' }}>
                   No entries for this day yet. Start writing!
                 </p>
               ) : (

src/pages/HomePage.tsx

@@ -7,6 +7,7 @@ import BottomNav from '../components/BottomNav'
 import WelcomeModal from '../components/WelcomeModal'
 import { SaveBookAnimation } from '../components/SaveBookAnimation'
 import { useOnboardingTour, hasSeenOnboarding, markOnboardingDone } from '../hooks/useOnboardingTour'
+import { PageLoader } from '../components/PageLoader'
 
 const AFFIRMATIONS = [
   'You showed up for yourself today 🌱',
@@ -61,18 +62,14 @@ export default function HomePage() {
   }
 
   if (loading) {
-    return (
-      <div className="home-page" style={{ alignItems: 'center', justifyContent: 'center' }}>
-        <p style={{ color: '#9ca3af' }}>Loading…</p>
-      </div>
-    )
+    return <PageLoader />
   }
 
   if (!user) {
     return (
       <div className="home-page" style={{ alignItems: 'center', justifyContent: 'center', gap: '1rem' }}>
-        <h1 style={{ fontFamily: '"Sniglet", system-ui', color: '#1a1a1a' }}>Grateful Journal</h1>
-        <p style={{ color: '#6b7280' }}>Sign in to start your journal.</p>
+        <h1 style={{ fontFamily: '"Sniglet", system-ui', color: 'var(--color-text)' }}>Grateful Journal</h1>
+        <p style={{ color: 'var(--color-text-muted)' }}>Sign in to start your journal.</p>
         <Link to="/login" className="home-login-link">Go to login</Link>
       </div>
     )
@@ -188,15 +185,7 @@ export default function HomePage() {
           </div>
 
           {message && (
-            <div style={{
-              padding: '0.75rem',
-              marginTop: '1rem',
-              borderRadius: '8px',
-              fontSize: '0.875rem',
-              backgroundColor: '#fef2f2',
-              color: '#b91c1c',
-              textAlign: 'center',
-            }}>
+            <div className="alert-msg alert-msg--error" style={{ marginTop: '1rem' }}>
               {message.text}
             </div>
           )}

src/pages/LoginPage.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'
 import { useEffect, useState } from 'react'
 import { GoogleSignInButton } from '../components/GoogleSignInButton'
 import { TreeAnimation } from '../components/TreeAnimation'
+import { PageLoader } from '../components/PageLoader'
 
 export default function LoginPage() {
   const { user, loading, signInWithGoogle, authError } = useAuth()
@@ -28,12 +29,7 @@ export default function LoginPage() {
   }
 
   if (loading) {
-    return (
-      <div className="lp lp--loading" aria-live="polite">
-        <span className="login-page__spinner" aria-hidden />
-        <p>Loading…</p>
-      </div>
-    )
+    return <PageLoader />
   }
 
   return (

src/pages/SettingsPage.tsx

@@ -5,6 +5,7 @@ import { clearDeviceKey, clearEncryptedSecretKey } from '../lib/crypto'
 import { useNavigate } from 'react-router-dom'
 import BottomNav from '../components/BottomNav'
 import { useOnboardingTour, hasPendingTourStep, clearPendingTourStep } from '../hooks/useOnboardingTour'
+import { PageLoader } from '../components/PageLoader'
 
 const MAX_PHOTO_SIZE = 200 // px — resize to 200x200
 
@@ -187,12 +188,7 @@ export default function SettingsPage() {
   }
 
   if (loading) {
-    return (
-      <div className="settings-page" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-        <p style={{ color: '#9ca3af' }}>Loading…</p>
-        <BottomNav />
-      </div>
-    )
+    return <PageLoader />
   }
 
   return (
@@ -211,7 +207,7 @@ export default function SettingsPage() {
             {photoURL ? (
               <img src={photoURL} alt={displayName} className="settings-avatar-img" />
             ) : (
-              <div className="settings-avatar-placeholder" style={{ fontSize: '1.75rem', background: 'linear-gradient(135deg, #86efac 0%, #22c55e 100%)' }}>
+              <div className="settings-avatar-placeholder" style={{ fontSize: '1.75rem' }}>
                 {displayName.charAt(0).toUpperCase()}
               </div>
             )}
@@ -345,15 +341,7 @@ export default function SettingsPage() {
         </section>
 
         {message && (
-          <div style={{
-            padding: '0.75rem',
-            marginBottom: '1rem',
-            borderRadius: '8px',
-            fontSize: '0.875rem',
-            backgroundColor: message.type === 'success' ? '#f0fdf4' : '#fef2f2',
-            color: message.type === 'success' ? '#15803d' : '#b91c1c',
-            textAlign: 'center',
-          }}>
+          <div className={`alert-msg alert-msg--${message.type}`} style={{ marginBottom: '1rem' }}>
             {message.text}
           </div>
         )}
@@ -481,9 +469,8 @@ export default function SettingsPage() {
               disabled={saving}
               maxLength={50}
               autoFocus
-              style={{ borderColor: '#d1d5db' }}
-              onFocus={(e) => (e.target.style.borderColor = '#22c55e')}
-              onBlur={(e) => (e.target.style.borderColor = '#d1d5db')}
+              onFocus={(e) => (e.target.style.borderColor = 'var(--color-primary)')}
+              onBlur={(e) => (e.target.style.borderColor = '')}
             />
 
             <div className="confirm-modal-actions" style={{ marginTop: '1rem' }}>