From 261c06005fe6a382490858569ada5bdc6eff2ca1 Mon Sep 17 00:00:00 2001
From: Jonathan Loh <jonathanloh02@gmail.com>
Date: Sun, 21 Jan 2024 07:19:13 +0800
Subject: [PATCH] Update UI

---
 frontend/src/Game.css                         | 10 ++---
 frontend/src/Landing.tsx                      | 44 +++++++++++--------
 .../site/elements/button.overrides            |  5 +++
 .../site/elements/header.variables            |  2 +-
 .../semantic-ui/site/elements/input.variables |  6 +--
 .../semantic-ui/site/globals/site.variables   |  8 ++--
 6 files changed, 44 insertions(+), 31 deletions(-)

diff --git a/frontend/src/Game.css b/frontend/src/Game.css
index 1ac6b49..d0d3fac 100644
--- a/frontend/src/Game.css
+++ b/frontend/src/Game.css
@@ -7,8 +7,8 @@
 
   max-height: 80vh;
   aspect-ratio: 1 / 1;
-  border: #ac4020 2px solid;
-  border-radius: 5px;
+  border: #ac4020 4px solid;
+  border-radius: 10px;
 
   display: flex;
   flex-direction: column;
@@ -25,15 +25,15 @@
 }
 
 .chat .ui.input {
-  margin: -2px;
-  width: calc(100% + 4px);
+  margin: -4px;
+  width: calc(100% + 8px);
 }
 
 .chat .ui.input > input {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-color: #ac4020;
-  border: #ac4020 2px solid;
+  border: #ac4020 4px solid;
 }
 
 .chat div.ui.action.input:not([class*="left action"]) > input {
diff --git a/frontend/src/Landing.tsx b/frontend/src/Landing.tsx
index 7123e8b..0cf27cf 100644
--- a/frontend/src/Landing.tsx
+++ b/frontend/src/Landing.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Button, Grid, Header, Icon, Input } from "semantic-ui-react";
 import { createRoom, joinRoom, resetRoom } from "./utils/socket";
