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

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

@@ -31,17 +31,24 @@ body[data-theme="light"] {
--bg-color: white;
--text-color: black;
--sideBar-bg: white;
--sideBar-bg: rgb(255, 255, 255);
--sideBar-text: black;
--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);
--liveNow: rgba(46, 16, 16, 0.6);
--recommend: rgba(5, 46, 22, 0.6);
--quickBar-title: rgba(21, 21, 21, 1);
--quickBar-title-bg: rgb(255, 255, 255);
--quickBar-title: #ffffff;
--quickBar-title-bg: rgb(132, 0, 255);
--quickBar-bg: #ffffff;
--quickBar-text: #000000;
--quickBar-border: #000000;
--quickBar-border: #ffffff;
}
body[data-theme="dark"] {
@@ -50,6 +57,17 @@ body[data-theme="dark"] {
--sideBar-bg: black;
--sideBar-text: white;
--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);
--liveNow: rgba(77, 29, 29, 0.6);
--recommend: rgba(4, 63, 28, 0.6);
--quickBar-title: rgb(255, 255, 255);
--quickBar-title-bg: rgb(0, 0, 0);
@@ -62,8 +80,18 @@ body[data-theme="blue"] {
--bg-color: #e0f7fa;
--text-color: #00539b;
--sideBar-bg: #ADD8E6;
--sideBar-bg: #eefafffb;
--sideBar-text: #002147;
--sideBar-profile-bg: #003571;
--sideBar-profile-text: #ffffff;
--profile-border: #ffffff;
--follow-bg: #ffffff;
--follow-shadow: 0px 0px 15px rgba(161, 222, 255, 0.823);
--liveNow: rgba(5, 59, 103, 0.801);
--recommend: rgba(112, 116, 96, 0.6);
--quickBar-title: #ffffff;
--quickBar-title-bg: #003571;
@@ -76,9 +104,20 @@ body[data-theme="green"] {
--bg-color: #e8f5e9;
--text-color: #2e7d32;
--sideBar-bg: rgb(131, 179, 154);
/*Sidebar*/
--sideBar-bg: #f7fff3;
--sideBar-text: #2e7d32;
--sideBar-profile-bg: rgb(0, 78, 38);
--sideBar-profile-text: #ffffff;
--profile-border: #ffffff;
--follow-bg: #ffffff;
--follow-shadow: 0px 0px 15px rgba(84, 255, 92, 0.754);
--liveNow: rgba(69, 150, 74, 0.6);
--recommend: rgba(123, 94, 14, 0.6);
/*Quick Settings*/
--quickBar-title: rgb(226, 255, 240);
--quickBar-title-bg: rgb(0, 78, 38);
--quickBar-bg: #e8f5e9;
@@ -90,8 +129,19 @@ body[data-theme="orange"] {
--bg-color: #ffe0b2;
--text-color: #e65100;
--sideBar-bg: #ffe0b2;
--sideBar-bg: #fff3dc;
--sideBar-text: #4d3b31;
--sideBar-profile-bg: #E67E22;
--sideBar-profile-text: #ffffff;
--profile-border: #ffd900;
--follow-bg: #fdfd00af;
--follow-text: #000000;
--follow-shadow: 0px 0px 15px rgba(0, 229, 255, 0.754);
--liveNow: rgba(202, 192, 53, 0.6);
--recommend: rgba(192, 111, 18, 0.6);
--quickBar-title-bg: #E67E22;
--quickBar-title: #ffffff;
@@ -108,22 +158,6 @@ body {
/*
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;

4
frontend/src/assets/styles/sidebar.css
View File

@@ -11,10 +11,6 @@
--sideBar-DarkText: white;
}
.style {
font-size: 2em;
font-weight: bold;
}
.category-style {
font-size: 1.75em;

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

3
frontend/src/pages/AllCategoriesPage.tsx
View File

@@ -61,7 +61,10 @@ const AllCategoriesPage: React.FC = () => {
items={categories}
onClick={handleCategoryClick}
extraClasses="text-center"
extraClasses="bg-[var(--recommend)]"
wrap={true}
/>
</DynamicPageContent>
);

2
frontend/src/pages/CategoryPage.tsx
View File

@@ -78,7 +78,7 @@ const CategoryPage: React.FC = () => {
items={streams}
wrap={true}
onClick={handleStreamClick}
extraClasses="bg-purple-950/60"
extraClasses="bg-[var(--recommend)]"
/>
</div>

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

@@ -242,6 +242,8 @@ const UserPage: React.FC = () => {
</div>
</div>
{showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
</DynamicPageContent>
);
};