From 66ec808df24fb909379668d898b85c7c6bc2b650 Mon Sep 17 00:00:00 2001
From: Hrusikesh123 <hrushikeshs113@gmail.com>
Date: Sat, 6 Sep 2025 21:57:07 +0530
Subject: [PATCH] Profile Page UI Enhancement

---
 TODO.md                             |  1 +
 frontend/src/components/Profile.jsx | 12 ++++++------
 2 files changed, 7 insertions(+), 6 deletions(-)
 create mode 100644 TODO.md

diff --git a/TODO.md b/TODO.md
new file mode 100644
index 0000000..9d0b5cf
--- /dev/null
+++ b/TODO.md
@@ -0,0 +1 @@
+- [x] Change banner background in Profile.jsx to white in light mode and make upload text always visible
diff --git a/frontend/src/components/Profile.jsx b/frontend/src/components/Profile.jsx
index 781be40..37303b5 100644
--- a/frontend/src/components/Profile.jsx
+++ b/frontend/src/components/Profile.jsx
@@ -120,12 +120,12 @@ function Profile() {
 			>
 				{/* Banner area */}
 				<div className="relative h-44 sm:h-56 md:h-64 cursor-pointer group" onClick={() => bannerInputRef.current && bannerInputRef.current.click()}>
-					{draftProfile.bannerUrl ? (
-						<img src={draftProfile.bannerUrl} alt="Banner" className="absolute inset-0 h-full w-full object-cover" />
-					) : (
-						<div className={"absolute inset-0 " + (isDark ? "bg-[#FCA311]" : "bg-[#14213D]")} />
-					)}
-					<div className={(isDark ? "bg-black/30" : "bg-black/20") + " absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center text-sm"}>Click to upload banner</div>
+{draftProfile.bannerUrl ? (
+  <img src={draftProfile.bannerUrl} alt="Banner" className="absolute inset-0 h-full w-full object-cover" />
+) : (
+  <div className={"absolute inset-0 " + (isDark ? "bg-[#14213D]" : "bg-white")} />
+)}
+					<div className={(isDark ? "bg-black/30 opacity-100" : "bg-black/20 opacity-100") + " absolute inset-0 transition-opacity flex items-center justify-center text-sm font-bold " + (isDark ? "text-white" : "text-[#14213D]")}>Click to upload banner</div>
 					<input ref={bannerInputRef} type="file" accept="image/*" className="hidden" onChange={handleBannerFileChange} />
 
 					{/* Delete banner button when image present */}