Merge branch 'main' of https://github.com/ItzyBitzySpider/pawnpawnpwn

ItzyBitzySpider · Jan 20, 2024 · fad721b · fad721b
2 parents 12aa6bc + 261c060
commit fad721b
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 31 deletions.
diff --git 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
@@ -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
@@ -1,3 +1,8 @@
 /*******************************
          Site Overrides
 *******************************/
+
+.row > .ui.button {
+  font-size: 1.25rem;
+  width: 15rem;
+}
diff --git 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
@@ -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
@@ -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;