-import imgUrl from "./assets/logo.svg"
+import imgUrl from "./assets/logo.svg";
 
 export default function Landing({
   confirmedRoomCodeState,
@@ -32,35 +32,43 @@ export default function Landing({
   return (
     <Grid columns={1} textAlign="center">
       <Grid.Row>
-        <Header size="huge"><img src={imgUrl} style={{ width: "300px" }}></img></Header>
+        <Header size="huge">
+          <img src={imgUrl} style={{ width: "300px" }}></img>
+        </Header>
       </Grid.Row>
       {confirmedRoomCode ? (
         <>
           <Grid.Row>
-            <Header>
-              Waiting for opponent...
-              <br />
-              Room Code: {confirmedRoomCode}
-            </Header>
+            <Grid.Column>
+              <Header
+                size="tiny"
+                style={{ margin: 0, fontWeight: "bold", color: "#CCCCCC" }}
+              >
+                Room Code
+              </Header>
+              <Header size="medium" style={{ margin: 0 }}>
+                {confirmedRoomCode}
+              </Header>
+            </Grid.Column>
           </Grid.Row>
           <Grid.Row>
             <Button
-              primary
+              secondary
               onClick={() => {
                 setConfirmedRoomCode("");
                 setRoomCode("");
                 resetRoom();
               }}
             >
-              Back to Home
+              Back
             </Button>
           </Grid.Row>
         </>
       ) : (
         <>
-          <Grid.Row>
+          <Grid.Row style={{ padding: "0.5rem" }}>
             <Button
-              primary
+              secondary
               onClick={() => {
                 setConfirmedRoomCode("ai");
                 joinRoom("ai");
@@ -69,17 +77,17 @@ export default function Landing({
               Play Stockfish
             </Button>
           </Grid.Row>
-          <Grid.Row>
+          <Grid.Row style={{ padding: "0.5rem" }}>
             <Button
-              primary
+              secondary
               onClick={async () => {
                 setConfirmedRoomCode(await createRoom());
               }}
             >
-              Create Multiplayer Game
+              Create Game
             </Button>
           </Grid.Row>
-          <Grid.Row>
+          <Grid.Row style={{ padding: "0.5rem" }}>
             {isChoosingState ? (
               <Input
                 maxLength="6"
@@ -90,7 +98,7 @@ export default function Landing({
                   if (event.key === "Enter") requestJoin();
                 }}
                 action={
-                  <Button primary onMouseDown={requestJoin}>
+                  <Button secondary onMouseDown={requestJoin}>
                     <Icon name="sign-in" />
                   </Button>
                 }
@@ -104,8 +112,8 @@ export default function Landing({
                 }}
               ></Input>
             ) : (
-              <Button onClick={() => setIsChoosingState(true)} primary>
-                Join Multiplayer Game
+              <Button onClick={() => setIsChoosingState(true)} secondary>
+                Join Game
               </Button>
             )}
           </Grid.Row>
diff --git a/frontend/src/semantic-ui/site/elements/button.overrides b/frontend/src/semantic-ui/site/elements/button.overrides
index cba59ef..fa41ac0 100644
--- a/frontend/src/semantic-ui/site/elements/button.overrides
+++ b/frontend/src/semantic-ui/site/elements/button.overrides
@@ -1,3 +1,8 @@
 /*******************************
          Site Overrides
 *******************************/
+
+.row > .ui.button {
+  font-size: 1.25rem;
+  width: 15rem;
+}
\ No newline at end of file
diff --git a/frontend/src/semantic-ui/site/elements/header.variables b/frontend/src/semantic-ui/site/elements/header.variables
index fce2ff2..510c4c6 100644
--- a/frontend/src/semantic-ui/site/elements/header.variables
+++ b/frontend/src/semantic-ui/site/elements/header.variables
@@ -4,4 +4,4 @@
 
 @headerLineHeight: 1.33em;
 @headerFontWeight: 400;
-@textColor: @primaryColor;
+@textColor: @secondaryColor;
diff --git a/frontend/src/semantic-ui/site/elements/input.variables b/frontend/src/semantic-ui/site/elements/input.variables
index b9ae148..66a67af 100644
--- a/frontend/src/semantic-ui/site/elements/input.variables
+++ b/frontend/src/semantic-ui/site/elements/input.variables
@@ -6,11 +6,11 @@
 
 @focusColor: @textColor;
 
-@borderWidth: 2px;
-@borderColor: @primaryColor;
+@borderWidth: 4px;
+@borderColor: @secondaryColor;
 @border: @borderWidth solid @borderColor;
 
 @placeholderColor: @grey;
 @placeholderFocusColor: @grey;
 
-@focusBorderColor: @primaryColor;
+@focusBorderColor: @secondaryColor;
diff --git a/frontend/src/semantic-ui/site/globals/site.variables b/frontend/src/semantic-ui/site/globals/site.variables
index 89000d3..3a2753b 100644
--- a/frontend/src/semantic-ui/site/globals/site.variables
+++ b/frontend/src/semantic-ui/site/globals/site.variables
@@ -4,19 +4,19 @@
 
 @defaultBorderRadius: 5px;
 
-@headerFont: "Roboto", "Helvetica Neue", Arial, Helvetica, sans-serif;
-@pageFont: "Roboto", "Helvetica Neue", Arial, Helvetica, sans-serif;
+@headerFont: "Montserrat", "Roboto", "Helvetica Neue", Arial, Helvetica, sans-serif;
+@pageFont: "Montserrat", "Roboto", "Helvetica Neue", Arial, Helvetica, sans-serif;
 @googleFontName: "Roboto";
 
 @pageBackground: #252422;
 @primaryColor: #df7353;
-@secondaryColor: #ccc5b9;
+@secondaryColor: #ac4020;
 
 @lineHeight: 1.33;
 @textColor: #fffcf2;
 
 @black: #000000;
-@grey: #4c4843;
+@grey: #909090;
 @red: #ac4020;
 
 @fontSize: 1.25rem;