From 74eadacdb25f6630c2b865d2bddb92c2d9f07af4 Mon Sep 17 00:00:00 2001
From: DavidPerea <d.perearomero@proton.me>
Date: Tue, 10 Dec 2024 19:22:05 +0100
Subject: [PATCH] Changes on landing page CSS

---
 web/src/pages/landing/LandingPage.scss | 29 ++++++++++++++++
 web/src/pages/landing/LandingPage.tsx  | 46 ++++++++++++++------------
 2 files changed, 54 insertions(+), 21 deletions(-)
 create mode 100644 web/src/pages/landing/LandingPage.scss

diff --git a/web/src/pages/landing/LandingPage.scss b/web/src/pages/landing/LandingPage.scss
new file mode 100644
index 0000000..57843bb
--- /dev/null
+++ b/web/src/pages/landing/LandingPage.scss
@@ -0,0 +1,29 @@
+body {
+    margin: 0 auto;
+    text-align: center;
+    background: linear-gradient(-45deg, #03444a, #00a8a8, #f1bc52, #ff8f4b);
+    background-size: 400% 400%;
+    animation: gradient 15s ease infinite;
+    height: 100vh;
+}
+@keyframes gradient {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+div {
+    padding: 2%;
+}
+button {
+    font-size: 1rem;
+}
+#body-format {
+    margin: auto;
+    max-width: 20%;
+}
diff --git a/web/src/pages/landing/LandingPage.tsx b/web/src/pages/landing/LandingPage.tsx
index 6b472f9..3530f2b 100644
--- a/web/src/pages/landing/LandingPage.tsx
+++ b/web/src/pages/landing/LandingPage.tsx
@@ -6,6 +6,7 @@ import {
 } from "interface";
 import React, { ChangeEvent } from "react";
 import { Socket } from "socket.io-client";
+import "./LandingPage.scss";
 
 export interface LandingPageProps {
   socket: Socket;
@@ -25,29 +26,32 @@ const LandingPage = (props: LandingPageProps) => {
 
   return (
     <React.Fragment>
-      <div className="landing-page-title">
+      <div className="landing-page-title" id="landing-page-title">
         <h1>Trains And Roads</h1>
       </div>
-      <div className="user-name-input">
-        <input placeholder="Enter username" onChange={registerUsername}></input>
-      </div>
-      <div className="create-lobby-button">
-        <button onClick={() => handleCreateLobby(socket, createLobbyPayload)}>
-          Create Lobby
-        </button>
-      </div>
-      <div className="join-lobby">
-        <input
-          className="lobby-id-input"
-          placeholder="Enter Lobby Id"
-          onChange={registerLobbyId}
-        ></input>
-        <button
-          className="join-lobby-button secondary"
-          onClick={() => handleJoinLobby(socket, joinLobbyPayload)}
-        >
-          Join Lobby
-        </button>
+      <div id="body-format">
+        <div className="user-name-input" id="user-name-input">
+          <input
+            placeholder="Enter username"
+            onChange={registerUsername}
+          ></input>
+          <button onClick={() => handleCreateLobby(socket, createLobbyPayload)}>
+            Create Lobby
+          </button>
+        </div>
+        <div className="join-lobby" id="join-lobby">
+          <input
+            className="lobby-id-input"
+            placeholder="Enter Lobby Id"
+            onChange={registerLobbyId}
+          ></input>
+          <button
+            className="join-lobby-button secondary"
+            onClick={() => handleJoinLobby(socket, joinLobbyPayload)}
+          >
+            Join Lobby
+          </button>
+        </div>
       </div>
     </React.Fragment>
   );