Use JoyUI instead of TailwindCSS (#101)

* MUI setup

* Use JoyUI at the project root

* Use JoyUI at the login page

* Update Navbar, remove TailwindCSS

* Improve Navbar

* Delete old components, comment out the theme switch

* Rewrite dashboard components

* Update cypress tests

* Stop component tests from running in Actions

* Transition /about to JoyUI

* Rename About

.github/workflows/frontend.yml

@@ -32,5 +32,5 @@ jobs:
         with:
           node-version: 20.5.1
       - run: npm ci --force # use --force while NextJS 15 is still RC
-      - run: npm run component:headless
+      # - run: npm run component:headless
       - run: npm run e2e:headless

frontend/app/Providers.tsx

@@ -2,11 +2,14 @@
 import React from "react";
 import { GoogleOAuthProvider } from "@react-oauth/google";
 import { Provider as JotaiProvider } from "jotai";
+import ThemeRegistry from "./ThemeRegistry";
 
 export default function Providers({ children }: { children: React.ReactNode }) {
   return (
-    <GoogleOAuthProvider clientId="1055063718392-2ajj0s8h3pol9u5fdlt5vg8jep200r6i.apps.googleusercontent.com">
-      <JotaiProvider>{children}</JotaiProvider>
-    </GoogleOAuthProvider>
+    <ThemeRegistry options={{ key: "joy" }}>
+      <GoogleOAuthProvider clientId="1055063718392-2ajj0s8h3pol9u5fdlt5vg8jep200r6i.apps.googleusercontent.com">
+        <JotaiProvider>{children}</JotaiProvider>
+      </GoogleOAuthProvider>
+    </ThemeRegistry>
   );
 }

frontend/app/ThemeRegistry.tsx

@@ -0,0 +1,64 @@
+"use client";
+import createCache from "@emotion/cache";
+import { useServerInsertedHTML } from "next/navigation";
+import { CacheProvider } from "@emotion/react";
+import { CssVarsProvider } from "@mui/joy/styles";
+import CssBaseline from "@mui/joy/CssBaseline";
+//import theme from "/path/to/custom/theme"; // OPTIONAL
+import { useState } from "react";
+
+// This implementation is from emotion-js
+// https://github.com/emotion-js/emotion/issues/2928#issuecomment-1319747902
+export default function ThemeRegistry(props: any) {
+  const { options, children } = props;
+
+  const [{ cache, flush }] = useState(() => {
+    const cache = createCache(options);
+    cache.compat = true;
+    const prevInsert = cache.insert;
+    let inserted: string[] = [];
+    cache.insert = (...args) => {
+      const serialized = args[1];
+      if (cache.inserted[serialized.name] === undefined) {
+        inserted.push(serialized.name);
+      }
+      return prevInsert(...args);
+    };
+    const flush = () => {
+      const prevInserted = inserted;
+      inserted = [];
+      return prevInserted;
+    };
+    return { cache, flush };
+  });
+
+  useServerInsertedHTML(() => {
+    const names = flush();
+    if (names.length === 0) {
+      return null;
+    }
+    let styles = "";
+    for (const name of names) {
+      styles += cache.inserted[name];
+    }
+    return (
+      <style
+        key={cache.key}
+        data-emotion={`${cache.key} ${names.join(" ")}`}
+        dangerouslySetInnerHTML={{
+          __html: styles,
+        }}
+      />
+    );
+  });
+
+  return (
+    <CacheProvider value={cache}>
+      <CssVarsProvider>
+        {/* the custom theme is optional */}
+        {/* <CssBaseline /> */}
+        {children}
+      </CssVarsProvider>
+    </CacheProvider>
+  );
+}

frontend/app/about/Section.tsx

@@ -1,4 +1,5 @@
-import React from 'react'
+import { Card, Typography } from "@mui/joy";
+import React from "react";
 
 /**
  * Section component, used to display a section with a title and content.
@@ -7,19 +8,17 @@ import React from 'react'
  * @returns Element
  */
 interface SectionProps {
-    title: string
-    content: string
+  title: string;
+  content: string;
 }
 
 const Section: React.FC<SectionProps> = ({ title, content }) => {
-    return (
-        <div className='pt-10 flex flex-wrap items-center justify-between'>
-            <div className='w-full'>
-                <h3 className='text-xl font-semibold text-center mb-2'>{title}</h3>
-                <p className='text-left'>{content}</p>
-            </div>
-        </div>
-    )
-}
+  return (
+    <Card>
+      <Typography level="h3">{title}</Typography>
+      <p>{content}</p>
+    </Card>
+  );
+};
 
