feat: add app icon branding to all remaining page headers

- CalendarView header now displays icon
- ReflectionsList header now displays icon
- AnsweredPrayers header now displays icon
- ThingsToPrayFor header now displays icon

Completes visual identity unification across all main screens
This commit is contained in:
nmemmert committed 2026-01-19 09:10:39 -05:00
1 parent 74686cece1
commit aa3a35bc4a
17 files changed
+234 -330

No files matched your search

+13 -4
View File
@@ -1,7 +1,7 @@
'use client';
import React from 'react';
import { HandHeart, Sparkles } from 'lucide-react';
import { HandHeart, Sparkles, CheckCircle2, Target } from 'lucide-react';
interface Prayer {
id: string;
@@ -48,6 +48,7 @@ export default function ThingsToPrayFor({ prayers, onEdit, onMarkPrayed }: Thing
<div className="max-w-2xl mx-auto">
{/* Header */}
<div className="text-center mb-12">
<img src="/icon-192x192.png" alt="Haver icon" className="w-12 h-12 mx-auto mb-3 rounded" />
<h1 className="text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent mb-2">
<span className="inline-flex items-center gap-2 justify-center">
<HandHeart className="w-7 h-7 text-blue-400" />
@@ -73,8 +74,8 @@ export default function ThingsToPrayFor({ prayers, onEdit, onMarkPrayed }: Thing
<div key={topic}>
<div className="flex items-center gap-2 mb-4">
<div className="h-1 flex-1 bg-gradient-to-r from-blue-500/50 to-transparent rounded"></div>
<h2 className="text-xl font-bold text-blue-400 px-4">
🎯 {topic}
<h2 className="text-xl font-bold text-blue-400 px-4 inline-flex items-center gap-2">
<Target className="w-5 h-5" /> {topic}
</h2>
<div className="h-1 flex-1 bg-gradient-to-l from-blue-500/50 to-transparent rounded"></div>
</div>
@@ -114,7 +115,15 @@ export default function ThingsToPrayFor({ prayers, onEdit, onMarkPrayed }: Thing
: 'bg-blue-900/40 text-blue-300 border border-blue-500/30 hover:bg-blue-900/60 hover:border-blue-400/50'
}`}
>
{prayedToday ? '✓ Prayed Today' : '🙏 Mark Prayed'}
{prayedToday ? (
<span className="inline-flex items-center gap-1.5">
<CheckCircle2 className="w-4 h-4" /> Prayed Today
</span>
) : (
<span className="inline-flex items-center gap-1.5">
<HandHeart className="w-4 h-4" /> Mark Prayed
</span>
)}
</button>
<button
onClick={() => onEdit(prayer)}