Merged all the css into one "custom.css"

webapp/package.json

@@ -12,6 +12,7 @@
     "axios": "^1.6.5",
     "i18n": "^0.15.1",
     "react": "^18.2.0",
+    "react-countdown": "^2.3.5",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.0.5",
     "react-icons": "^5.0.1",

webapp/src/App.js

@@ -4,11 +4,11 @@ import Container from '@mui/material/Container';
 import QuestionView from './components/questionView/QuestionView';
 import GameMenu from './components/GameMenu/GameMenu';
 import Navbar from './components/fragments/NavBar';
-import Home from './components/Home/Home';
+import Home from './components/home/Home';
 import Login from './components/loginAndRegistration/Login';
 import AddUser from './components/loginAndRegistration/AddUser';
 import Instructions from './components/Instructions'; 
-
+import './custom.css';
 
 function App() {
   return (

webapp/src/components/GameMenu/GameMenu.js

@@ -1,4 +1,4 @@
-import './GameMenu.css';
+import "../../custom.css";
 import { Link } from "react-router-dom";
 import {useTranslation} from "react-i18next";
 
@@ -22,13 +22,10 @@ export default function GameMenu() {
     return <button className="menuButton" onClick={handleClick}> {t("gameMenu.history_button")}</button>;
   }
 
-  function ButtonNewGame({t}) {
+  function ButtonNewGame({ t }) {
     return (
-      <>
-        <Link className="menuButton" to="/questions">
-        <h3> {t("gameMenu.new_game_button")}</h3>
-        </Link>
-      </>
-      );
-  }
-
+      <Link className="menuButton linkButton" to="/questions">
+        <h3>{t("gameMenu.new_game_button")}</h3>
+      </Link>
+    );
+  }

webapp/src/components/Home/Home.js

@@ -1,12 +1,9 @@
 import React from "react";
-import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import { Link } from 'react-router-dom';
-import "./Home.css";
+import "../../custom.css";
 import {useTranslation} from "react-i18next";
 
-import "./Home.css";
-
 
 function Home() {
 

webapp/src/components/Instructions.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../components/Instructions.css';
+import '../custom.css';
 import {useTranslation} from "react-i18next";
 
 

webapp/src/components/fragments/NavBar.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import Typography from "@mui/material/Typography";
 import { Link } from 'react-router-dom';
-import "./NavBar.css";
+import "../../custom.css";
 import {useTranslation} from "react-i18next";
 
 function Navbar() {
@@ -15,9 +15,12 @@ function Navbar() {
       <Typography variant="h6" gutterBottom className="navbar-text">
       {t("navBar.title")}
       </Typography>
-      <button onClick={()=> i18n.changeLanguage("en")}>EN</button>
-      <button onClick={()=> i18n.changeLanguage("es")}>ES</button>
-      <Help />
+      <div className='right-nav'>
+        <button className="en-button" onClick={()=> i18n.changeLanguage("en")}>EN</button>
+        <button className="es-button" onClick={()=> i18n.changeLanguage("es")}>ES</button>
+        <Help />
+      </div>
+
     </div>
   );
 }

webapp/src/components/loginAndRegistration/AddUser.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { FaUser, FaLock } from "react-icons/fa";
-import "./Login.css";
+import "../../custom.css";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 

webapp/src/components/loginAndRegistration/Login.js

@@ -3,6 +3,7 @@ import { FaUser, FaLock } from "react-icons/fa";
 import { Link } from "react-router-dom";
 import Button from "@mui/material/Button";
 import { useTranslation } from "react-i18next";
+import "../../custom.css";
 
 const Login = () => {
   const { t } = useTranslation("global");

webapp/src/components/questionView/Question.js

@@ -1,3 +1,5 @@
+import "../../custom.css";
+
 class Question{
     constructor(json){
         this.question = "";