From 363b9cbbe7abbfd5db91f888d55d17ac80a531fd Mon Sep 17 00:00:00 2001
From: Donato <uo288787@uniovi.es>
Date: Fri, 1 Mar 2024 18:26:51 +0100
Subject: [PATCH] Fixed cosas

---
 webapp/src/Home.jsx                 | 27 +++++++--------------------
 webapp/src/components/Particles.jsx |  8 ++++++--
 webapp/src/index.js                 | 26 ++++++++++++++++++++++++--
 3 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/webapp/src/Home.jsx b/webapp/src/Home.jsx
index 48a8d62e..60818c1c 100644
--- a/webapp/src/Home.jsx
+++ b/webapp/src/Home.jsx
@@ -1,19 +1,14 @@
 import Container from "@mui/material/Container";
-import Typography from "@mui/material/Typography";
 import {Button} from "@mui/material";
-import Particles from "./components/Particles";
 import {Fragment} from "react";
 import {Link} from "react-router-dom";
-
+import { ReactComponent as Logo } from './media/logoL.svg';
 
 function Home() {
 
-    const shadowConfig = "7px 7px 16px"
-    const buttonConfig = {margin: "1rem", width: "10em", height: "4em"}
-
     return(
         <Fragment>
-            <Particles />
+
             <Container sx={{
                 position: "absolute",
                 height: "fit-content",
@@ -26,22 +21,14 @@ function Home() {
                 left: "50%",
                 top: "50%"}}
             >
-                <Typography component="p" sx={{
-                    textShadow: shadowConfig,
-                    fontSize: {xs: "h5.fontSize", md: "h4.fontSize"}}}
-                >
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius placerat mi, vitae ornare odio.
-                </Typography>
-                <Typography component="p" sx={{
-                    textShadow: shadowConfig,
-                    fontSize: {md: "h5.fontSize"}}}
-                >
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius placerat mi, vitae ornare odio.
-                </Typography>
+                <Container className="svg-container" style={{textAlign: "center", margin: "1rem"}}>
+                    <Logo style={{ width: '75%', height: '75%' }} />
+                </Container>
+
                 <Container>
                     <Button
                         variant="contained"
-                        sx={buttonConfig}
+                        sx={{margin: "1rem", width: "10em", height: "4em"}}
                         component={Link}
                         to="/login"
                     >
diff --git a/webapp/src/components/Particles.jsx b/webapp/src/components/Particles.jsx
index f030c94d..e8ffae07 100644
--- a/webapp/src/components/Particles.jsx
+++ b/webapp/src/components/Particles.jsx
@@ -9,12 +9,16 @@ export default function Particles() {
         particlesJS('particles-js', config);
     }, []);
 
-    return <div id="particles-js" style={{
+    return <div id="particles-js" 
+    style={{
         position: "absolute",
         height: "90%",
         width: "100%",
         background: "rgba(255, 255, 255)",
-        filter: "blur(2px)"}}></div>;
+        filter: "blur(2px)",
+        zIndex: -1,
+    }}
+        ></div>;
 
 };
 
diff --git a/webapp/src/index.js b/webapp/src/index.js
index 4b75eeda..c0ad4fb9 100644
--- a/webapp/src/index.js
+++ b/webapp/src/index.js
@@ -13,10 +13,31 @@ import Signup from "./Signup"
 import About from "./About"
 import Ranking from "./Ranking"
 
+import Particles from "./components/Particles"
+
+import { ThemeProvider } from '@mui/material/styles';
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#055902', // Your primary color
+    },
+  },
+
+  typography: {
+    fontFamily: 'Verdana, sans-serif', // Your preferred font family
+    fontSize: 16, // Base font size
+  },
+  // Other theme options (spacing, breakpoints, etc.)
+});
+
 const App = () => {
     return (
         <Fragment>
+            <ThemeProvider theme={theme}>
             <Nav/>
+            <Particles/>
             <Routes>
                 <Route path="/home" element={<Home/>} />
                 <Route path="/signup" element={<Signup/>} />
@@ -25,7 +46,8 @@ const App = () => {
                 <Route path="/ranking" element={<Ranking/>} />
                 <Route path="*" element={<Home/>} />
             </Routes>
-            <Footer/>       
+            <Footer/>   
+            </ThemeProvider>    
         </Fragment>
     )
 }
@@ -33,7 +55,7 @@ const App = () => {
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <BrowserRouter>
-    <App/>
+      <App/>
   </BrowserRouter>
 );