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

REFACTOR: General improvement of style across frontend;

frontend/src/pages/AllCategoriesPage.tsx

@@ -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"

frontend/src/pages/CategoryPage.tsx

@@ -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"

frontend/src/pages/HomePage.tsx

@@ -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"

frontend/src/pages/ResultsPage.tsx

@@ -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>
   );
 };
 

frontend/src/pages/VideoPage.tsx

@@ -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"}