Patch: Tidy up of style code and fix to authentication logic

Feat: Added ability to access user's username through AuthContext

frontend/src/pages/HomePage.tsx

@@ -3,9 +3,12 @@ import Navbar from "../components/Layout/Navbar";
 import StreamListRow from "../components/Layout/StreamListRow";
 import { useNavigate } from "react-router-dom";
 import { useStreams } from "../context/StreamsContext";
-import Name from "../components/Layout/Name";
 
-const HomePage: React.FC = () => {
+interface HomePageProps {
+  variant?: "default" | "personalised";
+}
+
+const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
   const { featuredStreams, featuredCategories } = useStreams();
   const navigate = useNavigate();
 
@@ -17,54 +20,22 @@ const HomePage: React.FC = () => {
   return (
     <div
       id="home-page"
-      className="bg-repeat"
+      className="animate-moving_bg"
       style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
     >
       <Navbar variant="home" />
-      <Name></Name>
+
+      {/*//TODO Extract StreamListRow away, to ListRow so that it makes sense for categories to be there also */}
 
       <StreamListRow
-        title="Live Now"
-        description="Streamers that are currently live"
+        title={"Live Now" + (variant === "personalised" ? " - Recommended" : "")}
+        description={variant === "personalised" ? "We think you might like these streams - Streamers recommended for you" : "Streamers that are currently live"}
         streams={featuredStreams}
         onStreamClick={handleStreamClick}
       />
       <StreamListRow
-        title="Trending Categories"
-        description="Categories that have been 'popping off' lately"
-        streams={featuredCategories}
-        onStreamClick={() => {}} //TODO
-      />
-    </div>
-  );
-};
-
-export const PersonalisedHomePage: React.FC = () => {
-  const { featuredStreams, featuredCategories } = useStreams();
-  const navigate = useNavigate();
-
-  const handleStreamClick = (streamId: number, streamerName: string) => {
-    console.log(`Navigating to ${streamId}`);
-    navigate(`/${streamerName}`);
-  };
-
-  return (
-    <div
-      id="personalised-home-page"
-      className="bg-repeat"
-      style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
-    >
-      <Navbar variant="home" />
-      {/*//TODO Extract StreamListRow away to ListRow so that it makes sense for categories to be there also */}
-      <StreamListRow
-        title="Live Now - Recommended"
-        description="We think you might like these streams - Streamers recommended for you"
-        streams={featuredStreams}
-        onStreamClick={handleStreamClick}
-      />
-      <StreamListRow
-        title="Followed Categories"
-        description="Current streams from your followed categories"
+        title={variant === "personalised" ? "Followed Categories" : "Trending Categories"}
+        description={variant === "personalised" ? "Current streams from your followed categories" : "Categories that have been 'popping off' lately"}
         streams={featuredCategories}
         onStreamClick={() => {}} //TODO
       />