Standardize design across all pages - consistent dark gradient theme, typography, and card styling
This commit is contained in:
nmemmert committed
1 parent
6a9237d76d
commit
d760b34ba4
7 files changed
+72
-46
No files matched your search
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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 ? (
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in new issue
Block a user