jeet/grateful-journal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui enhance

Browse Source
This commit is contained in:
Jeet Debnath
2026-03-04 11:49:45 +05:30
parent 190243081a
commit bed32863da
11 changed files with 731 additions and 1448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/pages/HistoryPage.tsx
View File

@@ -11,21 +11,7 @@ interface JournalEntry {
export default function HistoryPage() {
const [currentMonth, setCurrentMonth] = useState(new Date())
// Mock data - replace with actual Firebase data later
const mockEntries: JournalEntry[] = [
{
id: '1',
date: new Date(2026, 1, 12),
title: 'Feeling much lighter today',
content: 'After the long conversation yesterday, I woke up with a sense of clarity I haven\'t felt in weeks...'
},
{
id: '2',
date: new Date(2026, 1, 5),
title: 'Morning thoughts',
content: 'The coffee smells amazing this morning. Simple pleasures like this remind me...'
}
]
const entries: JournalEntry[] = []
const getDaysInMonth = (date: Date) => {
const year = date.getFullYear()
@@ -39,7 +25,7 @@ export default function HistoryPage() {
}
const hasEntryOnDate = (day: number) => {
return mockEntries.some(entry => {
return entries.some(entry => {
const entryDate = new Date(entry.date)
return entryDate.getDate() === day &&
entryDate.getMonth() === currentMonth.getMonth() &&
@@ -82,12 +68,6 @@ export default function HistoryPage() {
return (
<div className="history-page">
<div className="history-bg-decoration">
<div className="bg-orb bg-orb-1"></div>
<div className="bg-orb bg-orb-2"></div>
<div className="bg-pattern"></div>
</div>
<header className="history-header">
<div className="history-header-text">
<h1>History</h1>
@@ -155,7 +135,11 @@ export default function HistoryPage() {
<h3 className="recent-entries-title">RECENT ENTRIES</h3>
<div className="entries-list">
{mockEntries.map(entry => (
{entries.length === 0 ? (
<p style={{ color: '#9ca3af', fontSize: '0.875rem', textAlign: 'center', padding: '1.5rem 0', fontFamily: 'Inter, sans-serif' }}>
No entries yet. Start writing!
</p>
) : entries.map(entry => (
<button
key={entry.id}
type="button"

49
src/pages/HomePage.tsx
View File

@@ -10,36 +10,29 @@ export default function HomePage() {
if (loading) {
return (
<div className="home-page">
<p>Loading…</p>
<div className="home-page" style={{ alignItems: 'center', justifyContent: 'center' }}>
<p style={{ color: '#9ca3af' }}>Loading…</p>
</div>
)
}
if (!user) {
return (
<div className="home-page">
<h1>Grateful Journal</h1>
<p>Sign in to start your journal.</p>
<Link to="/login" className="home-login-link">
Go to login
</Link>
<div className="home-page" style={{ alignItems: 'center', justifyContent: 'center', gap: '1rem' }}>
<h1 style={{ fontFamily: 'Playfair Display, Georgia, serif', color: '#1a1a1a' }}>Grateful Journal</h1>
<p style={{ color: '#6b7280' }}>Sign in to start your journal.</p>
<Link to="/login" className="home-login-link">Go to login</Link>
</div>
)
}
const displayName = user.displayName ?? user.email ?? 'there'
// Get current date formatted like "THURSDAY, OCT 24"
// Format date: "THURSDAY, OCT 24"
const today = new Date()
const dateString = today.toLocaleDateString('en-US', {
weekday: 'long',
month: 'short',
day: 'numeric'
}).toUpperCase()
const dateString = today
.toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric' })
.toUpperCase()
const handleWrite = () => {
console.log('Saving entry:', { title, entry })
// TODO: Save to Firebase
setTitle('')
setEntry('')
@@ -47,29 +40,12 @@ export default function HomePage() {
return (
<div className="home-page">
<div className="home-bg-decoration">
<div className="bg-orb bg-orb-1"></div>
<div className="bg-orb bg-orb-2"></div>
<div className="bg-orb bg-orb-3"></div>
<div className="bg-pattern"></div>
</div>
<header className="home-header">
<h1>Grateful Journal</h1>
<div className="home-user">
<span className="home-username">{displayName}</span>
<button type="button" className="home-sign-out" onClick={() => signOut()}>
Sign out
</button>
</div>
</header>
<main className="journal-container">
<div className="journal-card">
<div className="journal-date">{dateString}</div>
<h2 className="journal-prompt">What are you grateful for today?</h2>
<div className="journal-writing-area">
<input
type="text"
@@ -92,3 +68,4 @@ export default function HomePage() {
</div>
)
}

14
src/pages/SettingsPage.tsx
View File

@@ -19,12 +19,6 @@ export default function SettingsPage() {
return (
<div className="settings-page">
<div className="settings-bg-decoration">
<div className="bg-orb bg-orb-1"></div>
<div className="bg-orb bg-orb-2"></div>
<div className="bg-pattern"></div>
</div>
<header className="settings-header">
<div className="settings-header-text">
<h1>Settings</h1>
@@ -80,8 +74,12 @@ export default function SettingsPage() {
<div className="settings-item">
<div className="settings-item-icon settings-item-icon-gray">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2z"></path>
<path d="M12 6v6l4 2"></path>
<path d="M2 12C2 6.5 6.5 2 12 2a10 10 0 0 1 8 4"></path>
<path d="M5 19.5C5.5 18 6 15 6 12c0-1.73.37-3.36 1.03-4.83"></path>
<path d="M10 21c.2-2 .4-5 .4-6 0-1 .2-1.93.56-2.78"></path>
<path d="M14 21c.2-2 .4-5 .4-6 0-3-1-5-3.4-6.5"></path>
<path d="M18.5 21C18 18.5 18 17 18 12c0-1-.07-2-.2-3"></path>
<path d="M22 12a10 10 0 0 1-1.53 5.35"></path>
</svg>
</div>
<div className="settings-item-content">