Solved conflicts before PR

Arquisoft · Mar 29, 2024 · 51a179f · 51a179f
2 parents f8b39c6 + 40e51ba
commit 51a179f
Show file tree

Hide file tree

Showing 17 changed files with 224 additions and 44 deletions.
diff --git a/webapp/public/KaW.png b/webapp/public/KaW.png
diff --git a/webapp/public/KaWIco.ico b/webapp/public/KaWIco.ico
diff --git a/webapp/public/KaWIco.png b/webapp/public/KaWIco.png
diff --git a/webapp/public/KaW_old.png b/webapp/public/KaW_old.png
diff --git a/webapp/public/index.html b/webapp/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/KaWIco.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Know and Win</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/webapp/src/assets/login-solid.svg b/webapp/src/assets/login-solid.svg
diff --git a/webapp/src/assets/logout-solid.svg b/webapp/src/assets/logout-solid.svg
diff --git a/webapp/src/components/Header/Header.css b/webapp/src/components/Header/Header.css
@@ -3,7 +3,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 20px;
+  padding: 15px;
   transition: all 0.4s ease;
 }
 
@@ -34,6 +34,30 @@
 }
 
 img {
-  width: 4rem;
+  width: 5rem;
   height: auto;
+  margin: 0rem;
+  margin-left: 0.5rem;
 }
+
+.login-logout-link {
+  background-color: #fff;
+  color: #717bee;
+  border: none;
+  padding: 0.5em 1em; 
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 0.8em; 
+  margin: 0.5em 1.25em 0.5em 0.2em; 
+  cursor: pointer;
+  border-radius: 0.5em; 
+  transition: background-color 0.3s ease;
+  white-space: nowrap; 
+  line-height: 1.2em;
+}
+
+.login-logout-link:hover {
+  background-color: #636ad5;
+  color: #fff;
+}
diff --git a/webapp/src/components/Header/Header.js b/webapp/src/components/Header/Header.js
@@ -1,13 +1,15 @@
 import './Header.css'
