From 4500fde334f5f26d26f1ad834115566c4a711276 Mon Sep 17 00:00:00 2001 From: Jeet Debnath Date: Tue, 21 Apr 2026 11:22:14 +0530 Subject: [PATCH] photo ui update --- src/App.css | 59 +++++++++++++++++++++++----------- src/contexts/AuthContext.tsx | 4 +-- src/hooks/useReminder.ts | 14 ++++---- src/pages/SettingsPage.tsx | 62 +++++++++++++++++++----------------- 4 files changed, 82 insertions(+), 57 deletions(-) diff --git a/src/App.css b/src/App.css index 81c7304..e92f2fd 100644 --- a/src/App.css +++ b/src/App.css @@ -1308,13 +1308,20 @@ } .settings-profile-name { - margin: 0 0 0.3rem; + margin: 0 0 0.15rem; font-size: 1.0625rem; font-weight: 700; color: #1a1a1a; font-family: "Sniglet", system-ui; } +.settings-profile-email { + margin: 0; + font-size: 0.75rem; + color: var(--color-text-muted); + font-family: "Sniglet", system-ui; +} + .settings-profile-badge { display: inline-block; padding: 0.15rem 0.5rem; @@ -1360,8 +1367,7 @@ position: relative; width: 80px; height: 80px; - margin: 0 auto 0.5rem; - cursor: pointer; + margin: 0 auto 0.75rem; border-radius: 50%; overflow: hidden; } @@ -1387,30 +1393,44 @@ font-family: "Sniglet", system-ui; } -.edit-modal-avatar-overlay { - position: absolute; - inset: 0; - background: rgba(0, 0, 0, 0.35); +.edit-modal-photo-actions { display: flex; - align-items: center; justify-content: center; - color: #fff; - border-radius: 50%; + gap: 0.5rem; + margin-bottom: 0.75rem; +} + +.edit-modal-change-photo, +.edit-modal-remove-photo { + flex: 1; + max-width: 130px; + padding: 0.45rem 0.75rem; + border-radius: 8px; + font-size: 0.8rem; + font-weight: 600; + cursor: pointer; + font-family: "Sniglet", system-ui; + transition: background 0.15s; +} + +.edit-modal-change-photo { + background: var(--color-accent-light, #dcfce7); + border: 1.5px solid var(--color-primary, #22c55e); + color: var(--color-primary, #22c55e); +} + +.edit-modal-change-photo:hover { + background: #bbf7d0; } .edit-modal-remove-photo { - display: block; - margin: 0 auto 0.5rem; - background: none; - border: none; + background: #fef2f2; + border: 1.5px solid #fca5a5; color: #ef4444; - font-size: 0.75rem; - cursor: pointer; - padding: 0.25rem 0.5rem; } .edit-modal-remove-photo:hover { - text-decoration: underline; + background: #fee2e2; } .edit-modal-save { @@ -1653,7 +1673,8 @@ width: 100%; display: flex; align-items: center; - justify-content: space-between; + justify-content: center; + gap: 0.5rem; padding: 0.875rem 1.125rem; margin-bottom: 0.75rem; font-size: 0.9375rem; diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx index a07e185..ee87da3 100644 --- a/src/contexts/AuthContext.tsx +++ b/src/contexts/AuthContext.tsx @@ -164,7 +164,7 @@ export function AuthProvider({ children }: { children: ReactNode }) { // Try to get existing user try { - console.log('[Auth] Fetching user by email:', email) + // console.log('[Auth] Fetching user by email:', email) const existingUser = await getUserByEmail(email, token) as MongoUser setUserId(existingUser.id) setMongoUser(existingUser) @@ -179,7 +179,7 @@ export function AuthProvider({ children }: { children: ReactNode }) { }, token ) as MongoUser - console.log('[Auth] Registered new user:', newUser.id) + // console.log('[Auth] Registered new user:', newUser.id) setUserId(newUser.id) setMongoUser(newUser) syncReminderFromDb(newUser) diff --git a/src/hooks/useReminder.ts b/src/hooks/useReminder.ts index 2a31b7c..f65c13b 100644 --- a/src/hooks/useReminder.ts +++ b/src/hooks/useReminder.ts @@ -35,11 +35,11 @@ async function getFcmToken(): Promise { } const swReg = await navigator.serviceWorker.ready - console.log('[FCM] Service worker ready:', swReg.active?.scriptURL) + // console.log('[FCM] Service worker ready:', swReg.active?.scriptURL) const token = await getToken(messaging, { vapidKey: VAPID_KEY, serviceWorkerRegistration: swReg }) if (token) { - console.log('[FCM] Token obtained:', token.slice(0, 20) + '…') + // console.log('[FCM] Token obtained:', token.slice(0, 20) + '…') } else { console.warn('[FCM] getToken returned empty — VAPID key wrong or SW not registered?') } @@ -74,13 +74,13 @@ export async function enableReminder( } const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone - console.log('[FCM] Saving token and reminder settings:', { timeStr, timezone }) + // console.log('[FCM] Saving token and reminder settings:', { timeStr, timezone }) await saveFcmToken(userId, fcmToken, authToken) - console.log('[FCM] Token saved to backend') + // console.log('[FCM] Token saved to backend') await saveReminderSettings(userId, { time: timeStr, enabled: true, timezone }, authToken) - console.log('[FCM] Reminder settings saved to backend') + // console.log('[FCM] Reminder settings saved to backend') localStorage.setItem(REMINDER_TIME_KEY, timeStr) localStorage.setItem(REMINDER_ENABLED_KEY, 'true') @@ -113,10 +113,10 @@ export async function listenForegroundMessages(): Promise<() => void> { const messaging = await messagingPromise if (!messaging) return () => {} - console.log('[FCM] Foreground message listener registered') + // console.log('[FCM] Foreground message listener registered') const unsubscribe = onMessage(messaging, (payload) => { - console.log('[FCM] Foreground message received:', payload) + // console.log('[FCM] Foreground message received:', payload) const title = payload.notification?.title || 'Grateful Journal 🌱' const body = payload.notification?.body || "You haven't written today yet." if (Notification.permission !== 'granted') { diff --git a/src/pages/SettingsPage.tsx b/src/pages/SettingsPage.tsx index ba4cdf3..6e18a43 100644 --- a/src/pages/SettingsPage.tsx +++ b/src/pages/SettingsPage.tsx @@ -348,6 +348,7 @@ export default function SettingsPage() {

{displayName}

+ {user?.email &&

{user.email}

}
{/* Sign Out */} @@ -650,14 +651,14 @@ export default function SettingsPage() {
e.stopPropagation()}>

Edit Profile

- - {editPhotoPreview && ( +
+
- )} + {editPhotoPreview && ( + + )} +