Improving

Arquisoft · Mar 7, 2024 · 2c7c7c8 · 2c7c7c8
1 parent c48fd9e
commit 2c7c7c8
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 23 deletions.
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git 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
@@ -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>
-      </>
-      );
-  }
-
+      <Link className="menuButton linkButton" to="/questions">
+        <h3>{t("gameMenu.new_game_button")}</h3>
+      </Link>
+    );
+  }
diff --git 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;