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

ADD: Pfp in Following on Sidebar

Browse Source 
added styling for streamer box
This commit is contained in:
EvanLin3141
2025-03-04 17:30:59 +00:00
parent b974ea09c5
commit 552a379baa
2 changed files with 154 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -45,6 +45,9 @@ body[data-theme="light"] {
--follow-bg: #aa00ff; --follow-bg: #aa00ff;
--follow-text: white; --follow-text: white;
--follow-shadow: 0px 0px 15px rgba(94, 94, 94, 0.754); --follow-shadow: 0px 0px 15px rgba(94, 94, 94, 0.754);
--streamer-box: #aa00ff;
--streamer-text: white;
--streamer-shadow: 0px 0px 10px rgba(0, 0, 0, 0.754);
--liveNow: rgba(46, 16, 16, 0.6); --liveNow: rgba(46, 16, 16, 0.6);
--recommend: rgba(5, 46, 22, 0.6); --recommend: rgba(5, 46, 22, 0.6);
@@ -102,11 +105,14 @@ body[data-theme="dark"] {
--follow-bg: #a50000c6; --follow-bg: #a50000c6;
--follow-text: rgb(255, 255, 255); --follow-text: rgb(255, 255, 255);
--follow-shadow: 0px 0px 15px rgba(255, 255, 255, 0.966); --follow-shadow: 0px 0px 15px rgba(255, 255, 255, 0.966);
--streamer-box: #8b1711;
--streamer-text: white;
--streamer-shadow: 0px 0px 25px rgb(255, 255, 255);
--liveNow: rgba(77, 29, 29, 0.6); --liveNow: rgba(77, 29, 29, 0.6);
--recommend: rgba(4, 63, 28, 0.6); --recommend: rgba(4, 63, 28, 0.6);
--quickBar-title: rgb(255, 255, 255); --quickBar-title: rgb(255, 255, 255);
--quickBar-title-bg: rgb(0, 0, 0); --quickBar-title-bg: rgb(0, 0, 0);
--quickBar-bg: #000000d3; --quickBar-bg: #000000d3;
@@ -160,7 +166,9 @@ body[data-theme="blue"] {
--follow-bg: #ffffff; --follow-bg: #ffffff;
--follow-shadow: 0px 0px 15px rgba(161, 222, 255, 0.823); --follow-shadow: 0px 0px 15px rgba(161, 222, 255, 0.823);
--streamer-box: #00b3ff;
--streamer-text: white;
--streamer-shadow: 0px 0px 10px rgb(14, 18, 93);
--liveNow: rgba(5, 59, 103, 0.801); --liveNow: rgba(5, 59, 103, 0.801);
--recommend: rgba(112, 116, 96, 0.6); --recommend: rgba(112, 116, 96, 0.6);
@@ -221,7 +229,9 @@ body[data-theme="green"] {
--follow-bg: #b5ffb5; --follow-bg: #b5ffb5;
--follow-text: #2e7d32; --follow-text: #2e7d32;
--follow-shadow: 0px 0px 15px rgba(84, 255, 92, 0.754); --follow-shadow: 0px 0px 15px rgba(84, 255, 92, 0.754);
--streamer-box: #32b90dd4;
--streamer-text: rgb(255, 255, 255);
--streamer-shadow: 0px 0px 10px rgb(1, 112, 25);
--liveNow: rgba(14, 173, 28, 0.491); --liveNow: rgba(14, 173, 28, 0.491);
--recommend: rgba(123, 94, 14, 0.6); --recommend: rgba(123, 94, 14, 0.6);
@@ -279,7 +289,9 @@ body[data-theme="orange"] {
--follow-bg: #fdfd00af; --follow-bg: #fdfd00af;
--follow-text: #000000; --follow-text: #000000;
--follow-shadow: 0px 0px 15px rgba(0, 229, 255, 0.754); --follow-shadow: 0px 0px 15px rgba(0, 229, 255, 0.754);
--streamer-box: #ffff00;
--streamer-text: rgb(0, 0, 0);
--streamer-shadow: 0px 0px 10px rgba(195, 75, 0, 0.754);
--liveNow: #4c008285; --liveNow: #4c008285;
--recommend: #c49c2da5; --recommend: #c49c2da5;

20
frontend/src/components/Navigation/Sidebar.tsx
View File

@@ -71,8 +71,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
<> <>
<ToggleButton <ToggleButton
onClick={() => handleSideBar()} onClick={() => handleSideBar()}
extraClasses={`absolute group text-[1rem] top-[9vh] ${ extraClasses={`absolute group text-[1rem] top-[9vh] ${showSideBar ? "left-[16vw] duration-[0.5s]" : "left-[20px] duration-[1s]"
showSideBar ? "left-[16vw] duration-[0.5s]" : "left-[20px] duration-[1s]"
} ease-in-out cursor-pointer z-[50]`} } ease-in-out cursor-pointer z-[50]`}
toggled={showSideBar} toggled={showSideBar}
> >
@@ -118,16 +117,23 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
<h1 className="text-[2vw] font-bold text-2xl p-[0.75rem] cursor-default">Following</h1> <h1 className="text-[2vw] font-bold text-2xl p-[0.75rem] cursor-default">Following</h1>
</div> </div>
<div id="streamers-followed" className="flex flex-col flex-grow items-center"> <div id="streamers-followed" className="flex flex-col flex-grow items-center">
<h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">Streamers</h2> <h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default mb-5">Streamers</h2>
<div className="flex flex-col flex-grow justify-evenly w-full"> <div className="flex flex-col flex-grow justify-evenly w-full">
{followedStreamers.map((streamer) => ( {followedStreamers.map((streamer) => (
<button <div
key={`${sidebarId.current}-streamer-${streamer.username}`} key={`${sidebarId.current}-streamer-${streamer.username}`}
className="cursor-pointer bg-black w-full py-2 border border-[--text-color] rounded-lg text-white hover:text-purple-500 font-bold transition-colors" className="flex items-center gap-3 cursor-pointer bg-[var(--streamer-box)] w-full py-2 px-3 rounded-lg font-bold transition hover:scale-105 ease-in-out duration-300 "
onClick={() => navigate(`/user/${streamer.username}`)} onClick={() => navigate(`/user/${streamer.username}`)}
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--streamer-shadow)")}
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
> >
{streamer.username} <img
</button> src={`/user/${streamer.username}/profile_picture`}
alt={`${streamer.username}'s Profile`}
className="w-10 h-10 rounded-full object-cover"
/>
<div className="flex flex-1 items-center justify-center text-[var(--streamer-text)]">{streamer.username}</div>
</div>
))} ))}
</div> </div>
</div> </div>