sortedcord/BrewJournal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve profile page

Browse Source
This commit is contained in:
Aditya Gupta
2026-06-06 12:31:27 +05:30
parent f99ba7e9a7
commit 9d98966a8e
2 changed files with 41 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/UpdatePrompt.jsx
View File

@@ -37,9 +37,9 @@ export default function UpdatePrompt() {
<div
className={`fixed inset-x-0 bottom-28 z-[150] flex justify-center px-4 transition-all duration-300 ease-out ${active ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
>
<div className="bg-[#2C1810] text-[#FAF6F1] rounded-2xl shadow-[0_8px_32px_rgba(44,24,16,0.35)] flex items-center gap-3 px-4 py-3.5 max-w-[420px] w-full">
<div className="bg-[#2C1810] text-[#FAF6F1] rounded-full shadow-[0_8px_32px_rgba(44,24,16,0.35)] flex items-center gap-3 pl-3 pr-4 py-2.5 max-w-[420px] w-full border border-white/5">
{/* Icon */}
<div className="w-9 h-9 rounded-xl bg-white/10 flex items-center justify-center flex-shrink-0">
<div className="w-9 h-9 rounded-full bg-white/10 flex items-center justify-center flex-shrink-0">
<RefreshCw size={16} strokeWidth={2.5} className="text-white" />
</div>
@@ -53,13 +53,13 @@ export default function UpdatePrompt() {
<div className="flex items-center gap-2 flex-shrink-0">
<button
onClick={handleDismiss}
className="text-xs text-white/50 hover:text-white/80 transition-colors cursor-pointer px-1 py-1"
className="text-xs text-white/50 hover:text-white/80 transition-colors cursor-pointer px-2 py-2"
>
Later
</button>
<button
onClick={handleUpdate}
className="text-xs font-semibold bg-white text-[#2C1810] px-3 py-1.5 rounded-lg hover:bg-white/90 transition-colors cursor-pointer"
className="text-xs font-semibold bg-white text-[#2C1810] px-4 py-2 rounded-full hover:bg-white/90 transition-colors cursor-pointer"
>
Update
</button>

49
src/pages/ProfilePage.jsx
View File

@@ -2,6 +2,7 @@
import { useContext } from "react";
import { AuthContext } from "../AuthContext";
import { useTheme } from "../ThemeContext";
import { User, Mail, Contrast, Coffee, Database, MessageSquare } from "lucide-react";
export default function ProfilePage({ user, isOnline, syncing, showSyncedStatus }) {
const { logout } = useContext(AuthContext);
@@ -18,7 +19,7 @@ export default function ProfilePage({ user, isOnline, syncing, showSyncedStatus
{/* Avatar & Name */}
<div className="flex flex-col items-center pt-6 pb-8">
<div className="w-20 h-20 rounded-full bg-[#2C1810] dark:bg-[#D4A325] flex items-center justify-center text-3xl text-[#FAF6F1] dark:text-[#2C1810] font-serif font-bold mb-3 shadow-sm">
{user?.username?.[0]?.toUpperCase() || "☕"}
{user?.username?.[0]?.toUpperCase() || <User size={32} strokeWidth={2} />}
</div>
<div className="font-serif text-xl font-semibold text-[#2C1810] dark:text-[#FAF6F1]">{user?.username}</div>
<div className="text-sm text-[#9C8B7A] dark:text-[#C8B9A6] mt-0.5">{user?.email}</div>
@@ -35,14 +36,14 @@ export default function ProfilePage({ user, isOnline, syncing, showSyncedStatus
<div className="text-[11px] font-semibold uppercase tracking-widest text-[#9C8B7A] dark:text-[#C8B9A6] mb-2 px-1">Account</div>
<div className="bg-white dark:bg-[#22120B] rounded-2xl border border-[#E8DFD3] dark:border-[#3B2217] overflow-hidden shadow-sm transition-colors duration-200">
<div className="flex items-center gap-3 px-4 py-3.5 border-b border-[#F3EDE4] dark:border-[#3B2217]">
<span className="text-lg">👤</span>
<User size={18} strokeWidth={2} className="text-[#9C8B7A] dark:text-[#C8B9A6] flex-shrink-0" />
<div>
<div className="text-xs text-[#9C8B7A] dark:text-[#C8B9A6]">Username</div>
<div className="text-sm font-medium text-[#2C1810] dark:text-[#FAF6F1]">{user?.username}</div>
</div>
</div>
<div className="flex items-center gap-3 px-4 py-3.5">
<span className="text-lg">✉️</span>
<Mail size={18} strokeWidth={2} className="text-[#9C8B7A] dark:text-[#C8B9A6] flex-shrink-0" />
<div>
<div className="text-xs text-[#9C8B7A] dark:text-[#C8B9A6]">Email</div>
<div className="text-sm font-medium text-[#2C1810] dark:text-[#FAF6F1]">{user?.email}</div>
@@ -51,13 +52,22 @@ export default function ProfilePage({ user, isOnline, syncing, showSyncedStatus
</div>
</div>
{/* Sign out */}
<div className="mb-6">
<button
onClick={() => logout()}
className="w-full py-3.5 border border-[#B44040] dark:border-[#E55B5B] rounded-2xl text-sm font-semibold text-[#B44040] dark:text-[#E55B5B] bg-transparent cursor-pointer hover:bg-[rgba(180,64,64,0.05)] dark:hover:bg-[rgba(229,91,91,0.05)] transition-all">
Sign Out
</button>
</div>
{/* Appearance Settings section */}
<div className="mb-6">
<div className="text-[11px] font-semibold uppercase tracking-widest text-[#9C8B7A] dark:text-[#C8B9A6] mb-2 px-1">Appearance</div>
<div className="bg-white dark:bg-[#22120B] rounded-2xl border border-[#E8DFD3] dark:border-[#3B2217] p-4 flex flex-col gap-3 shadow-sm transition-colors duration-200">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<span className="text-lg">🌓</span>
<Contrast size={18} strokeWidth={2} className="text-[#9C8B7A] dark:text-[#C8B9A6] flex-shrink-0" />
<div>
<div className="text-sm font-medium text-[#2C1810] dark:text-[#FAF6F1]">Theme</div>
<div className="text-xs text-[#9C8B7A] dark:text-[#C8B9A6]">Customize your viewing experience</div>
@@ -92,13 +102,13 @@ export default function ProfilePage({ user, isOnline, syncing, showSyncedStatus
<div className="bg-white dark:bg-[#22120B] rounded-2xl border border-[#E8DFD3] dark:border-[#3B2217] overflow-hidden shadow-sm transition-colors duration-200">
<div className="flex items-center justify-between px-4 py-3.5 border-b border-[#F3EDE4] dark:border-[#3B2217]">
<div className="flex items-center gap-3">
<span className="text-lg">☕</span>
<Coffee size={18} strokeWidth={2} className="text-[#9C8B7A] dark:text-[#C8B9A6] flex-shrink-0" />
<div className="text-sm font-medium text-[#2C1810] dark:text-[#FAF6F1]">Brew Journal</div>
</div>
<div className="text-xs text-[#9C8B7A] dark:text-[#C8B9A6] font-mono">{__APP_VERSION__}</div>
</div>
<div className="flex items-center gap-3 px-4 py-3.5">
<span className="text-lg">🗄️</span>
<Database size={18} strokeWidth={2} className="text-[#9C8B7A] dark:text-[#C8B9A6] flex-shrink-0" />
<div>
<div className="text-xs text-[#9C8B7A] dark:text-[#C8B9A6]">Storage</div>
<div className="text-sm font-medium text-[#2C1810] dark:text-[#FAF6F1]">Local + PostgreSQL</div>
@@ -107,12 +117,27 @@ export default function ProfilePage({ user, isOnline, syncing, showSyncedStatus
</div>
</div>
{/* Sign out */}
<button
onClick={() => logout()}
className="w-full py-3.5 border border-[#B44040] dark:border-[#E55B5B] rounded-2xl text-sm font-semibold text-[#B44040] dark:text-[#E55B5B] bg-transparent cursor-pointer hover:bg-[rgba(180,64,64,0.05)] dark:hover:bg-[rgba(229,91,91,0.05)] transition-all">
Sign Out
</button>
{/* Support section */}
<div className="mb-6">
<div className="text-[11px] font-semibold uppercase tracking-widest text-[#9C8B7A] dark:text-[#C8B9A6] mb-2 px-1">Support</div>
<div className="bg-white dark:bg-[#22120B] rounded-2xl border border-[#E8DFD3] dark:border-[#3B2217] overflow-hidden shadow-sm transition-colors duration-200">
<a
href="https://git.adityagupta.dev/sortedcord/brew/issues/new"
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-between px-4 py-3.5 hover:bg-[#F3EDE4]/50 dark:hover:bg-[#2C1810]/50 transition-colors cursor-pointer no-underline group"
>
<div className="flex items-center gap-3">
<MessageSquare size={18} strokeWidth={2} className="text-[#9C8B7A] dark:text-[#C8B9A6] flex-shrink-0" />
<div>
<div className="text-xs text-[#9C8B7A] dark:text-[#C8B9A6]">Feedback</div>
<div className="text-sm font-medium text-[#2C1810] dark:text-[#FAF6F1]">Report an issue or request a feature</div>
</div>
</div>
<span className="text-[#9C8B7A] dark:text-[#C8B9A6] text-sm group-hover:translate-x-0.5 transition-transform duration-200">→</span>
</a>
</div>
</div>
</div>
);
}