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

Update: List Row Dynamic Theme

Browse Source
This commit is contained in:
EvanLin3141
2025-02-18 19:51:11 +00:00
parent d4a6c2c7cd
commit b87fe7893d
7 changed files with 79 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/components/Layout/ListRow.tsx
View File

@@ -15,7 +15,6 @@ interface ListRowProps {
onClick: (itemName: string) => void;
extraClasses?: string;
children?: React.ReactNode;
style?: React.CSSProperties;
}
// Row of entries
@@ -27,7 +26,6 @@ const ListRow: React.FC<ListRowProps> = ({
onClick,
extraClasses = "",
children,
style,
}) => {
const slider = useRef<HTMLDivElement>(null);
const scrollAmount = window.innerWidth * 0.3;
@@ -46,8 +44,7 @@ const ListRow: React.FC<ListRowProps> = ({
return (
<div
className={`flex flex-col w-full space-y-4 py-6 bg-black/50 text-white px-5 mx-2 mt-5 rounded-[1.5rem] transition-all ${extraClasses}`}
style={style}
className={`flex flex-col w-full space-y-4 py-6 text-white px-5 mx-2 mt-5 rounded-[1.5rem] transition-all ${extraClasses}`}
>
<div className="space-y-1">
<h2 className="text-2xl font-bold">{title}</h2>

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

@@ -1,5 +1,4 @@
import React, { useState, useEffect } from "react";
import "../../assets/styles/sidebar.css";
import { useSidebar } from "../../context/SidebarContext";
import { useNavigate } from "react-router-dom";
import { useAuth } from "../../context/AuthContext";
@@ -71,7 +70,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses }) => {
} ${extraClasses}`}
>
{/* Profile Info */}
<div className="flex flex-row items-center justify-evenly bg-blue-700/40 py-[1em]">
<div className="flex flex-row items-center border-b-4 border-[var(--profile-border)] justify-evenly bg-[var(--sideBar-profile-bg)] py-[1em]">
<img
src="/images/monkey.png"
alt="profile picture"
@@ -79,20 +78,29 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses }) => {
onClick={() => navigate(`/user/${username}`)}
/>
<div className="text-center flex flex-col items-center justify-center">
<h5 className="font-thin text-[0.85rem] cursor-default">Logged in as</h5>
<h5 className="font-thin text-[0.85rem] cursor-default text-[var(--sideBar-profile-text)]">
Logged in as
</h5>
<button
className="font-black text-[1.4rem] hover:underline"
onClick={() => navigate(`/user/${username}`)}
>
<div className="text-[var(--sideBar-profile-text)]">
{username}
</div>
</button>
</div>
</div>
<div id="following" className="flex flex-col flex-grow justify-evenly gap-4 p-4">
<h1 className="style border cursor-default">Following</h1>
<div id="following" className="flex flex-col flex-grow justify-evenly gap-4 p-[1rem]">
<div className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300"
onMouseEnter={(e) => e.currentTarget.style.boxShadow = "var(--follow-shadow)"}
onMouseLeave={(e) => e.currentTarget.style.boxShadow = "none"}
>
<h1 className="text-[var(--follow-text)] font-bold text-2xl p-[0.75rem] cursor-default">Following</h1>
</div>
<div id="streamers-followed" className="flex-grow">
<h2 className="text-[1.5rem] cursor-default">Streamers</h2>
<h2 className="border-b-4 border-t-4 text-2xl cursor-default">Streamers</h2>
<ul className="mt-2 space-y-2">
{followedStreamers.map((streamer) => (
<li
@@ -107,7 +115,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses }) => {
</div>
<div id="categories-followed" className="flex-grow">
<h2 className="text-[1.5rem] cursor-default">Categories</h2>
<h2 className="border-b-4 border-t-4 text-[1.5rem] cursor-default">Categories</h2>
<ul className="mt-2 space-y-2">
{followedCategories.map((category) => (
<li