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

UPDATE: Updated styling for quality of life improvements

Browse Source
This commit is contained in:
JustIceO7
2025-03-04 22:26:37 +00:00
parent 43232bac4b
commit dd0a557612
7 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/components/Layout/ListItem.tsx
View File

@@ -91,6 +91,7 @@ const UserListItem: React.FC<UserListItemProps> = ({ title, username, isLive, on
}}
alt={`user ${username}`}
className="rounded-xl border-[0.15em] border-[var(--bg-color)] cursor-pointer"
style={{ backgroundColor: 'white' }}
/>
<button className="text-[calc((2vw+2vh)/2)] font-bold hover:underline w-full py-2">{title}</button>

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

@@ -99,6 +99,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
alt="profile picture"
className="w-[3em] h-[3em] object-cover rounded-full border-[0.15em] border-purple-500 cursor-pointer"
onClick={() => navigate(`/user/${username}`)}
style={{ backgroundColor: 'white' }}
/>
<div className="text-center flex flex-col items-center justify-center">
<h5 className="font-thin text-[0.85rem] cursor-default text-[var(--sideBar-profile-text)]">Logged in as</h5>
@@ -117,7 +118,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
<h1 className="text-[2vw] font-bold text-2xl p-[0.75rem] cursor-default">Following</h1>
</div>
<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 mb-5">Streamers</h2>
<h2 className="border-b-2 border-t-2 w-[125%] text-2xl cursor-default mb-5">Streamers</h2>
<div className="flex flex-col flex-grow justify-evenly w-full">
{followedStreamers.map((streamer) => (
<div
@@ -139,7 +140,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
</div>
<div id="categories-followed" className="flex flex-col flex-grow items-center">
<h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">Categories</h2>
<h2 className="border-b-2 border-t-2 w-[125%] text-2xl cursor-default">Categories</h2>
{/* Followed Categories */}
<div id="categories-followed" className="grid grid-cols-1 gap-4 p-4 w-full">

2
frontend/src/components/Stream/ChatPanel.tsx
View File

@@ -205,7 +205,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId, onViewerCountChange })
}}
alt="User Avatar"
className="w-full h-full object-cover"
style={{ width: "2.5em", height: "2.5em" }}
style={{ width: "2.5em", height: "2.5em", backgroundColor: 'white' }}
/>
</div>

1
frontend/src/pages/Following.tsx
View File

@@ -152,7 +152,6 @@ const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => {
)};
</div>
</div>
<Footer />
</DynamicPageContent >
);
};

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

@@ -161,6 +161,7 @@ const UserPage: React.FC = () => {
}}
alt={`${profileData.username}'s profile`}
className="sm:w-full h-full object-cover rounded-full group-hover:brightness-50 relative z-0 transition-all"
style={{ backgroundColor: 'white' }}
/>
{/* If current user is the profile user then allow profile picture swap */}
@@ -268,30 +269,34 @@ const UserPage: React.FC = () => {
>
<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"
flex items-center justify-center w-full p-4 content-start cursor-pointer"
onClick={() => handleNavigation(`/user/${username}/following?tab=streamers`)}
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
>
<button className="text-[var(--follow-text)] whitespace-pre-wrap" onClick={() => handleNavigation(`/user/${username}/following?tab=streamers`)}>
<button className="text-[var(--follow-text)] whitespace-pre-wrap pointer-events-none">
Following
</button>
</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"
flex items-center justify-center w-full p-4 content-start cursor-pointer"
onClick={() => handleNavigation(`/user/${username}/vods`)}
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
>
<button onClick={() => handleNavigation(`/user/${username}/vods`)}>Categories</button>
<button className="pointer-events-none">Vods</button>
</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"
flex items-center justify-center w-full p-4 content-start cursor-pointer"
onClick={() => handleNavigation(`/user/${username}/following?tab=categories`)}
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
>
<button onClick={() => handleNavigation(`/user/${username}/following?tab=categories`)}>Categories</button>
<div className="w-full h-full flex items-center justify-center">
<button className="w-full h-full">Categories</button>
</div>
</div>
</div>
</div>

1
frontend/src/pages/VideoPage.tsx
View File

@@ -159,6 +159,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
alt="streamer"
className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer"
onClick={() => navigate(`/user/${streamerName}`)}
style={{ backgroundColor: 'white' }}
/>
<button className="text-white font-bold hover:underline mt-[0.5em]" onClick={() => navigate(`/user/${streamerName}`)}>
{streamerName}

1
frontend/src/pages/Vods.tsx
View File

@@ -104,7 +104,6 @@ const Vods: React.FC = () => {
</div>
</div>
</div>
<Footer />
</DynamicPageContent>
);
};