From d760b34ba46fb66282719ce1b8d87536f50d4d51 Mon Sep 17 00:00:00 2001
From: nmemmert <nmemmert@users.noreply.github.com>
Date: Mon, 19 Jan 2026 08:20:19 -0500
Subject: [PATCH] Standardize design across all pages - consistent dark
 gradient theme, typography, and card styling

---
 src/components/AboutPage.tsx       | 10 +++++--
 src/components/AnsweredPrayers.tsx | 38 +++++++++++++----------
 src/components/CalendarView.tsx    | 48 +++++++++++++++++-------------
 src/components/DailyEntry.tsx      |  2 +-
 src/components/HomePage.tsx        |  4 +--
 src/components/ReflectionsList.tsx | 14 ++++++---
 src/components/ThingsToPrayFor.tsx |  2 +-
 7 files changed, 72 insertions(+), 46 deletions(-)

diff --git a/src/components/AboutPage.tsx b/src/components/AboutPage.tsx
index 637c730..72a875e 100644
--- a/src/components/AboutPage.tsx
+++ b/src/components/AboutPage.tsx
@@ -157,11 +157,17 @@ export default function AboutPage({ userEmail }: AboutPageProps) {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-slate-900 to-slate-800 p-4 pb-32 pt-24">
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 p-4 pb-32 pt-24">
+      {/* Animated Background */}
+      <div className="fixed inset-0 -z-10">
+        <div className="absolute top-40 right-20 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl"></div>
+        <div className="absolute bottom-40 left-20 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl"></div>
+      </div>
+
       <div className="max-w-md mx-auto">
         {/* Header */}
         <div className="text-center mb-8">
-          <h1 className="text-4xl font-bold text-white mb-2">About</h1>
+          <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent mb-2">ℹ️ About</h1>
           <p className="text-slate-400">Haver - Your Prayer Companion</p>
         </div>
 
diff --git a/src/components/AnsweredPrayers.tsx b/src/components/AnsweredPrayers.tsx
index 8bd7ad0..a2daf10 100644
--- a/src/components/AnsweredPrayers.tsx
+++ b/src/components/AnsweredPrayers.tsx
@@ -21,39 +21,47 @@ export default function AnsweredPrayers({ prayers, onEdit }: AnsweredPrayersProp
   const answeredPrayers = prayers.filter(p => p.answered);
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 p-4 pb-32 pt-24">
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 p-4 pb-32 pt-24">
+      {/* Animated Background */}
+      <div className="fixed inset-0 -z-10">
+        <div className="absolute top-40 right-20 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl"></div>
+        <div className="absolute bottom-40 left-20 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl"></div>
+      </div>
+
       <div className="max-w-md mx-auto">
-        <h1 className="text-3xl font-bold text-slate-900 dark:text-white mb-2">Answered Prayers</h1>
-        <p className="text-slate-600 dark:text-slate-400 mb-6">Celebrate prayers God has answered</p>
+        <div className="text-center mb-8">
+          <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent mb-2">✅ Answered Prayers</h1>
+          <p className="text-slate-400">Celebrate prayers God has answered</p>
+        </div>
 
         {answeredPrayers.length > 0 ? (
           <div className="space-y-4">
             {answeredPrayers.map((prayer) => (
               <div
                 key={prayer.id}
-                className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm border-l-4 border-green-500 hover:shadow-md transition-shadow cursor-pointer"
+                className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-5 shadow-md border border-slate-700/50 border-l-4 border-green-500 hover:shadow-xl hover:bg-slate-800/80 transition-all cursor-pointer"
                 onClick={() => onEdit?.(prayer)}
               >
-                <div className="flex items-start gap-2 mb-2">
-                  <span className="text-2xl">✅</span>
+                <div className="flex items-start gap-3 mb-2">
+                  <span className="text-3xl">✅</span>
                   <div className="flex-1">
                     {prayer.prayFor && (
-                      <div className="text-xs font-semibold text-green-600 dark:text-green-400 mb-1 uppercase tracking-wide">
+                      <div className="text-xs font-semibold text-green-400 mb-1 uppercase tracking-wide">
                         {prayer.prayFor}
                       </div>
                     )}
-                    <p className="text-sm text-slate-700 dark:text-slate-300 line-clamp-2 font-medium">{prayer.text}</p>
+                    <p className="text-base text-slate-200 line-clamp-2 font-medium">{prayer.text}</p>
                   </div>
                 </div>
 
                 {prayer.answerDetails && (
-                  <div className="mt-3 pt-3 border-t border-slate-200 dark:border-slate-700">
-                    <p className="text-xs font-semibold text-slate-600 dark:text-slate-400 mb-1">How it was answered:</p>
-                    <p className="text-sm text-slate-600 dark:text-slate-300 italic line-clamp-3">{prayer.answerDetails}</p>
+                  <div className="mt-3 pt-3 border-t border-slate-700">
+                    <p className="text-xs font-semibold text-slate-400 mb-1">How it was answered:</p>
+                    <p className="text-sm text-slate-300 italic line-clamp-3">{prayer.answerDetails}</p>
                   </div>
                 )}
 
-                <div className="text-xs text-slate-500 dark:text-slate-500 mt-2">
+                <div className="text-xs text-slate-500 mt-2">
                   {new Date(prayer.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
                 </div>
               </div>
@@ -61,9 +69,9 @@ export default function AnsweredPrayers({ prayers, onEdit }: AnsweredPrayersProp
           </div>
         ) : (
           <div className="text-center py-12">
-            <div className="text-4xl mb-3">🙏</div>
-            <p className="text-slate-600 dark:text-slate-400 mb-2">No answered prayers yet</p>
-            <p className="text-sm text-slate-500 dark:text-slate-500">
+            <div className="text-6xl mb-4 animate-bounce">🙏</div>
+            <p className="text-white font-semibold mb-2">No answered prayers yet</p>
+            <p className="text-sm text-slate-400">
               Mark prayers as answered in the Compose tab to see them here
             </p>
           </div>
diff --git a/src/components/CalendarView.tsx b/src/components/CalendarView.tsx
index c589437..dab8df7 100644
--- a/src/components/CalendarView.tsx
+++ b/src/components/CalendarView.tsx
@@ -56,34 +56,40 @@ export default function CalendarView({ prayers, onDayClick }: CalendarViewProps)
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 pt-24 px-4 pb-8">
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 pt-24 px-4 pb-8">
+      {/* Animated Background */}
+      <div className="fixed inset-0 -z-10">
+        <div className="absolute top-40 right-20 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl"></div>
+        <div className="absolute bottom-40 left-20 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl"></div>
+      </div>
+
       <div className="max-w-4xl mx-auto">
         {/* Header */}
         <div className="text-center mb-8">
-          <h1 className="text-4xl font-bold text-slate-900 dark:text-white mb-2">
-            Haver
+          <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent mb-2">
+            📅 Prayer Journal
           </h1>
-          <p className="text-slate-600 dark:text-slate-400">
+          <p className="text-slate-400">
             Click on days with entries to view them
           </p>
         </div>
 
         {/* Calendar */}
-        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
+        <div className="bg-slate-800/60 backdrop-blur-xl rounded-xl shadow-lg p-6 border border-slate-700/50">
           {/* Month Navigation */}
           <div className="flex justify-between items-center mb-6">
             <button
               onClick={prevMonth}
-              className="px-4 py-2 rounded-lg bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-slate-900 dark:text-white transition-colors"
+              className="px-4 py-2 rounded-lg bg-slate-700 hover:bg-slate-600 text-white transition-colors"
             >
               ← Previous
             </button>
-            <h2 className="text-2xl font-bold text-slate-900 dark:text-white">
+            <h2 className="text-2xl font-bold text-white">
               {currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}
             </h2>
             <button
               onClick={nextMonth}
-              className="px-4 py-2 rounded-lg bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-slate-900 dark:text-white transition-colors"
+              className="px-4 py-2 rounded-lg bg-slate-700 hover:bg-slate-600 text-white transition-colors"
             >
               Next →
             </button>
@@ -92,7 +98,7 @@ export default function CalendarView({ prayers, onDayClick }: CalendarViewProps)
           {/* Day Headers */}
           <div className="grid grid-cols-7 gap-2 mb-4">
             {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (
-              <div key={day} className="text-center font-semibold text-slate-600 dark:text-slate-400 py-2">
+              <div key={day} className="text-center font-semibold text-slate-400 py-2">
                 {day}
               </div>
             ))}
@@ -115,7 +121,7 @@ export default function CalendarView({ prayers, onDayClick }: CalendarViewProps)
                 : 0;
 
               // Determine color based on activity type
-              let bgColor = 'bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-white hover:bg-slate-200 dark:hover:bg-slate-600';
+              let bgColor = 'bg-slate-700 text-white hover:bg-slate-600';
               if (hasEntry && hasPrayedFor) {
                 // Both activities - purple (combination)
                 bgColor = 'bg-purple-500 text-white hover:bg-purple-600 shadow-md';
@@ -158,33 +164,33 @@ export default function CalendarView({ prayers, onDayClick }: CalendarViewProps)
         </div>
 
         {/* Color Legend */}
-        <div className="mt-6 bg-white dark:bg-slate-800 rounded-lg p-4 shadow">
-          <h3 className="text-sm font-semibold text-slate-900 dark:text-white mb-3">Legend</h3>
+        <div className="mt-6 bg-slate-800/60 backdrop-blur-xl rounded-xl p-5 shadow-lg border border-slate-700/50">
+          <h3 className="text-sm font-semibold text-white mb-3">Legend</h3>
           <div className="grid grid-cols-2 md:grid-cols-3 gap-3 text-sm">
             <div className="flex items-center gap-2">
               <div className="w-4 h-4 rounded bg-blue-500"></div>
-              <span className="text-slate-700 dark:text-slate-300">Prayer Entry</span>
+              <span className="text-slate-300">Prayer Entry</span>
             </div>
             <div className="flex items-center gap-2">
               <div className="w-4 h-4 rounded bg-green-500"></div>
-              <span className="text-slate-700 dark:text-slate-300">Prayed For</span>
+              <span className="text-slate-300">Prayed For</span>
             </div>
             <div className="flex items-center gap-2">
               <div className="w-4 h-4 rounded bg-purple-500"></div>
-              <span className="text-slate-700 dark:text-slate-300">Both</span>
+              <span className="text-slate-300">Both</span>
             </div>
           </div>
         </div>
 
         {/* Stats */}
         <div className="mt-8 grid grid-cols-2 gap-4">
-          <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow">
-            <p className="text-slate-600 dark:text-slate-400 text-sm font-medium">Total Entries</p>
-            <p className="text-3xl font-bold text-slate-900 dark:text-white">{prayers.length}</p>
+          <div className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-5 shadow-lg border border-slate-700/50">
+            <p className="text-slate-400 text-sm font-medium">Total Entries</p>
+            <p className="text-3xl font-bold text-white">{prayers.length}</p>
           </div>
-          <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow">
-            <p className="text-slate-600 dark:text-slate-400 text-sm font-medium">Days with Entries</p>
-            <p className="text-3xl font-bold text-slate-900 dark:text-white">
+          <div className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-5 shadow-lg border border-slate-700/50">
+            <p className="text-slate-400 text-sm font-medium">Days with Entries</p>
+            <p className="text-3xl font-bold text-white">
               {daysWithEntries.size}
             </p>
           </div>
diff --git a/src/components/DailyEntry.tsx b/src/components/DailyEntry.tsx
index 1c7d111..278622b 100644
--- a/src/components/DailyEntry.tsx
+++ b/src/components/DailyEntry.tsx
@@ -49,7 +49,7 @@ export default function DailyEntry({
       <div className="max-w-2xl mx-auto">
         {/* Header */}
         <div className="text-center mb-12">
-          <h1 className="text-5xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent mb-2">
+          <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent mb-2">
             {isToday ? "✍️ Today's Prayer" : '📝 Prayer Entry'}
           </h1>
           <p className="text-slate-400 text-lg">
diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx
index 1263e04..2994226 100644
--- a/src/components/HomePage.tsx
+++ b/src/components/HomePage.tsx
@@ -129,8 +129,8 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
         </div>
 
         {/* Header with Personalized Greeting */}
-        <div className="max-w-md mx-auto mb-12">
-          <h1 className="text-4xl font-bold text-white mb-3">
+        <div className="max-w-md mx-auto mb-12 text-center">
+          <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent mb-3">
             {getGreeting()}, {getFirstName()}!
           </h1>
           {activePrayerCount > 0 ? (
diff --git a/src/components/ReflectionsList.tsx b/src/components/ReflectionsList.tsx
index 388d4b3..37390b7 100644
--- a/src/components/ReflectionsList.tsx
+++ b/src/components/ReflectionsList.tsx
@@ -69,11 +69,17 @@ export default function PrayerList({ prayers, onPrayerClick, onEdit }: PrayerLis
   const resultCount = filtered.length;
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-slate-900 to-slate-800 pt-24 px-4 pb-8">
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 pt-24 px-4 pb-8">
+      {/* Animated Background */}
+      <div className="fixed inset-0 -z-10">
+        <div className="absolute top-40 right-20 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl"></div>
+        <div className="absolute bottom-40 left-20 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl"></div>
+      </div>
+
       <div className="max-w-2xl mx-auto">
         {/* Header */}
         <div className="text-center mb-8">
-          <h1 className="text-4xl font-bold text-white mb-2">Past Prayers</h1>
+          <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent mb-2">📖 Past Prayers</h1>
           <p className="text-slate-400">
             {resultCount} {resultCount === 1 ? 'prayer' : 'prayers'} found
           </p>
@@ -86,7 +92,7 @@ export default function PrayerList({ prayers, onPrayerClick, onEdit }: PrayerLis
             placeholder="Search by prayer text or person..."
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            className="w-full px-4 py-3 rounded-lg border border-slate-600 bg-slate-800 text-white placeholder-slate-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+            className="w-full px-4 py-3 rounded-xl bg-slate-800/60 backdrop-blur-xl border border-slate-700/50 text-white placeholder-slate-500 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all"
           />
 
           {/* Sort Options */}
@@ -189,7 +195,7 @@ export default function PrayerList({ prayers, onPrayerClick, onEdit }: PrayerLis
                     {grouped[date].map(prayer => (
                       <div
                         key={prayer.id}
-                        className="bg-slate-800 rounded-lg p-6 shadow hover:shadow-lg transition-all cursor-pointer border border-slate-700 hover:border-blue-500"
+                        className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-6 shadow-md hover:shadow-xl transition-all cursor-pointer border border-slate-700/50 hover:border-blue-500"
                         onClick={() => onPrayerClick(prayer)}
                       >
                         <div className="flex items-start gap-3">
diff --git a/src/components/ThingsToPrayFor.tsx b/src/components/ThingsToPrayFor.tsx
index 21061b3..65389a7 100644
--- a/src/components/ThingsToPrayFor.tsx
+++ b/src/components/ThingsToPrayFor.tsx
@@ -47,7 +47,7 @@ export default function ThingsToPrayFor({ prayers, onEdit, onMarkPrayed }: Thing
       <div className="max-w-2xl mx-auto">
         {/* Header */}
         <div className="text-center mb-12">
-          <h1 className="text-5xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent mb-2">
+          <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent mb-2">
             🙏 Things to Pray For
           </h1>
           <p className="text-slate-400 text-lg">