Fixed about page

.vscode/settings.json

@@ -1 +1,3 @@
-{}
+{
+    "svg.preview.background": "custom"
+}

webapp/src/About.jsx

@@ -1,18 +1,20 @@
 import React from 'react';
 import { Container, Typography, Paper, Link } from '@mui/material';
 import {ReactComponent as Logo} from "./media/logoL.svg";
-import "./style/about.css"
 
 export default function About() {
     return (
         <Container maxWidth="md" style={{ marginTop: '2rem'}}>
+
             <Paper elevation={3} style={{ padding: '2rem' }}>
                 <Typography variant="h4" gutterBottom>
                     About Us
                 </Typography>
-                <div className="svg-container">
-                    <Logo />
-                </div>
+
+                <Container className="svg-container" style={{textAlign: "center", margin: "1rem"}}>
+                    <Logo style={{ width: '50%', height: '50%' }} />
+                </Container>
+
                 <Typography variant="body1" paragraph>
                     Welcome to our project! We are dedicated to providing quality content and services to our users.
                 </Typography>
@@ -30,21 +32,27 @@ export default function About() {
                 </Typography>
             </Paper>
 
-            <Paper elevation={3} style={{ padding: '2rem', marginTop: '2rem', height: '50rem' }}>
+            <Paper elevation={3} style={{ padding: '2rem', marginTop: '2rem'}}>
                 <Typography variant="h4" gutterBottom>
                     Contact Us
                 </Typography>
                 <Typography variant="body1" paragraph>
                     You can reach us via the following channels:
                 </Typography>
                 <Typography variant="body1" paragraph>
-                    GitHub: <Link href="https://github.com/Arquisoft/wiq_es05b" target="_blank" rel="noopener noreferrer">Checkout our github page!</Link>
+                    Mailing Info: <Link href="mailto:[email protected]">[email protected]</Link>
                 </Typography>
                 <Typography variant="body1" paragraph>
-                    Mailing Info: <Link href="mailto:UO288787@uniovi.es">uo288787@uniovi.es</Link>
+                    Mailing Info: <Link href="mailto:UO289295@uniovi.es">uo289295@uniovi.es</Link>
                 </Typography>
+                <Typography variant="subtitle1">
+                    <Link href="https://github.com/Arquisoft/wiq_es05b" target="_blank" rel="noopener noreferrer">Checkout our github page!</Link>
+                </Typography>
+
             </Paper>
 
+            <Container style={{clear:'both', height: '6rem'}}></Container>
+
         </Container>
 
     );

webapp/src/Ranking.jsx

@@ -0,0 +1,17 @@
+// Write a user ranking using material design components
+
+import React from 'react';
+import {Paper, Typography} from '@mui/material';
+
+export default function Ranking() {
+    return (
+        // design of the ranking page using material design components
+        <Paper>
+            <Typography variant="h1" component="h1">
+                Ranking
+            </Typography>
+        </Paper>
+
+    );     
+}
+

webapp/src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import {Fragment} from 'react';
 import ReactDOM from 'react-dom/client';
+import {Fragment} from 'react';
 import {Route, Routes} from "react-router";
 import {BrowserRouter} from "react-router-dom";
 
@@ -11,17 +11,19 @@ import Footer from "./components/Footer";
 import Login from "./Login"
 import Signup from "./Signup"
 import About from "./About"
+import Ranking from "./Ranking"
 
 const App = () => {
     return (
         <Fragment>
             <Nav/>
             <Routes>
-                <Route path="/" element={<Home/>} />
                 <Route path="/home" element={<Home/>} />
                 <Route path="/signup" element={<Signup/>} />
                 <Route path="/login" element={<Login/>} />
                 <Route path="/about" element={<About/>} />
+                <Route path="/ranking" element={<Ranking/>} />
+                <Route path="*" element={<Home/>} />
             </Routes>
             <Footer/>       
         </Fragment>

webapp/src/reportWebVitals.js

@@ -1,4 +1,4 @@
-const reportWebVitals = onPerfEntry => {
+export default function reportWebVitals(onPerfEntry) {
   if (onPerfEntry && onPerfEntry instanceof Function) {
     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);
@@ -8,6 +8,4 @@ const reportWebVitals = onPerfEntry => {
       getTTFB(onPerfEntry);
     });
   }
-};
-
-export default reportWebVitals;
+};