nate/prayer-app
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Standardize design across all pages - consistent dark gradient theme, typography, and card styling

Browse Source
This commit is contained in:
nmemmert committed 2026-01-19 08:20:19 -05:00
1 parent 6a9237d76d
commit d760b34ba4
7 files changed
+72 -46
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/AboutPage.tsx
+8 -2
View File
@@ -157,11 +157,17 @@ export default function AboutPage({ userEmail }: AboutPageProps) {
}; };
return ( 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"> <div className="max-w-md mx-auto">
{/* Header */} {/* Header */}
<div className="text-center mb-8"> <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> <p className="text-slate-400">Haver - Your Prayer Companion</p>
</div> </div>
src/components/AnsweredPrayers.tsx
+23 -15
View File
@@ -21,39 +21,47 @@ export default function AnsweredPrayers({ prayers, onEdit }: AnsweredPrayersProp
const answeredPrayers = prayers.filter(p => p.answered); const answeredPrayers = prayers.filter(p => p.answered);
return ( 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"> <div className="max-w-md mx-auto">
<h1 className="text-3xl font-bold text-slate-900 dark:text-white mb-2">Answered Prayers</h1> <div className="text-center mb-8">
<p className="text-slate-600 dark:text-slate-400 mb-6">Celebrate prayers God has answered</p> <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 ? ( {answeredPrayers.length > 0 ? (
<div className="space-y-4"> <div className="space-y-4">
{answeredPrayers.map((prayer) => ( {answeredPrayers.map((prayer) => (
<div <div
key={prayer.id} 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)} onClick={() => onEdit?.(prayer)}
> >
<div className="flex items-start gap-2 mb-2"> <div className="flex items-start gap-3 mb-2">
<span className="text-2xl">✅</span> <span className="text-3xl">✅</span>
<div className="flex-1"> <div className="flex-1">
{prayer.prayFor && ( {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} {prayer.prayFor}
</div> </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>
</div> </div>
{prayer.answerDetails && ( {prayer.answerDetails && (
<div className="mt-3 pt-3 border-t border-slate-200 dark:border-slate-700"> <div className="mt-3 pt-3 border-t 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-xs font-semibold 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> <p className="text-sm text-slate-300 italic line-clamp-3">{prayer.answerDetails}</p>
</div> </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' })} {new Date(prayer.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
</div> </div>
</div> </div>
@@ -61,9 +69,9 @@ export default function AnsweredPrayers({ prayers, onEdit }: AnsweredPrayersProp
</div> </div>
) : ( ) : (
<div className="text-center py-12"> <div className="text-center py-12">
<div className="text-4xl mb-3">🙏</div> <div className="text-6xl mb-4 animate-bounce">🙏</div>
<p className="text-slate-600 dark:text-slate-400 mb-2">No answered prayers yet</p> <p className="text-white font-semibold mb-2">No answered prayers yet</p>
<p className="text-sm text-slate-500 dark:text-slate-500"> <p className="text-sm text-slate-400">
Mark prayers as answered in the Compose tab to see them here Mark prayers as answered in the Compose tab to see them here
</p> </p>
</div> </div>
src/components/CalendarView.tsx
+27 -21
View File
@@ -56,34 +56,40 @@ export default function CalendarView({ prayers, onDayClick }: CalendarViewProps)
} }
return ( 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"> <div className="max-w-4xl mx-auto">
{/* Header */} {/* Header */}
<div className="text-center mb-8"> <div className="text-center mb-8">
<h1 className="text-4xl font-bold text-slate-900 dark:text-white 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">
Haver 📅 Prayer Journal
</h1> </h1>
<p className="text-slate-600 dark:text-slate-400"> <p className="text-slate-400">
Click on days with entries to view them Click on days with entries to view them
</p> </p>
</div> </div>
{/* Calendar */} {/* 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 */} {/* Month Navigation */}
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-6">
<button <button
onClick={prevMonth} 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 ← Previous
</button> </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' })} {currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}
</h2> </h2>
<button <button
onClick={nextMonth} 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 → Next →
</button> </button>
@@ -92,7 +98,7 @@ export default function CalendarView({ prayers, onDayClick }: CalendarViewProps)
{/* Day Headers */} {/* Day Headers */}
<div className="grid grid-cols-7 gap-2 mb-4"> <div className="grid grid-cols-7 gap-2 mb-4">
{['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => ( {['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} {day}
</div> </div>
))} ))}
@@ -115,7 +121,7 @@ export default function CalendarView({ prayers, onDayClick }: CalendarViewProps)
: 0; : 0;
// Determine color based on activity type // 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) { if (hasEntry && hasPrayedFor) {
// Both activities - purple (combination) // Both activities - purple (combination)
bgColor = 'bg-purple-500 text-white hover:bg-purple-600 shadow-md'; bgColor = 'bg-purple-500 text-white hover:bg-purple-600 shadow-md';
@@ -158,33 +164,33 @@ export default function CalendarView({ prayers, onDayClick }: CalendarViewProps)
</div> </div>
{/* Color Legend */} {/* Color Legend */}
<div className="mt-6 bg-white dark:bg-slate-800 rounded-lg p-4 shadow"> <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-slate-900 dark:text-white mb-3">Legend</h3> <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="grid grid-cols-2 md:grid-cols-3 gap-3 text-sm">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="w-4 h-4 rounded bg-blue-500"></div> <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>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="w-4 h-4 rounded bg-green-500"></div> <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>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="w-4 h-4 rounded bg-purple-500"></div> <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> </div>
</div> </div>
{/* Stats */} {/* Stats */}
<div className="mt-8 grid grid-cols-2 gap-4"> <div className="mt-8 grid grid-cols-2 gap-4">
<div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow"> <div className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-5 shadow-lg border border-slate-700/50">
<p className="text-slate-600 dark:text-slate-400 text-sm font-medium">Total Entries</p> <p className="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> <p className="text-3xl font-bold text-white">{prayers.length}</p>
</div> </div>
<div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow"> <div className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-5 shadow-lg border border-slate-700/50">
<p className="text-slate-600 dark:text-slate-400 text-sm font-medium">Days with Entries</p> <p className="text-slate-400 text-sm font-medium">Days with Entries</p>
<p className="text-3xl font-bold text-slate-900 dark:text-white"> <p className="text-3xl font-bold text-white">
{daysWithEntries.size} {daysWithEntries.size}
</p> </p>
</div> </div>
src/components/DailyEntry.tsx
+1 -1
View File
@@ -49,7 +49,7 @@ export default function DailyEntry({
<div className="max-w-2xl mx-auto"> <div className="max-w-2xl mx-auto">
{/* Header */} {/* Header */}
<div className="text-center mb-12"> <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'} {isToday ? "✍️ Today's Prayer" : '📝 Prayer Entry'}
</h1> </h1>
<p className="text-slate-400 text-lg"> <p className="text-slate-400 text-lg">
src/components/HomePage.tsx
+2 -2
View File
@@ -129,8 +129,8 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
</div> </div>
{/* Header with Personalized Greeting */} {/* Header with Personalized Greeting */}
<div className="max-w-md mx-auto mb-12"> <div className="max-w-md mx-auto mb-12 text-center">
<h1 className="text-4xl font-bold text-white mb-3"> <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()}! {getGreeting()}, {getFirstName()}!
</h1> </h1>
{activePrayerCount > 0 ? ( {activePrayerCount > 0 ? (
src/components/ReflectionsList.tsx
+10 -4
View File
@@ -69,11 +69,17 @@ export default function PrayerList({ prayers, onPrayerClick, onEdit }: PrayerLis
const resultCount = filtered.length; const resultCount = filtered.length;
return ( 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"> <div className="max-w-2xl mx-auto">
{/* Header */} {/* Header */}
<div className="text-center mb-8"> <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"> <p className="text-slate-400">
{resultCount} {resultCount === 1 ? 'prayer' : 'prayers'} found {resultCount} {resultCount === 1 ? 'prayer' : 'prayers'} found
</p> </p>
@@ -86,7 +92,7 @@ export default function PrayerList({ prayers, onPrayerClick, onEdit }: PrayerLis
placeholder="Search by prayer text or person..." placeholder="Search by prayer text or person..."
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} 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 */} {/* Sort Options */}
@@ -189,7 +195,7 @@ export default function PrayerList({ prayers, onPrayerClick, onEdit }: PrayerLis
{grouped[date].map(prayer => ( {grouped[date].map(prayer => (
<div <div
key={prayer.id} 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)} onClick={() => onPrayerClick(prayer)}
> >
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
src/components/ThingsToPrayFor.tsx
+1 -1
View File
@@ -47,7 +47,7 @@ export default function ThingsToPrayFor({ prayers, onEdit, onMarkPrayed }: Thing
<div className="max-w-2xl mx-auto"> <div className="max-w-2xl mx-auto">
{/* Header */} {/* Header */}
<div className="text-center mb-12"> <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 🙏 Things to Pray For
</h1> </h1>
<p className="text-slate-400 text-lg"> <p className="text-slate-400 text-lg">