-export default Section
+export default Section;

frontend/app/about/page.tsx

@@ -1,48 +1,46 @@
-import React from 'react'
-import Section from './Section'
-
+import React from "react";
+import Section from "./Section";
+import { Box } from "@mui/joy";
 
 /**
  * About page, contains information about the project and the team.
  * @returns Element
  */
-const about = () => {
-    return (
-        <>
-            <div className='pt-5'>
-                <h1 className='text-4xl font-bold text-center'>About</h1>
-                <Section
-                    title="Who Are We?"
-                    content="We are a group of dedicated students passionate about technology and innovation. Our team is composed of individuals with
+const About = () => {
+  return (
+    <Box>
+      <h1 className="text-4xl font-bold text-center">About</h1>
+      <Section
+        title="Who Are We?"
+        content="We are a group of dedicated students passionate about technology and innovation. Our team is composed of individuals with
                     diverse backgrounds and expertise, all united by a common goal: to leverage the power of Natural Language Processing (NLP)
                     to analyze and derive insights from Reddit data. Our project aims to understand the dynamics of online communities and the
                     interactions within them. By applying advanced NLP techniques, we strive to uncover patterns and trends that can provide
                     valuable insights into user behavior and community engagement. We believe that our work can contribute to a deeper
                     understanding of social media and its impact on society."
-                />
-                <Section
-                    title='Our Story'
-                    content="Our journey began when we realized the immense potential of NLP in understanding social media dynamics.
+      />
+      <Section
+        title="Our Story"
+        content="Our journey began when we realized the immense potential of NLP in understanding social media dynamics.
                     Inspired by the growing influence of online communities, we decided to embark on a project that could provide
                     meaningful insights into user behavior and community interactions. This inspiration drove us to form a team
                     and start our project, aiming to make a difference in the field of data analysis."
-                />
-                <Section
-                    title='Meet The Team'
-                    content="Our team consists of Katarzyna Jabłońska, Sebastian Nowak, Michał Miłek, and Sebastian Jałoszyński.
+      />
+      <Section
+        title="Meet The Team"
+        content="Our team consists of Katarzyna Jabłońska, Sebastian Nowak, Michał Miłek, and Sebastian Jałoszyński.
                     Each of us brings unique skills and perspectives to the project, making our collaboration both dynamic and effective.
                     Together, we are committed to pushing the boundaries of what is possible with NLP and data analysis."
-                />
-                <Section
-                    title='Our Evolution'
-                    content="Throughout our project, we have faced numerous challenges, from technical obstacles to data interpretation issues.
+      />
+      <Section
+        title="Our Evolution"
+        content="Throughout our project, we have faced numerous challenges, from technical obstacles to data interpretation issues.
                     However, each challenge has been an opportunity for growth and improvement. Our project has evolved significantly,
                     with continuous enhancements to our NLP models and data analysis techniques. Today, we are proud of the progress we have
                     made and the insights we have uncovered."
-                />
-            </div>
-        </>
-    )
-}
+      />
+    </Box>
+  );
+};
 
-export default about
+export default About;

frontend/app/components/Footer.tsx

@@ -1,11 +1,26 @@
+import { Card, Sheet } from "@mui/joy";
 import React from "react";
 
 /**
  * Footer component rendering authors credentials
  * @returns Element
  */
 const Footer = () => {
-  return <footer className="mt-auto w-full p-8 text-center ">RMoods</footer>;
+  return (
+    <Card
+      sx={{
+        borderRadius: 0,
+        minHeight: "100px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <Sheet>
+        <footer>RMoods</footer>
+      </Sheet>
+    </Card>
+  );
 };
 
 export default Footer;