Merge pull request #269 from Arquisoft/183-Usability

LGTM 🍡

webapp/package.json

@@ -13,9 +13,13 @@
     "axios": "^1.6.5",
     "flag-icons": "^7.2.1",
     "history": "^5.3.0",
+
+    "mdb-react-ui-kit": "^7.2.0",
+
     "i18next": "^23.11.1",
     "i18next-browser-languagedetector": "^7.2.1",
     "prop-types": "^15.8.1",
+
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.1.0",
@@ -67,4 +71,4 @@
     "start-server-and-test": "^2.0.3",
     "tailwindcss": "^3.4.1"
   }
-}
+}

webapp/src/components/footer/Footer.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { MDBFooter } from 'mdb-react-ui-kit';
+//import './Footer.css';
+
+export const Footer= () => {
+  return (
+
+    <MDBFooter  className='footer text-black dark:text-white bg-teal-50 dark:bg-zinc-800' style={{position: 'relative', bottom: 0, width: '100%', padding: '10px', textAlign: 'center', display: 'flex', flexDirection: 'column' }}>
+      <div className='footer-content' style={{textAlign: 'center'}}>
+        &copy; {new Date().getFullYear()}{' '}
+        <a  href='https://github.com/Arquisoft/wiq_es1c'>
+          Wiq_es1c.
+        </a>
+        <p>All rights reserved. </p>
+      </div>
+    </MDBFooter>
+  );
+}

webapp/src/components/footer/Footer.test.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render, screen, act, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { MemoryRouter, BrowserRouter as Router  } from 'react-router-dom';
+import { Footer } from './Footer';
+
+
+describe("Footer component", () => {
+    beforeEach(() => localStorage.setItem("token", "manolineldelpino"));
+
+    test("renders component",async () => {
+        render(<MemoryRouter><Footer/></MemoryRouter>);
+
+        await act(async () => {});
+
+        expect(screen.getByText(/All rights reserved./i)).toBeInTheDocument();
+
+
+    });
+});

webapp/src/components/friends/Friend.js

@@ -5,6 +5,7 @@ import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { useTranslation } from "react-i18next";
 import { getUsers, getCurrentUser } from "../../services/user.service";
 import { acceptRequest, getFriends, getRequests, sendRequest } from "../../services/friends.service";
+import {Footer} from '../footer/Footer';
 
 export const Friends = () => {
   const { t } = useTranslation();
@@ -173,6 +174,7 @@ export const Friends = () => {
           </Container>
         </Container>
       </ThemeProvider>
+      <Footer/>
     </>
   );
 };

webapp/src/components/game/Game.js

@@ -12,6 +12,7 @@ import {
     getNumberOfQuestions
 } from "../../services/game.service";
 import { Nav } from '../nav/Nav';
+import {Footer} from '../footer/Footer';
 import {useLocation} from "react-router-dom";
 import Swal from 'sweetalert2';
 import i18n from "../../i18n";
@@ -307,6 +308,7 @@ export const Game = ({finishFunction, name, tags}) => {
             </Box>
         </Container>
     </Container>
+    <Footer/>
     </>
   )
 }

webapp/src/components/history/History.js

@@ -18,6 +18,7 @@ import CancelIcon from '@mui/icons-material/Cancel';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { getHistory } from "../../services/user.service"
 import { Nav } from '../nav/Nav';
+import {Footer} from '../footer/Footer';
 import { CssBaseline } from '@mui/material';
 import StringColorChip from './ColorChip';
 import { useTranslation } from "react-i18next";
@@ -134,6 +135,7 @@ export const History = () => {
                     </Table>
                 </TableContainer>
             </Container>
+            <Footer/>
         </>
     )
 }

webapp/src/components/home/Home.css

@@ -1,7 +1,7 @@
 
 p,h1,h2,h3,h4,h5,h6,span {
   font-family: Consolas, monaco, serif;
-  color:#FFFFFF;
+  /*color:#FFFFFF;*/
 }
 
 .buttonGradient {
@@ -55,13 +55,11 @@ p,h1,h2,h3,h4,h5,h6,span {
 
 div.tagChip {
   border-width: 2px;
-
   margin:0.5em;
-  border-color: #c08f49;
 }
 
 div.tagChip[data-active="true"]{
-  background: rgb(49, 5, 87);
+  background: #ebd3b2;
 }