dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

UPDATE: CSS done for user page

Browse Source
This commit is contained in:
EvanLin3141
2025-02-22 00:03:15 +00:00
parent 3b65bc87ae
commit 07f3bd02f8
2 changed files with 121 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
frontend/src/assets/styles/index.css
View File

@@ -36,7 +36,7 @@ body[data-theme="light"] {
--sideBar-profile-bg: rgb(132, 0, 255);
--sideBar-profile-text: #ffffff;
--profile-border: #ffffff;
--follow-bg: #ff0000;
--follow-text: white;
--follow-shadow: 0px 0px 15px rgba(94, 94, 94, 0.754);
@@ -49,6 +49,22 @@ body[data-theme="light"] {
--quickBar-bg: #ffffff;
--quickBar-text: #000000;
--quickBar-border: #ffffff;
/*User Page*/
--user-name: #000000;
--user-pfp-border: #ffffff;
--user-pfp-border-shadow: -10px 15px 25px rgba(0, 0, 0, 0.754);
--user-borderBg: rgb(123, 0, 0);
--user-box: rgb(128, 0, 255);
--user-box-strip: rgb(255, 0, 0);
--user-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.754);
--user-sideBox: rgb(149, 0, 255);
--user-contentBox: rgb(255, 255, 253);
--user-follow-bg: #ff0000;
--user-bg: rgb(255, 255, 255);
--user-live-bg: rgb(127, 161, 5);
}
body[data-theme="dark"] {
@@ -60,7 +76,7 @@ body[data-theme="dark"] {
--sideBar-profile-bg: rgba(92, 2, 176, 0.592);
--sideBar-profile-text: #ffffff;
--profile-border: #ffffff;
--follow-bg: #a50000c6;
--follow-text: rgb(255, 255, 255);
--follow-shadow: 0px 0px 15px rgba(255, 255, 255, 0.966);
@@ -74,6 +90,23 @@ body[data-theme="dark"] {
--quickBar-bg: #000000d3;
--quickBar-text: #ffffff;
--quickBar-border: #ffffff;
/*User Page*/
--user-name: #ffffff;
--user-pfp-border: #ffffff;
--user-pfp-border-shadow: -10px 15px 25px rgba(0, 0, 0, 0.754);
--user-borderBg: rgb(123, 0, 0);
--user-box: rgb(75, 0, 150);
--user-box-strip: rgb(165, 0, 0);
--user-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.754);
--user-sideBox: rgba(25, 25, 25, 0.938);
--user-contentBox: rgba(108, 0, 0, 0.764);
--user-follow-bg: #9a0000;
--user-bg: rgb(16, 16, 16);
--user-live-bg: rgb(127, 161, 5);
}
body[data-theme="blue"] {
@@ -98,6 +131,25 @@ body[data-theme="blue"] {
--quickBar-bg: #eefafffb;
--quickBar-text: #003571;
--quickBar-border: #ffffff;
/*User Page*/
--user-name: #000000;
--user-pfp-border: #ffffff;
--user-pfp-border-shadow: -10px 15px 25px rgba(0, 0, 0, 0.754);
--user-borderBg: rgb(0, 29, 92);
--user-box: rgb(246, 255, 0);
--user-box-strip: rgb(68, 160, 218);
--user-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.754);
--user-sideBox: #00525c;
--user-contentBox: rgba(161, 254, 252, 0.691);
--user-follow-bg: #78baeddf;
--user-bg: rgba(167, 245, 244, 0.886);
--user-live-bg: rgb(127, 161, 5);
}
body[data-theme="green"] {
@@ -135,9 +187,9 @@ body[data-theme="green"] {
--user-box-strip: rgb(217, 240, 133);
--user-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.754);
--user-sideBox: rgb(1, 61, 30);
--user-contentBox: rgb(245, 228, 167);
--user-bg: rgb(0, 78, 38);
--user-contentBox: rgba(213, 197, 141, 0.982);
--user-follow-bg: #ffffff;
--user-bg: rgb(0, 78, 38);
--user-live-bg: rgb(217, 240, 133);
}
@@ -145,9 +197,9 @@ body[data-theme="orange"] {
--bg-color: #ffe0b2;
--text-color: #e65100;
--sideBar-bg: #fff3dc;
--sideBar-bg: #fff3dc;
--sideBar-text: #4d3b31;
--sideBar-profile-bg: #E67E22;
--sideBar-profile-bg: #E67E22;
--sideBar-profile-text: #ffffff;
--profile-border: #ffd900;
@@ -164,6 +216,22 @@ body[data-theme="orange"] {
--quickBar-bg: #fff3dc;
--quickBar-text: #ff8800;
--quickBar-border: #ffffff;
/*User Page*/
--user-pfp-border: #ffffff;
--user-pfp-border-shadow: -10px 15px 25px rgba(0, 0, 0, 0.754);
--user-name: #000000;
--user-borderBg: rgb(255, 237, 123);
--user-box: rgb(157, 149, 0);
--user-box-strip: rgb(216, 255, 73);
--user-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.754);
--user-sideBox: rgb(189, 116, 43);
--user-contentBox: rgba(229, 244, 92, 0.877);
--user-follow-bg: #fff59c;
--user-bg: rgb(255, 145, 0);
--user-live-bg: rgb(127, 161, 5);
}
body {
@@ -246,4 +314,4 @@ button:focus-visible {
button {
background-color: #f9f9f9;
}
} */
} */

57
frontend/src/pages/UserPage.tsx
View File

@@ -118,7 +118,7 @@ const UserPage: React.FC = () => {
<div className="flex justify-evenly justify-self-center items-center h-full px-4 py-8 max-w-[80vw] w-full">
<div className="grid grid-cols-4 grid-rows-[0.1fr_1.5fr] w-full gap-8">
<div className="grid grid-cols-4 grid-rows-[0.1fr_4fr] w-full gap-8">
{/* Profile Section - TOP */}
@@ -128,11 +128,11 @@ const UserPage: React.FC = () => {
relative flex flex-col items-center">
{/* Border Overlay (Always on Top) */}
<div className="absolute left-[0.5px] inset-0 border-[5px] border-[var(--user-borderBg)] rounded-[20px] z-20"></div>
<div className="absolute left-[0px] inset-0 border-[5px] border-[var(--user-borderBg)] rounded-[20px] z-20"></div>
{/* Background Box */}
<div className="absolute flex top-0 left-[0.5px] w-[99.8%] h-[5vh] min-h-[1em] max-h-[10em] rounded-t-[25.5px]
<div className="absolute flex top-0 left-[0.55px] w-[99.9%] h-[5vh] min-h-[1em] max-h-[10em] rounded-t-[25.5px]
bg-[var(--user-box)] z-10 flex-shrink justify-center"
style={{ boxShadow: 'var(--user-box-shadow)' }}
>
@@ -152,7 +152,7 @@ const UserPage: React.FC = () => {
</div>
{/* Username - Now Directly Below PFP */}
<h1 className="text-[1.5em] sm:text-[2em] font-bold -mt-[45px] sm:-mt-[90px] text-center">
<h1 className="text-[var(--user-name)] text-[1.5em] sm:text-[2em] font-bold -mt-[45px] sm:-mt-[90px] text-center">
{profileData.username}
</h1>
@@ -206,7 +206,6 @@ const UserPage: React.FC = () => {
{/* User Type (e.g., "USER") */}
<small className="text-green-400">{userPageVariant.toUpperCase()}</small>
Bio Section
<div className="mt-6 text-center">
<h2 className="text-xl font-semibold mb-3">About {profileData.username}</h2>
<p className="text-gray-300 whitespace-pre-wrap">{profileData.bio}</p>
@@ -220,8 +219,7 @@ const UserPage: React.FC = () => {
>
{userPageVariant === "streamer" && (
<>
{/* ↓↓ Current Stream ↓↓ */}
{profileData.isLive && (
{profileData.isLive ? (
<div className="mb-8">
<h2 className="text-2xl bg-[#ff0000] border py-4 px-12 font-black mb-4 rounded-[4rem]">
Currently Live!
@@ -238,7 +236,10 @@ const UserPage: React.FC = () => {
}}
/>
</div>
) : (
<h1>Currently not live</h1>
)}
{/* ↓↓ VODS ↓↓ */}
<div>
<h2 className="text-2xl font-bold mb-4">Past Broadcasts</h2>
@@ -248,22 +249,54 @@ const UserPage: React.FC = () => {
</div>
</>
)}
{userPageVariant === "user" && (
<>
{/* ↓↓ VODS ↓↓ */}
<div>
<h2 className="text-2xl font-bold mb-4">Past Broadcasts</h2>
<div className="text-gray-400 rounded-none">
No past broadcasts found
</div>
</div>
</>
)}
</div>
<div
id="mini"
className="bg-[var(--user-sideBox)] col-span-1 bg-gray-800 rounded-lg text-center items-center justify-center
className="bg-[var(--user-sideBox)] col-span-1 rounded-lg text-center items-center justify-center
flex flex-col flex-grow gap-4 p-[2rem]"
>
<div
className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300
flex items-center justify-center w-full p-4"
className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300
flex items-center justify-center w-full p-4 content-start"
onMouseEnter={(e) => e.currentTarget.style.boxShadow = "var(--follow-shadow)"}
onMouseLeave={(e) => e.currentTarget.style.boxShadow = "none"}
>
<p className="text-[var(--follow-text)] whitespace-pre-wrap">Following www</p>
<li className="text-[var(--follow-text)] whitespace-pre-wrap">Following</li>
</div>
<div
className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300
flex items-center justify-center w-full p-4 content-start"
onMouseEnter={(e) => e.currentTarget.style.boxShadow = "var(--follow-shadow)"}
onMouseLeave={(e) => e.currentTarget.style.boxShadow = "none"}
>
<li className="text-[var(--follow-text)] whitespace-pre-wrap">Streamers</li>
</div>
<div
className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300
flex items-center justify-center w-full p-4 content-start"
onMouseEnter={(e) => e.currentTarget.style.boxShadow = "var(--follow-shadow)"}
onMouseLeave={(e) => e.currentTarget.style.boxShadow = "none"}
>
<li className="text-[var(--follow-text)] whitespace-pre-wrap">Category</li>
</div>
</div>