Update: List Row Dynamic Theme
This commit is contained in:
@@ -31,17 +31,24 @@ body[data-theme="light"] {
|
|||||||
--bg-color: white;
|
--bg-color: white;
|
||||||
--text-color: black;
|
--text-color: black;
|
||||||
|
|
||||||
--sideBar-bg: white;
|
--sideBar-bg: rgb(255, 255, 255);
|
||||||
--sideBar-text: black;
|
--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);
|
--liveNow: rgba(46, 16, 16, 0.6);
|
||||||
--recommend: rgba(5, 46, 22, 0.6);
|
--recommend: rgba(5, 46, 22, 0.6);
|
||||||
|
|
||||||
--quickBar-title: rgba(21, 21, 21, 1);
|
--quickBar-title: #ffffff;
|
||||||
--quickBar-title-bg: rgb(255, 255, 255);
|
--quickBar-title-bg: rgb(132, 0, 255);
|
||||||
--quickBar-bg: #ffffff;
|
--quickBar-bg: #ffffff;
|
||||||
--quickBar-text: #000000;
|
--quickBar-text: #000000;
|
||||||
--quickBar-border: #000000;
|
--quickBar-border: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
body[data-theme="dark"] {
|
body[data-theme="dark"] {
|
||||||
@@ -50,6 +57,17 @@ body[data-theme="dark"] {
|
|||||||
|
|
||||||
--sideBar-bg: black;
|
--sideBar-bg: black;
|
||||||
--sideBar-text: white;
|
--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: rgb(255, 255, 255);
|
||||||
--quickBar-title-bg: rgb(0, 0, 0);
|
--quickBar-title-bg: rgb(0, 0, 0);
|
||||||
@@ -62,8 +80,18 @@ body[data-theme="blue"] {
|
|||||||
--bg-color: #e0f7fa;
|
--bg-color: #e0f7fa;
|
||||||
--text-color: #00539b;
|
--text-color: #00539b;
|
||||||
|
|
||||||
--sideBar-bg: #ADD8E6;
|
--sideBar-bg: #eefafffb;
|
||||||
--sideBar-text: #002147;
|
--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: #ffffff;
|
||||||
--quickBar-title-bg: #003571;
|
--quickBar-title-bg: #003571;
|
||||||
@@ -76,9 +104,20 @@ body[data-theme="green"] {
|
|||||||
--bg-color: #e8f5e9;
|
--bg-color: #e8f5e9;
|
||||||
--text-color: #2e7d32;
|
--text-color: #2e7d32;
|
||||||
|
|
||||||
--sideBar-bg: rgb(131, 179, 154);
|
/*Sidebar*/
|
||||||
|
--sideBar-bg: #f7fff3;
|
||||||
--sideBar-text: #2e7d32;
|
--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: rgb(226, 255, 240);
|
||||||
--quickBar-title-bg: rgb(0, 78, 38);
|
--quickBar-title-bg: rgb(0, 78, 38);
|
||||||
--quickBar-bg: #e8f5e9;
|
--quickBar-bg: #e8f5e9;
|
||||||
@@ -90,8 +129,19 @@ body[data-theme="orange"] {
|
|||||||
--bg-color: #ffe0b2;
|
--bg-color: #ffe0b2;
|
||||||
--text-color: #e65100;
|
--text-color: #e65100;
|
||||||
|
|
||||||
--sideBar-bg: #ffe0b2;
|
--sideBar-bg: #fff3dc;
|
||||||
--sideBar-text: #4d3b31;
|
--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-bg: #E67E22;
|
||||||
--quickBar-title: #ffffff;
|
--quickBar-title: #ffffff;
|
||||||
@@ -108,22 +158,6 @@ body {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
:root {
|
:root {
|
||||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
|||||||
@@ -11,10 +11,6 @@
|
|||||||
--sideBar-DarkText: white;
|
--sideBar-DarkText: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.style {
|
|
||||||
font-size: 2em;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.category-style {
|
.category-style {
|
||||||
font-size: 1.75em;
|
font-size: 1.75em;
|
||||||
|
|||||||
@@ -15,7 +15,6 @@ interface ListRowProps {
|
|||||||
onClick: (itemName: string) => void;
|
onClick: (itemName: string) => void;
|
||||||
extraClasses?: string;
|
extraClasses?: string;
|
||||||
children?: React.ReactNode;
|
children?: React.ReactNode;
|
||||||
style?: React.CSSProperties;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Row of entries
|
// Row of entries
|
||||||
@@ -27,7 +26,6 @@ const ListRow: React.FC<ListRowProps> = ({
|
|||||||
onClick,
|
onClick,
|
||||||
extraClasses = "",
|
extraClasses = "",
|
||||||
children,
|
children,
|
||||||
style,
|
|
||||||
}) => {
|
}) => {
|
||||||
const slider = useRef<HTMLDivElement>(null);
|
const slider = useRef<HTMLDivElement>(null);
|
||||||
const scrollAmount = window.innerWidth * 0.3;
|
const scrollAmount = window.innerWidth * 0.3;
|
||||||
@@ -46,8 +44,7 @@ const ListRow: React.FC<ListRowProps> = ({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<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}`}
|
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}`}
|
||||||
style={style}
|
|
||||||
>
|
>
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<h2 className="text-2xl font-bold">{title}</h2>
|
<h2 className="text-2xl font-bold">{title}</h2>
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import "../../assets/styles/sidebar.css";
|
|
||||||
import { useSidebar } from "../../context/SidebarContext";
|
import { useSidebar } from "../../context/SidebarContext";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { useAuth } from "../../context/AuthContext";
|
import { useAuth } from "../../context/AuthContext";
|
||||||
@@ -71,7 +70,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses }) => {
|
|||||||
} ${extraClasses}`}
|
} ${extraClasses}`}
|
||||||
>
|
>
|
||||||
{/* Profile Info */}
|
{/* 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
|
<img
|
||||||
src="/images/monkey.png"
|
src="/images/monkey.png"
|
||||||
alt="profile picture"
|
alt="profile picture"
|
||||||
@@ -79,20 +78,29 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses }) => {
|
|||||||
onClick={() => navigate(`/user/${username}`)}
|
onClick={() => navigate(`/user/${username}`)}
|
||||||
/>
|
/>
|
||||||
<div className="text-center flex flex-col items-center justify-center">
|
<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
|
<button
|
||||||
className="font-black text-[1.4rem] hover:underline"
|
className="font-black text-[1.4rem] hover:underline"
|
||||||
onClick={() => navigate(`/user/${username}`)}
|
onClick={() => navigate(`/user/${username}`)}
|
||||||
>
|
>
|
||||||
|
<div className="text-[var(--sideBar-profile-text)]">
|
||||||
{username}
|
{username}
|
||||||
|
</div>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="following" className="flex flex-col flex-grow justify-evenly gap-4 p-4">
|
<div id="following" className="flex flex-col flex-grow justify-evenly gap-4 p-[1rem]">
|
||||||
<h1 className="style border cursor-default">Following</h1>
|
<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">
|
<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">
|
<ul className="mt-2 space-y-2">
|
||||||
{followedStreamers.map((streamer) => (
|
{followedStreamers.map((streamer) => (
|
||||||
<li
|
<li
|
||||||
@@ -107,7 +115,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="categories-followed" className="flex-grow">
|
<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">
|
<ul className="mt-2 space-y-2">
|
||||||
{followedCategories.map((category) => (
|
{followedCategories.map((category) => (
|
||||||
<li
|
<li
|
||||||
|
|||||||
@@ -61,7 +61,10 @@ const AllCategoriesPage: React.FC = () => {
|
|||||||
items={categories}
|
items={categories}
|
||||||
onClick={handleCategoryClick}
|
onClick={handleCategoryClick}
|
||||||
extraClasses="text-center"
|
extraClasses="text-center"
|
||||||
|
extraClasses="bg-[var(--recommend)]"
|
||||||
|
|
||||||
wrap={true}
|
wrap={true}
|
||||||
|
|
||||||
/>
|
/>
|
||||||
</DynamicPageContent>
|
</DynamicPageContent>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -78,7 +78,7 @@ const CategoryPage: React.FC = () => {
|
|||||||
items={streams}
|
items={streams}
|
||||||
wrap={true}
|
wrap={true}
|
||||||
onClick={handleStreamClick}
|
onClick={handleStreamClick}
|
||||||
extraClasses="bg-purple-950/60"
|
extraClasses="bg-[var(--recommend)]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -242,6 +242,8 @@ const UserPage: React.FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
|
{showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
|
||||||
|
|
||||||
|
|
||||||
</DynamicPageContent>
|
</DynamicPageContent>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user