-
+import { Link } from 'react-router-dom'
 import { ReactComponent as BarIcon } from '../../assets/bars-solid.svg'
 import { ReactComponent as SunIcon } from '../../assets/sun-solid.svg'
 import { ReactComponent as MoonIcon } from '../../assets/moon-solid.svg'
 
 const Header = props => {
   return (
     <header className="header">
-      <img src="KaW.png" alt="Logo of Know and Win APP" />
+      <Link to="/">
+        <img src="KaW.png" alt="Logo of Know and Win APP" />
+      </Link>
       <div className="options">
         <div className="theme" onClick={props.onChangeTheme}>
           {props.theme === 'light' ? <MoonIcon /> : <SunIcon />}

diff --git a/webapp/src/components/Login/Login.js b/webapp/src/components/Login/Login.js
@@ -63,7 +63,7 @@ const Login = () => {
   }
 
   return (
-    <div className="login">
+    <div className='login'>
       <form>
         <h1>Login</h1>
         {error && <div className="response-error">{error}</div>}

diff --git a/webapp/src/components/Nav/Nav.css b/webapp/src/components/Nav/Nav.css
@@ -73,3 +73,36 @@
 .close-button svg {
   fill: #fff;
 }
+
+.nav-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 99;
+  pointer-events: none; /* El overlay no recibe eventos de clic */
+}
+
+.nav-overlay::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.3s ease, visibility 0s 0.3s;
+}
+
+.nav-open .nav-overlay {
+  pointer-events: auto; /* El overlay recibe eventos de clic cuando el menú está abierto */
+}
+
+.nav-open .nav-overlay::before {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 0.3s ease;
+}
diff --git a/webapp/src/components/Nav/Nav.js b/webapp/src/components/Nav/Nav.js
@@ -1,15 +1,34 @@
 import './Nav.css'
 
 import { Link } from 'react-router-dom'
-
+import React, { useEffect } from 'react'
 import { ReactComponent as CloseIcon } from '../../assets/xmark-solid.svg'
 import { ReactComponent as SquareQuestionIcon } from '../../assets/square-question.svg'
 import { ReactComponent as UserIcon } from '../../assets/user-solid.svg'
 import { ReactComponent as AwardIcon } from '../../assets/award-solid.svg'
 import { ReactComponent as SettingsIcon } from '../../assets/gear-solid.svg'
+import { ReactComponent as LoginIcon } from '../../assets/login-solid.svg'
+import { ReactComponent as LogoutIcon } from '../../assets/logout-solid.svg'
+import { useAuth } from '../../hooks/useAuth'
 
 const Nav = props => {
+  const { user } = useAuth()
+  const handleCloseNav = event => {
+    if (event.target.closest('.nav')) {
+      return
+    }
+
+    props.onToggleNav()
+  }
+  useEffect(() => {
+    if (props.openNav) {
+      document.documentElement.classList.add('nav-open');
+    } else {
+      document.documentElement.classList.remove('nav-open');
+    }
+  }, [props.openNav]);
   return (
+    <div className="nav-overlay" onClick={handleCloseNav}>
     <div className={`nav ${props.openNav ? 'show' : ''}`}>
       <div className="nav-header">
         <div className="close-button" onClick={props.onToggleNav}>
@@ -19,26 +38,29 @@ const Nav = props => {
 
       <div className="nav-body">
         <Link to="/" className="nav-link">
-
           <div className="nav-link-icon">
             <UserIcon />
           </div>
           Home
         </Link>
 
-        <Link to="game" className="nav-link">
-          <div className="nav-link-icon">
-            <SquareQuestionIcon />
-          </div>
-          Play
-        </Link>
+        {user && (
+          <Link to="game" className="nav-link">
+            <div className="nav-link-icon">
+              <SquareQuestionIcon />
+            </div>
+            Play
+          </Link>
+        )}
 
-        <Link to="profile" className="nav-link">
-          <div className="nav-link-icon">
-            <UserIcon />
-          </div>
-          Profile
-        </Link>
+        {user && (
+          <Link to="profile" className="nav-link">
+            <div className="nav-link-icon">
+              <UserIcon />
+            </div>
+            Profile
+          </Link>
+        )}
 
         <Link to="leaderboard" className="nav-link">
           <div className="nav-link-icon">
@@ -47,14 +69,22 @@ const Nav = props => {
           Leaderboard
         </Link>
 
-        <Link to="settings" className="nav-link">
-          <div className="nav-link-icon">
-            <SettingsIcon />
-          </div>
-          Settings
+        {user && (
+          <Link to="settings" className="nav-link">
+            <div className="nav-link-icon">
+              <SettingsIcon />
+            </div>
+            Settings
+          </Link>
+        )}
+
+        <Link to={user ? '/logout' : '/login'} className="nav-link">
+          {user ? <LogoutIcon /> : <LoginIcon />}
+          {user ? 'Logout' : 'Login'}
         </Link>
       </div>
     </div>
+    </div>
   )
 }
 

diff --git a/webapp/src/index.css b/webapp/src/index.css
@@ -9,6 +9,7 @@
 :root {
   --dark-gray: #121212;
   --black: #000;
+  --gray: #252525;
 }
 
 body {
@@ -72,4 +73,24 @@ main {
 
 .dark .form-create input {
   background-color: var(--dark-gray);
+}
+
+.dark .login {
+  background-color: var(--dark-gray);
+  color: #fff;
+}
+
+.dark .register {
+  background-color: var(--dark-gray);
+  color: #fff;
+}
+
+.dark .login-logout-link {
+  background-color: var(--dark-gray);
+  color: #747ae7;
+}
+
+.dark .theme {
+  background-color: var(--dark-gray);
+  color: #747ae7;
 }
diff --git a/webapp/src/pages/Home/Home.css b/webapp/src/pages/Home/Home.css
@@ -1,10 +1,13 @@
 .App {
     text-align: center;
-}
-
-.App-logo {
-    height: 40vmin;
-    pointer-events: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    color: #333;
 }
 
 @media (prefers-reduced-motion: no-preference) {
@@ -14,26 +17,56 @@
 }
 
 .App-header {
-    background-color: #282c34;
-    min-height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     font-size: calc(10px + 2vmin);
     color: white;
+    padding: 2rem;
 }
 
 .App-link {
     color: #61dafb;
+    margin-bottom: 2rem;
+    text-decoration: none;
+    font-size: 1.2rem;
+
 }
 
 @keyframes App-logo-spin {
     from {
         transform: rotate(0deg);
     }
-
     to {
         transform: rotate(360deg);
     }
+}
+
+.homeDiv {
+    display: grid;
+    grid-template-rows: auto auto;
+    gap: 3rem;
+    justify-items: center;
+    align-items: start;
+    padding: 2rem;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.App-logo {
+    grid-row: 1;
+    height: 10rem;
+    width: auto;
+    margin: 5em;
+}
+
+.welcome-message {
+    grid-row: 2;
+    font-size: 2rem;
+    font-family: 'Courier New', Courier, monospace;
+}
+
+.username {
+    color: #61dafb;
 }