From 2c7c7c8aaaf35b850735e9d377f70ac5837e0746 Mon Sep 17 00:00:00 2001
From: lauratbg <UO275725@uniovi.es>
Date: Thu, 7 Mar 2024 23:31:56 +0100
Subject: [PATCH] Improving

---
 webapp/package-lock.json                   | 13 +++++
 webapp/package.json                        |  1 +
 webapp/src/components/GameMenu/GameMenu.js | 15 +++---
 webapp/src/custom.css                      | 57 ++++++++++++++++------
 4 files changed, 63 insertions(+), 23 deletions(-)

diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 72a49817..ad42295e 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -17,6 +17,7 @@
         "axios": "^1.6.5",
         "i18n": "^0.15.1",
         "react": "^18.2.0",
+        "react-countdown": "^2.3.5",
         "react-dom": "^18.2.0",
         "react-i18next": "^14.0.5",
         "react-icons": "^5.0.1",
@@ -22005,6 +22006,18 @@
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
       "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
+    "node_modules/react-countdown": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/react-countdown/-/react-countdown-2.3.5.tgz",
+      "integrity": "sha512-K26ENYEesMfPxhRRtm1r+Pf70SErrvW3g4CArLi/x6MPFjgfDFYePT4UghEj8p2nI0cqVV7/JjDgjyr//U60Og==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": ">= 15",
+        "react-dom": ">= 15"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index 85a27803..f31b2a0c 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -12,6 +12,7 @@
     "axios": "^1.6.5",
     "i18n": "^0.15.1",
     "react": "^18.2.0",
+    "react-countdown": "^2.3.5",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.0.5",
     "react-icons": "^5.0.1",
diff --git a/webapp/src/components/GameMenu/GameMenu.js b/webapp/src/components/GameMenu/GameMenu.js
index ed5a392c..a84fe5ea 100644
--- a/webapp/src/components/GameMenu/GameMenu.js
+++ b/webapp/src/components/GameMenu/GameMenu.js
@@ -22,13 +22,10 @@ export default function GameMenu() {
     return <button className="menuButton" onClick={handleClick}> {t("gameMenu.history_button")}</button>;
   }
   
-  function ButtonNewGame({t}) {
+  function ButtonNewGame({ t }) {
     return (
-      <>
-        <Link className="menuButton" to="/questions">
-        <h3> {t("gameMenu.new_game_button")}</h3>
-        </Link>
-      </>
-      );
-  }
-  
\ No newline at end of file
+      <Link className="menuButton linkButton" to="/questions">
+        <h3>{t("gameMenu.new_game_button")}</h3>
+      </Link>
+    );
+  }
\ No newline at end of file
diff --git a/webapp/src/custom.css b/webapp/src/custom.css
index 39ce5c1b..cc3106ae 100644
--- a/webapp/src/custom.css
+++ b/webapp/src/custom.css
@@ -110,21 +110,40 @@ body {
   
 
   .menuButton {
-    width: 200px; 
-    height: 45px; 
+    width: 40%;
+    height: 45px;
     background: darkblue;
     border: none;
     outline: none;
     border-radius: 40px;
     box-shadow: 0 0 10px black;
-    cursor: pointer;
+    cursor:pointer;
     font-size: 16px;
     color: white;
     font-weight: 700;
     margin: 0.5em;
+    text-align: center;
+  }
+  
+  .countdown {
+    font-weight: 500;
+    margin: 3em;
+  }
+  
+  .topPanel{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .divMenu {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
   }
   
- .create-game{
+ .menuButton{
     width: 200px; 
     height: 45px; 
     background: darkblue;
@@ -137,20 +156,30 @@ body {
     color: white;
     font-weight: 700;
     margin: 0.5em;
+    text-decoration: none;
  }
-  
+
+ .linkButton {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 200px;
+  height: 45px;
+  background: darkblue;
+  border: none;
+  outline: none;
+  border-radius: 40px;
+  box-shadow: 0 0 10px black;
+  cursor: pointer;
+  font-size: 16px;
+  color: white;
+  font-weight: 700;
+  margin: 0.5em;
+  text-decoration: none;
+}
 
   
-  
-  .divMenu {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
-    background-color: lightblue;
 
-  }
 
   .wrapper {
     display: flex;