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

REFACTOR: Improve Sidebar style and enforce its uniqueness across pages;

Browse Source 
REFACTOR: General improvement of style across frontend;
This commit is contained in:
Chris-1010
2025-02-24 02:07:13 +00:00
parent 38a74e0710
commit 5f13534c7a
13 changed files with 244 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/index.html
View File

@@ -1,5 +1,5 @@
<!doctype html>
<html lang="en" class="min-w-[650px]">
<html lang="en" class="min-w-[850px]">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
@@ -7,7 +7,7 @@
<title>Team Software Project</title>
</head>
<body>
<div id="root" class="min-h-screen h-full min-w-[650px] bg-gradient-to-tr from-[#2043ba] via-[#0026a6] to-[#63007a] overflow-x-hidden"></div>
<div id="root" class="h-screen min-w-[850px] bg-gradient-to-tr from-[#2043ba] via-[#0026a6] to-[#63007a] overflow-x-hidden"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

4
frontend/src/App.tsx
View File

@@ -10,10 +10,11 @@ import ResetPasswordPage from "./pages/ResetPasswordPage";
import CategoryPage from "./pages/CategoryPage";
import CategoriesPage from "./pages/AllCategoriesPage";
import ResultsPage from "./pages/ResultsPage";
import { SidebarProvider } from "./context/SidebarContext";
import { SidebarProvider, useSidebar } from "./context/SidebarContext";
import { QuickSettingsProvider } from "./context/QuickSettingsContext";
import StreamDashboardPage from "./pages/StreamDashboardPage";
import { Brightness } from "./context/BrightnessContext";
import Sidebar from "./components/Navigation/Sidebar";
function App() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -58,6 +59,7 @@ function App() {
<SidebarProvider>
<QuickSettingsProvider>
<BrowserRouter>
{isLoggedIn && window.innerWidth > 900 && <Sidebar />}
<Routes>
<Route
path="/"

10
frontend/src/components/Layout/DynamicPageContent.tsx
View File

@@ -2,9 +2,9 @@ import React from "react";
import Navbar from "../Navigation/Navbar";
import { useSidebar } from "../../context/SidebarContext";
interface DynamicPageContentProps {
interface DynamicPageContentProps extends React.HTMLProps<HTMLDivElement> {
children: React.ReactNode;
navbarVariant?: "home" | "default";
navbarVariant?: "home" | "no-navbar" | "default";
className?: string;
style?: React.CSSProperties;
}
@@ -19,12 +19,12 @@ const DynamicPageContent: React.FC<DynamicPageContentProps> = ({
return (
<div className={className} style={style}>
<Navbar variant={navbarVariant} />
{navbarVariant !== "no-navbar" && <Navbar variant={navbarVariant} />}
<div
id="content"
className={`${
className={`min-w-[850px] ${
showSideBar ? "w-[85vw] translate-x-[15vw]" : "w-[100vw]"
} transition-all duration-[500ms] ease-in-out`}
} items-start transition-all duration-[500ms] ease-in-out`}
>
{children}
</div>

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

@@ -89,7 +89,7 @@ const ListRow = forwardRef<
return (
<div
className={`${extraClasses} flex w-full rounded-[1.5rem] text-white transition-all ${
className={`${extraClasses} flex w-full relative rounded-[1.5rem] text-white transition-all ${
variant === "search"
? "items-center"
: "flex-col space-y-4 py-6 px-5 mx-2 mt-5"

2
frontend/src/components/Layout/Logo.tsx
View File

@@ -21,7 +21,7 @@ const Logo: React.FC<LogoProps> = ({
<h6 className="text-sm bg-gradient-to-br from-blue-400 via-green-500 to-indigo-500 font-black text-transparent bg-clip-text">
Go on, have a...
</h6>
<div className="flex w-fit min-w-[30vw] bg-logo bg-clip-text animate-moving_text_colour bg-[length:300%_300%] justify-center leading-none transition-all">
<div className="flex w-fit min-w-[calc(12vw+6rem)] bg-logo bg-clip-text animate-moving_text_colour bg-[length:300%_300%] justify-center leading-none transition-all">
<span className={gradient}>G</span>
<span className={gradient}>A</span>
<span className={gradient}>N</span>

50
frontend/src/components/Navigation/Navbar.tsx
View File

@@ -1,8 +1,6 @@
import React, { useEffect } from "react";
import Logo from "../Layout/Logo";
import Button, { ToggleButton } from "../Input/Button";
import Sidebar from "./Sidebar";
import { Sidebar as SidebarIcon } from "lucide-react";
import {
LogIn as LogInIcon,
LogOut as LogOutIcon,
@@ -24,7 +22,7 @@ interface NavbarProps {
const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
const { isLoggedIn } = useAuth();
const { showAuthModal, setShowAuthModal } = useAuthModal();
const { showSideBar, setShowSideBar } = useSidebar();
const { showSideBar } = useSidebar();
const { showQuickSettings, setShowQuickSettings } = useQuickSettings();
const handleLogout = () => {
@@ -41,23 +39,11 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
setShowQuickSettings(!showQuickSettings);
};
const handleSideBar = () => {
setShowSideBar(!showSideBar);
};
// Keyboard shortcut to toggle sidebar
useEffect(() => {
const handleKeyPress = (e: KeyboardEvent) => {
if (
e.key === "s" &&
document.activeElement == document.body &&
isLoggedIn
) {
handleSideBar();
}
if (e.key === "q" && document.activeElement == document.body) {
if (e.key === "q" && document.activeElement == document.body)
handleQuickSettings();
}
};
document.addEventListener("keydown", handleKeyPress);
@@ -65,12 +51,12 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
return () => {
document.removeEventListener("keydown", handleKeyPress);
};
}, [showSideBar, showQuickSettings, setShowSideBar, isLoggedIn]);
}, [showQuickSettings]);
return (
<div
id="navbar"
className={`flex justify-center items-center w-full ${
className={`flex justify-evenly items-center mx-[15vw] ${
variant === "home"
? "h-[45vh] flex-col"
: "h-[15vh] col-span-2 flex-row"
@@ -84,7 +70,7 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
showSideBar
? "left-[16vw] duration-[0.5s]"
: "left-[20px] duration-[1s]"
} text-[1rem] flex items-center flex-nowrap`}
} text-[1rem] flex items-center flex-nowrap z-[99]`}
onClick={() => (isLoggedIn ? handleLogout() : setShowAuthModal(true))}
>
{isLoggedIn ? (
@@ -100,30 +86,6 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
)}
</Button>
{/* Sidebar */}
{isLoggedIn && (
<>
<ToggleButton
onClick={() => handleSideBar()}
extraClasses={`absolute group text-[1rem] top-[9vh] ${
showSideBar
? "left-[16vw] duration-[0.5s]"
: "left-[20px] duration-[1s]"
} ease-in-out cursor-pointer`}
toggled={showSideBar}
>
<SidebarIcon className="top-[0.20em] left-[10em] z-[90]" />
{showSideBar && (
<small className="absolute flex items-center top-0 ml-4 left-0 h-full w-full my-auto group-hover:left-full opacity-0 group-hover:opacity-100 text-white transition-all delay-200">
Press S
</small>
)}
</ToggleButton>
<Sidebar />
</>
)}
{/* Quick Settings Sidebar */}
<ToggleButton
extraClasses={`absolute group text-[1rem] top-[2vh] ${
@@ -132,7 +94,7 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
onClick={() => handleQuickSettings()}
toggled={showQuickSettings}
>
<SettingsIcon className="h-15 w-15" />
<SettingsIcon className="h-[2vw] w-[2vw]" />
{showQuickSettings && (
<small className="absolute flex items-center top-0 mr-4 right-0 h-full w-full my-auto group-hover:right-full opacity-0 group-hover:opacity-100 text-white transition-all delay-200">

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

@@ -1,7 +1,9 @@
import React, { useState, useEffect } from "react";
import { useSidebar } from "../../context/SidebarContext";
import React, { useEffect, useRef, useState } from "react";
import { Sidebar as SidebarIcon } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { useAuth } from "../../context/AuthContext";
import { useSidebar } from "../../context/SidebarContext";
import { ToggleButton } from "../Input/Button";
interface Streamer {
user_id: number;
@@ -17,8 +19,8 @@ interface SideBarProps {
extraClasses?: string;
}
const Sidebar: React.FC<SideBarProps> = ({ extraClasses }) => {
const { showSideBar } = useSidebar();
const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
const { showSideBar, setShowSideBar } = useSidebar();
const navigate = useNavigate();
const { username, isLoggedIn } = useAuth();
const [followedStreamers, setFollowedStreamers] = useState<Streamer[]>([]);
@@ -42,6 +44,28 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses }) => {
fetchFollowedStreamers();
}, [isLoggedIn]);
const handleSideBar = () => {
setShowSideBar(!showSideBar);
};
// Keyboard shortcut to toggle sidebar
useEffect(() => {
const handleKeyPress = (e: KeyboardEvent) => {
if (
e.key === "s" &&
document.activeElement == document.body &&
isLoggedIn
)
handleSideBar();
};
document.addEventListener("keydown", handleKeyPress);
return () => {
document.removeEventListener("keydown", handleKeyPress);
};
}, [showSideBar, setShowSideBar, isLoggedIn]);
// Fetch followed categories
useEffect(() => {
if (!isLoggedIn) return;
@@ -62,84 +86,113 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses }) => {
}, [isLoggedIn]);
return (
<div
id="sidebar"
className={`fixed top-0 left-0 w-[15vw] h-screen flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide
<>
<ToggleButton
onClick={() => handleSideBar()}
extraClasses={`absolute group text-[1rem] top-[9vh] ${
showSideBar
? "left-[16vw] duration-[0.5s]"
: "left-[20px] duration-[1s]"
} ease-in-out cursor-pointer z-[50]`}
toggled={showSideBar}
>
<SidebarIcon className="h-[2vw] w-[2vw]" />
{showSideBar && (
<small className="absolute flex items-center top-0 ml-4 left-0 h-full w-full my-auto group-hover:left-full opacity-0 group-hover:opacity-100 text-white transition-all delay-200">
Press S
</small>
)}
</ToggleButton>
<div
id="sidebar"
className={`fixed top-0 left-0 w-[15vw] h-screen overflow-x-hidden flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide
transition-all duration-500 ease-in-out ${
showSideBar ? "translate-x-0" : "-translate-x-full"
} ${extraClasses}`}
>
{/* Profile Info */}
<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"
className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer"
onClick={() => navigate(`/user/${username}`)}
/>
<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>
<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-[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="border-b-4 border-t-4 text-2xl cursor-default">
Streamers
</h2>
<ul className="mt-2 space-y-2">
{followedStreamers.map((streamer) => (
<li
key={`streamer-${streamer.user_id}`}
className="cursor-pointer bg-black py-2 rounded-lg text-white hover:text-purple-500 transition-colors"
onClick={() => navigate(`/user/${streamer.username}`)}
>
{streamer.username}
</li>
))}
</ul>
{/* Profile Info */}
<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"
className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer"
onClick={() => navigate(`/user/${username}`)}
/>
<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>
<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="categories-followed" className="flex-grow">
<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
key={category.category_id}
className="cursor-pointer bg-black py-2 rounded-lg text-white hover:text-purple-500 transition-colors"
onClick={() => navigate(`/category/${category.category_name}`)}
>
{category.category_name}
</li>
))}
</ul>
<div
id="following"
className="flex flex-col flex-grow justify-evenly p-4 gap-4"
>
<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-[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">
Streamers
</h2>
<div className="flex flex-col flex-grow justify-evenly w-full">
{followedStreamers.map((streamer: any) => (
<button
key={`streamer-${streamer.username}`}
className="cursor-pointer bg-black w-full py-2 border border-[--text-color] rounded-lg text-white hover:text-purple-500 transition-colors"
onClick={() => navigate(`/user/${streamer.username}`)}
>
{streamer.username}
</button>
))}
</div>
</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>
<div className="flex flex-col flex-grow justify-evenly w-full">
{followedCategories.map((category: any) => (
<button
key={`category-${category.category_name}`}
className="cursor-pointer bg-black w-full py-2 border border-[--text-color] rounded-lg text-white hover:text-purple-500 transition-colors"
onClick={() =>
navigate(`/category/${category.category_name}`)
}
>
{category.category_name}
</button>
))}
</div>
</div>
</div>
</div>
</div>
</>
);
};

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

@@ -11,7 +11,7 @@ interface VideoPlayerProps {
const VideoPlayer: React.FC<VideoPlayerProps> = ({
streamer,
extraClasses,
extraClasses = "",
onStreamDetected,
}) => {
const { streamerName: urlStreamerName } = useParams<{

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

@@ -92,10 +92,7 @@ const AllCategoriesPage: React.FC = () => {
};
return (
<DynamicPageContent
className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000]"
style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
>
<DynamicPageContent className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000] bg-[url(/images/background-pattern.svg)]">
<ListRow
ref={listRowRef}
type="category"

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

@@ -82,8 +82,7 @@ const CategoryPage: React.FC = () => {
const newCategories = await fetchCategoryStreams();
if (newCategories && newCategories.length > 0) {
listRowRef.current.addMoreItems(newCategories);
}
else console.log("No more data to fetch");
} else console.log("No more data to fetch");
}
};
@@ -102,10 +101,7 @@ const CategoryPage: React.FC = () => {
}
return (
<DynamicPageContent
className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000]"
style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
>
<DynamicPageContent className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000] bg-[url(/images/background-pattern.svg)]">
<div className="pt-8">
<ListRow
type="stream"

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

@@ -29,8 +29,7 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
return (
<DynamicPageContent
navbarVariant="home"
className="h-full min-h-screen animate-moving_bg"
style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
className="h-full min-h-screen bg-[url(/images/background-pattern.svg)] animate-moving_bg"
>
<ListRow
type="stream"

182
frontend/src/pages/ResultsPage.tsx
View File

@@ -3,7 +3,7 @@ import { useLocation, useNavigate } from "react-router-dom";
import Button from "../components/Input/Button";
import SearchBar from "../components/Input/SearchBar";
import ListRow from "../components/Layout/ListRow";
import Logo from "../components/Layout/Logo";
import DynamicPageContent from "../components/Layout/DynamicPageContent";
const ResultsPage: React.FC = ({}) => {
const [overflow, setOverflow] = useState(false);
@@ -33,7 +33,11 @@ const ResultsPage: React.FC = ({}) => {
searchResults.streams.length === 0
) {
return (
<div className="flex flex-col items-center justify-evenly min-h-[70vh] my-[15vh] p-4">
<DynamicPageContent
id="results-page"
navbarVariant="no-navbar"
className="flex flex-col items-center justify-evenly min-h-[70vh] my-[15vh] p-4"
>
<h1 className="text-3xl font-bold mb-4">
Search results for "{query}"
</h1>
@@ -42,103 +46,103 @@ const ResultsPage: React.FC = ({}) => {
<div className="flex gap-8">
<Button onClick={() => navigate(-1)}>Go Back</Button>
</div>
</div>
</DynamicPageContent>
);
}
return (
<div
id="results-page"
className="flex flex-col items-center justify-evenly min-h-[96vh] p-4"
>
<Logo extraClasses="absolute top-[5vh] left-0" />
<h1 className="text-3xl font-bold mb-4">Search results for "{query}"</h1>
<SearchBar value={query} />
<DynamicPageContent id="results-page" navbarVariant="no-navbar">
<div className="flex flex-col items-center justify-evenly min-h-[96vh] p-4">
<h1 className="text-3xl font-bold mb-4">
Search results for "{query}"
</h1>
<SearchBar value={query} />
<div id="results" className="flex flex-col flex-grow w-full">
{searchResults.streams.length > 0 && (
<ListRow
variant="search"
type="stream"
items={searchResults.streams.map((stream: any) => ({
id: stream.user_id,
type: "stream",
title: stream.title,
username: stream.username,
streamCategory: stream.category_name,
viewers: stream.num_viewers,
thumbnail: stream.thumbnail_url,
}))}
title="Streams"
onItemClick={(streamer_name: string) =>
(window.location.href = `/${streamer_name}`)
}
itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
amountForScroll={3}
/>
)}
<div id="results" className="flex flex-col flex-grow w-full">
{searchResults.streams.length > 0 && (
<ListRow
variant="search"
type="stream"
items={searchResults.streams.map((stream: any) => ({
id: stream.user_id,
type: "stream",
title: stream.title,
username: stream.username,
streamCategory: stream.category_name,
viewers: stream.num_viewers,
thumbnail: stream.thumbnail_url,
}))}
title="Streams"
onItemClick={(streamer_name: string) =>
(window.location.href = `/${streamer_name}`)
}
itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
amountForScroll={3}
/>
)}
{searchResults.categories.length > 0 && (
<ListRow
variant="search"
type="category"
items={searchResults.categories.map((category: any) => ({
id: category.category_id,
type: "category",
title: category.category_name,
viewers: 0,
thumbnail: `/images/category_thumbnails/${category.category_name
.toLowerCase()
.replace(/ /g, "_")}.webp`,
}))}
title="Categories"
onItemClick={(category_name: string) =>
navigate(`/category/${category_name}`)
}
titleClickable={true}
itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
amountForScroll={3}
/>
)}
{searchResults.categories.length > 0 && (
<ListRow
variant="search"
type="category"
items={searchResults.categories.map((category: any) => ({
id: category.category_id,
type: "category",
title: category.category_name,
viewers: 0,
thumbnail: `/images/category_thumbnails/${category.category_name
.toLowerCase()
.replace(/ /g, "_")}.webp`,
}))}
title="Categories"
onItemClick={(category_name: string) =>
navigate(`/category/${category_name}`)
}
titleClickable={true}
itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
amountForScroll={3}
/>
)}
{searchResults.users.length > 0 && (
<ListRow
variant="search"
type="user"
items={searchResults.users.map((user: any) => ({
id: user.user_id,
type: "user",
title: `${user.is_live ? "🔴" : ""} ${user.username}`,
viewers: 0,
username: user.username,
thumbnail: user.profile_picture,
}))}
title="Users"
onItemClick={(username: string) =>
(window.location.href = `/user/${username}`)
}
amountForScroll={3}
itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
/>
)}
</div>
{searchResults.users.length > 0 && (
<ListRow
variant="search"
type="user"
items={searchResults.users.map((user: any) => ({
id: user.user_id,
type: "user",
title: `${user.is_live ? "🔴" : ""} ${user.username}`,
viewers: 0,
username: user.username,
thumbnail: user.profile_picture,
}))}
title="Users"
onItemClick={(username: string) =>
(window.location.href = `/user/${username}`)
}
amountForScroll={3}
itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
/>
)}
</div>
<div
className={`${
overflow && "absolute top-[5vh] right-[2vw]"
} flex gap-[2vw]`}
>
<Button
extraClasses="text-[2vw]"
onClick={() => (window.location.href = "/")}
<div
className={`${
overflow && "absolute top-[5vh] right-[2vw]"
} flex gap-[2vw]`}
>
Go Home
</Button>
<Button extraClasses="text-[2vw]" onClick={() => navigate(-1)}>
Go Back
</Button>
<Button
extraClasses="text-[2vw]"
onClick={() => (window.location.href = "/")}
>
Go Home
</Button>
<Button extraClasses="text-[2vw]" onClick={() => navigate(-1)}>
Go Back
</Button>
</div>
</div>
</div>
</DynamicPageContent>
);
};

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

@@ -142,7 +142,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
<ToggleButton
onClick={toggleChat}
toggled={isChatOpen}
extraClasses="group cursor-pointer absolute top-[70px] right-[20px] text-[1rem] flex items-center flex-nowrap"
extraClasses="group cursor-pointer absolute top-[70px] right-[20px] text-[1rem] flex items-center flex-nowrap z-[50]"
>
{isChatOpen ? "Hide Chat" : "Show Chat"}