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
1 parent
74686cece1
commit
aa3a35bc4a
17 files changed
+234
-330
No files matched your search
@@ -2,7 +2,7 @@
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import { PenSquare } from 'lucide-react';
|
||||
import { PenSquare, Calendar as CalendarIcon, HandHeart, CheckCircle2, Sparkles, Save, Loader2 } from 'lucide-react';
|
||||
|
||||
interface DailyEntryProps {
|
||||
date: string;
|
||||
@@ -11,6 +11,7 @@ interface DailyEntryProps {
|
||||
onTextChange: (text: string) => void;
|
||||
prayFor: string;
|
||||
onPrayForChange: (prayFor: string) => void;
|
||||
prayForOptions?: string[];
|
||||
answered?: boolean;
|
||||
onAnsweredChange?: (answered: boolean) => void;
|
||||
answerDetails?: string;
|
||||
@@ -27,6 +28,7 @@ export default function DailyEntry({
|
||||
onTextChange,
|
||||
prayFor,
|
||||
onPrayForChange,
|
||||
prayForOptions = [],
|
||||
answered = false,
|
||||
onAnsweredChange,
|
||||
answerDetails = '',
|
||||
@@ -50,6 +52,7 @@ export default function DailyEntry({
|
||||
<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">
|
||||
<PenSquare className="w-7 h-7 text-blue-400" />
|
||||
@@ -70,7 +73,7 @@ export default function DailyEntry({
|
||||
<form onSubmit={onSubmit} className="space-y-6">
|
||||
{/* Date Input */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-300 mb-3">📅 Date</label>
|
||||
<label className="block text-sm font-semibold text-slate-300 mb-3 inline-flex items-center gap-1.5"><CalendarIcon className="w-4 h-4" /> Date</label>
|
||||
<input
|
||||
type="date"
|
||||
value={date}
|
||||
@@ -81,20 +84,28 @@ export default function DailyEntry({
|
||||
|
||||
{/* Pray For */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-300 mb-3">🙏 Praying For (Optional)</label>
|
||||
<label className="block text-sm font-semibold text-slate-300 mb-3 inline-flex items-center gap-1.5"><HandHeart className="w-4 h-4" /> Praying For (Optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={prayFor}
|
||||
onChange={(e) => onPrayForChange(e.target.value)}
|
||||
placeholder="Person, situation, or concern..."
|
||||
list="prayfor-options"
|
||||
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"
|
||||
/>
|
||||
{prayForOptions.length > 0 && (
|
||||
<datalist id="prayfor-options">
|
||||
{prayForOptions.map((opt) => (
|
||||
<option key={opt} value={opt} />
|
||||
))}
|
||||
</datalist>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Prayer Text */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<label className="block text-sm font-semibold text-slate-300">💬 Your Prayer</label>
|
||||
<label className="block text-sm font-semibold text-slate-300 inline-flex items-center gap-1.5"><PenSquare className="w-4 h-4" /> Your Prayer</label>
|
||||
<span className="text-xs text-slate-500">{wordCount} words</span>
|
||||
</div>
|
||||
<textarea
|
||||
@@ -116,15 +127,15 @@ export default function DailyEntry({
|
||||
onChange={(e) => onAnsweredChange?.(e.target.checked)}
|
||||
className="w-5 h-5 rounded border-slate-600 bg-slate-700 text-green-500 focus:ring-green-500 cursor-pointer"
|
||||
/>
|
||||
<span className="font-semibold text-slate-300">✅ Mark as answered</span>
|
||||
<span className="font-semibold text-slate-300 inline-flex items-center gap-1.5"><CheckCircle2 className="w-4 h-4" /> Mark as answered</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Answer Details */}
|
||||
{answered && (
|
||||
<div className="bg-green-900/20 backdrop-blur-xl rounded-xl p-4 border border-green-500/30 animate-in fade-in-50 duration-300">
|
||||
<label htmlFor="answerDetails" className="block text-sm font-semibold text-green-400 mb-3">
|
||||
✨ How was it answered?
|
||||
<label htmlFor="answerDetails" className="block text-sm font-semibold text-green-400 mb-3 inline-flex items-center gap-1.5">
|
||||
<Sparkles className="w-4 h-4" /> How was it answered?
|
||||
</label>
|
||||
<textarea
|
||||
id="answerDetails"
|
||||
@@ -143,7 +154,19 @@ export default function DailyEntry({
|
||||
disabled={loading}
|
||||
className="w-full bg-gradient-to-r from-blue-600 via-blue-500 to-purple-600 hover:from-blue-700 hover:via-blue-600 hover:to-purple-700 disabled:from-slate-600 disabled:to-slate-600 text-white font-bold py-4 px-6 rounded-xl transition-all duration-200 disabled:cursor-not-allowed shadow-lg hover:shadow-2xl transform hover:scale-105 border border-blue-400/30 disabled:border-slate-400/30"
|
||||
>
|
||||
{loading ? '⏳ Saving...' : isEditing ? '📝 Update Prayer' : '💾 Save Prayer'}
|
||||
{loading ? (
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<Loader2 className="w-5 h-5 animate-spin" /> Saving...
|
||||
</span>
|
||||
) : isEditing ? (
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<PenSquare className="w-5 h-5" /> Update Prayer
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<Save className="w-5 h-5" /> Save Prayer
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user