Cambios en la página de inicio

Arquisoft · Apr 7, 2024 · db80ef5 · db80ef5
1 parent 871f7eb
commit db80ef5
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 30 deletions.
diff --git a/webapp/src/App.css b/webapp/src/App.css
@@ -37,7 +37,10 @@
   }
 }
 
-body {
-    background-image: url('../public/fondo.png');
-    background-size: cover;
+nav{
+  background-color: #f7d2baa1;
+}
+
+nav{
+  align-self: center;
 }
diff --git a/webapp/src/App.js b/webapp/src/App.js
@@ -1,14 +1,13 @@
 import React, { useState } from 'react';
 import AddUser from './components/AddUser';
 import Login from './components/Login';
-import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import { BrowserRouter as Router, Route, Routes, Link, Navigate } from 'react-router-dom';
 import HomeScreen from './components/HomeScreen';
 import Game from './components/Game';
 import Welcome from './components/Welcome';
-import ImagenA from './LogoSaberYGanar.png'
+import ImagenA from './LogoSaberYGanar2.png'
 import './App.css';
 
 
@@ -26,16 +25,14 @@ function App() {
   };
 
   return (
-    <Container component="main">
-      <nav className="navbar navbar-light">
-        <a className="navbar-brand" href="/">
-          <img src={ImagenA} width="30" height="30" className="d-inline-block align-top" alt=""/>
-          WIQ
+    <div>
+    <nav className="navbar navbar-light m-auto" >
+        <a className="navbar-brand m-auto" href="/">
+          <img src={ImagenA} width="100" height="56" className="d-inline-block align-top" alt=""/>
         </a>
-      </nav>
-      <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
-      Saber y Ganar
-      </Typography>
+    </nav>
+
+    <Container component="main" id="principal">
       <Routes>
         <Route path="/adduser" element={<AddUser />} />
         <Route path="/login" element={<Login />} />
@@ -44,21 +41,9 @@ function App() {
         <Route path="/game" isAuthenticated={isAuthenticated} element={<Game />} />
       </Routes>
 
-      {/* <CssBaseline />
-      
-      {showLogin ? <Login /> : <AddUser />}
-      <Typography component="div" align="center" sx={{ marginTop: 2 }}>
-        {showLogin ? (
-          <Link name="gotoregister" component="button" variant="body2" onClick={handleToggleView}>
-            Don't have an account? Register here.
-          </Link>
-        ) : (
-          <Link component="button" variant="body2" onClick={handleToggleView}>
-            Already have an account? Login here.
-          </Link>
-        )}
-      </Typography> */}
+      {}
     </Container>
+    </div>
   );
 
 }

diff --git a/webapp/src/LogoSaberYGanar.png b/webapp/src/LogoSaberYGanar.png
diff --git a/webapp/src/LogoSaberYGanar2.png b/webapp/src/LogoSaberYGanar2.png
diff --git a/webapp/src/components/Welcome.js b/webapp/src/components/Welcome.js
@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import AddUser from './AddUser';
 import Login from './Login';
 import './Welcome.css'
+import Typography from '@mui/material/Typography';
+
 const HomeScreen = () => {
     const [showLogin, setShowLogin] = useState(false);
     const [showSignUp, setShowSignUp] = useState(false);
@@ -18,8 +20,20 @@ const HomeScreen = () => {
         if (!showLogin && !showSignUp) {
           return (
             <>
-              <button onClick={handleLogin}>Login</button>
-              <button onClick={handleSignUp}>SignUp</button>
+              <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
+                Tu juego favorito de televisión, ¡ahora en tu ordenador!
+              </Typography>
+              <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
+                Accede a tu cuenta o registrarte para comenzar
+              </Typography>
+              <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
+              ↓↓↓
+              </Typography>
+              <br></br>
+              <div class="px-3">
+                <button type="button" class="btn btn-outline-primary btn-lg" onClick={handleLogin}>Login</button>
+                <button type="button" class="btn btn-outline-primary btn-lg" onClick={handleSignUp}>SignUp</button>
+              </div>
             </>
           );
         }