From 8b452124ff1c551311c65d5862f22f55b670f2de Mon Sep 17 00:00:00 2001
From: Moon Patel <95487062+moonpatel@users.noreply.github.com>
Date: Mon, 23 Oct 2023 02:52:10 +0530
Subject: [PATCH] Revert "improved chess board css"

This reverts commit 6a11378b4436c718eeab82d02728ce8740f1ab60.
---
 frontend/src/components/Cell.jsx              |   2 +-
 frontend/src/components/GameHistory.jsx       |   4 +-
 frontend/src/layout/MainLayout.jsx            | 204 ++++++++----------
 frontend/src/pages/Chess/ChessBoard.jsx       |   8 +-
 frontend/src/pages/Play/ChallengeFriend.jsx   |   7 +-
 frontend/src/pages/Play/ChessGameComputer.jsx |   6 +-
 .../src/pages/Play/ChessGameMultiplayer.jsx   |  35 +--
 frontend/src/pages/Play/Computer.jsx          |   5 +-
 frontend/src/pages/Play/Layout.jsx            |   6 +-
 frontend/src/pages/Play/Play.jsx              |   9 +-
 frontend/src/pages/Play/PlayFriend.jsx        |   7 +-
 11 files changed, 128 insertions(+), 165 deletions(-)

diff --git a/frontend/src/components/Cell.jsx b/frontend/src/components/Cell.jsx
index ffbaf6a..edaaff3 100644
--- a/frontend/src/components/Cell.jsx
+++ b/frontend/src/components/Cell.jsx
@@ -36,7 +36,7 @@ const Cell = ({ cell, callbacks }) => {
     }
 
     return (
-        <Flex ref={setNodeRef} w='10vh' sx={theme => {
+        <Flex ref={setNodeRef} sx={theme => {
             let color = theme.colors.lime;
             return { backgroundColor: squareColor === 'b' ? '#769854' : '#e8edcd', aspectRatio: '1/1' }
         }} onClick={handleClick} bg={squareColor === 'w' ? "white" : "gray"} >
diff --git a/frontend/src/components/GameHistory.jsx b/frontend/src/components/GameHistory.jsx
index 60b9dfd..3b2ec09 100644
--- a/frontend/src/components/GameHistory.jsx
+++ b/frontend/src/components/GameHistory.jsx
@@ -52,8 +52,8 @@ const GameHistory = () => {
     }
 
     return (
-        <div style={{ width: '600px', userSelect: 'none' }}>
-            <ScrollArea h={'640px'} scrollbarSize={6} >
+        <div style={{ width: '100%', userSelect: 'none' }}>
+            <ScrollArea h={400} scrollbarSize={6} >
                 <Flex direction='column' align='start' w='100%'>
                     {gameHistoryJSX}
                 </Flex>
diff --git a/frontend/src/layout/MainLayout.jsx b/frontend/src/layout/MainLayout.jsx
index 9e8f6d0..f5fb226 100644
--- a/frontend/src/layout/MainLayout.jsx
+++ b/frontend/src/layout/MainLayout.jsx
@@ -1,129 +1,95 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useState } from 'react'
 
-import { Outlet } from "react-router-dom";
-import {
-  AppShell,
-  Burger,
-  Container,
-  Header,
-  MediaQuery,
-  Navbar,
-  Paper,
-  Text,
-  createStyles,
-  useMantineTheme,
-} from "@mantine/core";
+import { Outlet } from 'react-router-dom'
+import { AppShell, Burger, Container, Header, MediaQuery, Navbar, Paper, Text, createStyles, useMantineTheme } from '@mantine/core'
 
-import UserDataContextProvider, {
-  UserDataContext,
-} from "../context/user-data-context";
-import MainLoader from "../components/MainLoader";
-import NavbarLinks from "../components/NavbarLinks";
-import Logout from "../components/Logout";
+import UserDataContextProvider, { UserDataContext } from '../context/user-data-context';
+import MainLoader from '../components/MainLoader';
+import NavbarLinks from '../components/NavbarLinks';
+import Logout from '../components/Logout';
 
 const useStyles = createStyles(() => ({
-  body: {
-    width: "100%",
-    height: "100%",
-  },
-  root: {
-    width: "100%",
-    height: "100vh",
-  },
-  main: {
-    width: "100%",
-    height: "100vh",
-  },
-}));
+    body: {
+        width: '100%',
+        height: '100%'
+
+    },
+    root: {
+        width: '100%',
+        height: '100vh'
+
+    },
+    main: {
+        width: '100%',
+        height: '100vh'
+    }
+}))
 
 const MainLayout = () => {
-  const { classes } = useStyles();
-  const theme = useMantineTheme();
-  const [opened, setOpened] = useState(false);
-  const { isLoggedIn, errorMessage } = useContext(UserDataContext);
+    const { classes } = useStyles();
+    const theme = useMantineTheme();
+    const [opened, setOpened] = useState(false);
+    const { isLoggedIn, errorMessage } = useContext(UserDataContext);
 
-  if (!isLoggedIn) {
-    return <MainLoader errorMessage={errorMessage} />;
-  }
+    if (!isLoggedIn) {
+        return <MainLoader errorMessage={errorMessage} />
+    }
 
-  return (
-    <UserDataContextProvider>
-      <Paper>
-        <AppShell
-          classNames={{
-            body: classes.body,
-            root: classes.root,
-            main: classes.main,
-          }}
-          styles={{
-            main: {
-              background:
-                theme.colorScheme === "dark" ? "#302e2a" : theme.colors.gray[0],
-            },
-            body: {
-              textAlign: "center",
-            },
-          }}
-          layout="alt"
-          navbar={
-            <Navbar
-              py="md"
-              px="0"
-              hiddenBreakpoint="md"
-              sx={{ backgroundColor: "#262523" }}
-              hidden={!opened}
-              width={{ md: 150 }}
-            >
-              <Navbar.Section>
-                <Text size={30} weight={700}>
-                  Chess
-                </Text>
-              </Navbar.Section>
-              <Navbar.Section grow mt="md">
-                <NavbarLinks />
-              </Navbar.Section>
-              <Navbar.Section>
-                <Logout />
-              </Navbar.Section>
-            </Navbar>
-          }
-          header={
-            <MediaQuery largerThan="sm" styles={{ display: "none" }}>
-              <Header zIndex={1000} p="md">
-                <div
-                  style={{
-                    display: "flex",
-                    alignItems: "center",
-                    height: "100%",
-                  }}
+    return (
+        <UserDataContextProvider>
+            <Paper>
+                <AppShell classNames={{
+                    body: classes.body,
+                    root: classes.root,
+                    main: classes.main
+                }}
+                    styles={{
+                        main: {
+                            background: theme.colorScheme === 'dark' ? '#302e2a' : theme.colors.gray[0]
+                        },
+                        body: {
+                            textAlign: 'center'
+                        }
+                    }}
+                    layout='alt'
+                    navbar={
+                        <Navbar py="md" px="0" hiddenBreakpoint="md" sx={{ backgroundColor: '#262523' }} hidden={!opened} width={{ md: 150 }}>
+                            <Navbar.Section>
+                                <Text size={30} weight={700}>Chess</Text>
+                            </Navbar.Section>
+                            <Navbar.Section grow mt="md">
+                                <NavbarLinks />
+                            </Navbar.Section>
+                            <Navbar.Section >
+                                <Logout />
+                            </Navbar.Section>
+                        </Navbar>
+                    }
+                    header={
+                        <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
+                            <Header zIndex={1000} p="md">
+                                <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
+                                    <Burger
+                                        opened={opened}
+                                        onClick={() => setOpened((o) => !o)}
+                                        size="sm"
+                                        color={theme.colors.gray[6]}
+                                        mr="xl"
+                                    />
+
+                                    <Text>Application header</Text>
+                                </div>
+                            </Header>
+                        </MediaQuery>
+                    }
                 >
-                  <Burger
-                    opened={opened}
-                    onClick={() => setOpened((o) => !o)}
-                    size="sm"
-                    color={theme.colors.gray[6]}
-                    mr="xl"
-                  />
+                    <Container size="100%" px={{ 'md': '10px', 'lg': '30px' }} >
+                        <Outlet />
+                    </Container>
+                </AppShell>
+            </Paper>
+        </UserDataContextProvider>
+    );
+}
 
-                  <Text>Application header</Text>
-                </div>
-              </Header>
-            </MediaQuery>
-          }
-          padding
-        >
-          <Container
-            size="100%"
-            style={{ height: "100vh" }}
-            pl={{ md: 150 }}
-            pr={{ md: 0 }}
-          >
-            <Outlet />
-          </Container>
-        </AppShell>
-      </Paper>
-    </UserDataContextProvider>
-  );
-};
-
-export default MainLayout;
+export default MainLayout
\ No newline at end of file
diff --git a/frontend/src/pages/Chess/ChessBoard.jsx b/frontend/src/pages/Chess/ChessBoard.jsx
index 2c19f33..04988cc 100644
--- a/frontend/src/pages/Chess/ChessBoard.jsx
+++ b/frontend/src/pages/Chess/ChessBoard.jsx
@@ -67,11 +67,11 @@ const ChessBoard = ({ callbacks }) => {
     if (myColor === 'w') {
         return (
             <DndContext onDragEnd={dragEndCallback}>
-                <Flex h='80vh' sx={{ userSelect: 'none' }}>
+                <Flex className={classes.chessboard} sx={{ userSelect: 'none' }}>
                     <div>
                         {chessBoard.map((row, rowIndex) => {
                             return (
-                                <Flex key={rowIndex * 2}>
+                                <Flex className={classes.boardrow} key={rowIndex * 2}>
                                     {row.map(cell => <Cell callbacks={{ pieceClickCallback: callbacks.pieceClickCallback }} key={cell.square} cell={cell} />)}
                                 </Flex>
                             )
@@ -83,11 +83,11 @@ const ChessBoard = ({ callbacks }) => {
     } else {
         return (
             <DndContext onDragEnd={dragEndCallback}>
-                <Flex h='80vh' sx={{userSelect:'none'}}>
+                <Flex className={classes.chessboard}>
                     <div>
                         {chessBoard.map((row, rowIndex) => {
                             return (
-                                <Flex key={rowIndex * 2}>
+                                <Flex className={classes.boardrow} key={rowIndex * 2}>
                                     {row.map(cell => <Cell callbacks={{ pieceClickCallback: callbacks.pieceClickCallback }} key={cell.square} cell={cell} />).reverse()}
                                 </Flex>
                             )
diff --git a/frontend/src/pages/Play/ChallengeFriend.jsx b/frontend/src/pages/Play/ChallengeFriend.jsx
index 00d03a2..8617fd9 100644
--- a/frontend/src/pages/Play/ChallengeFriend.jsx
+++ b/frontend/src/pages/Play/ChallengeFriend.jsx
@@ -13,13 +13,12 @@ const ChallengeFriend = () => {
 
     return (
         <Card
-            sx={{
-                width: '600px',
-                height: '80%',
+            maw={450} sx={{
+                width: '100%',
+                height: '600px',
                 textAlign: 'center',
                 backgroundColor: '#262523'
             }}
-            px='20px'
         >
             <Form action={`/play/friend/${friend_username}`} method='POST'>
                 <Flex align="center" direction="column" justify="center" gap="xs" my="lg">
diff --git a/frontend/src/pages/Play/ChessGameComputer.jsx b/frontend/src/pages/Play/ChessGameComputer.jsx
index a8644a1..1d0d1ec 100644
--- a/frontend/src/pages/Play/ChessGameComputer.jsx
+++ b/frontend/src/pages/Play/ChessGameComputer.jsx
@@ -70,7 +70,7 @@ const ChessGameComputer = () => {
                 <Button mx='md' color='lime' onClick={modalFunctions.close}>OK</Button>
             </Modal>
             <Flex gap="xl" miw={360} justify='center' align='center' wrap='nowrap' mt={{ base: '50px', sm: '0px' }} direction={{ base: 'column', lg: 'row' }}>
-                <Flex gap="xs" justify='center' h='100vh' align='start' wrap='nowrap' direction='column' >
+                <Flex gap="xs" justify='center' align='start' wrap='nowrap' direction='column' >
                     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                         <NavLink
                             style={{ width: "500px" }}
@@ -111,9 +111,9 @@ const ChessGameComputer = () => {
                     </div>
                 </Flex>
                 <MediaQuery smallerThan="lg" styles={{ display: 'none' }}>
-                    <Flex maw={600} sx={{
+                    <Flex maw={450} sx={{
                         width: '100%',
-                        height: '840px',
+                        height: '100%',
                         textAlign: 'center',
                         borderRadius: '10px',
                         backgroundColor: '#272623'
diff --git a/frontend/src/pages/Play/ChessGameMultiplayer.jsx b/frontend/src/pages/Play/ChessGameMultiplayer.jsx
index 04f69dc..58f7aac 100644
--- a/frontend/src/pages/Play/ChessGameMultiplayer.jsx
+++ b/frontend/src/pages/Play/ChessGameMultiplayer.jsx
@@ -109,10 +109,11 @@ const ChessGameMultiplayer = () => {
                 <Button color='lime' onClick={exitGame}>Go back</Button>
                 <Button mx='md' color='lime' onClick={modalFunctions.close}>OK</Button>
             </Modal>
-            <Flex gap="xl" justify='center' align='center' wrap='nowrap' mt={{ base: '50px', sm: '0px' }} direction={{ base: 'column', lg: 'row' }}>
-                <Flex gap="xs" justify='center' h='100vh' align='start' wrap='nowrap' direction='column' >
-                    <div style={{ width:"100%", height:'6vh', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <Flex gap="xl" miw={360} justify='center' align='center' wrap='nowrap' mt={{ base: '50px', sm: '0px' }} direction={{ base: 'column', lg: 'row' }}>
+                <Flex gap="xs" justify='center' align='start' wrap='nowrap' direction='column' >
+                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                         <NavLink
+                            style={{ width: "500px" }}
                             p="2px"
                             label={isWaiting ? "Waiting for opponent..." : opponent}
                             icon={<Avatar radius="3px" >
@@ -124,19 +125,19 @@ const ChessGameMultiplayer = () => {
                     </div>
                     {
                         // TODO: handle isWaiting state
-                        // false ?
-                        //     <>
-                        //         <MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
-                        //             <Image width={600} miw={480} src="/src/assets/images/chess_board.png" />
-                        //         </MediaQuery>
-                        //         <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
-                        //             <Image width="100%" maw={540} src="/src/assets/images/chess_board.png" />
-                        //         </MediaQuery>
-                        //     </>
-                        //     :
-                        <ChessBoard callbacks={{ pieceDropCallback, pieceClickCallback }} />
+                        false ?
+                            <>
+                                <MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
+                                    <Image width={600} miw={480} src="/src/assets/images/chess_board.png" />
+                                </MediaQuery>
+                                <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
+                                    <Image width="100%" maw={540} src="/src/assets/images/chess_board.png" />
+                                </MediaQuery>
+                            </>
+                            :
+                            <ChessBoard callbacks={{ pieceDropCallback, pieceClickCallback }} />
                     }
-                    <div style={{ width:"100%", height:'6vh', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                         <NavLink
                             style={{ width: "500px" }}
                             p="2px"
@@ -150,9 +151,9 @@ const ChessGameMultiplayer = () => {
                     </div>
                 </Flex>
                 <MediaQuery smallerThan="lg" styles={{ display: 'none' }}>
-                    <Flex maw={600} sx={{
+                    <Flex maw={450} sx={{
                         width: '100%',
-                        height: '840px',
+                        height: '100%',
                         textAlign: 'center',
                         borderRadius: '10px',
                         backgroundColor: '#272623'
diff --git a/frontend/src/pages/Play/Computer.jsx b/frontend/src/pages/Play/Computer.jsx
index 6ddc683..d00b9cf 100644
--- a/frontend/src/pages/Play/Computer.jsx
+++ b/frontend/src/pages/Play/Computer.jsx
@@ -6,14 +6,13 @@ const Computer = () => {
   
   return (
     <Card
-      maw={600}
+      maw={450}
       sx={{
         width: "100%",
-        height: "75vh",
+        height: "600px",
         textAlign: "center",
         backgroundColor: "#262523",
       }}
-      p={'30px'}
     >
       <Flex align="center" justify="center" gap="xs" my="lg">
         <Image
diff --git a/frontend/src/pages/Play/Layout.jsx b/frontend/src/pages/Play/Layout.jsx
index 4ae9d86..26b73e0 100644
--- a/frontend/src/pages/Play/Layout.jsx
+++ b/frontend/src/pages/Play/Layout.jsx
@@ -9,8 +9,8 @@ const Layout = () => {
     const user = getUserData();
     let username = user.username;
     return (
-        <Flex h='100vh' justify='center' align='center' wrap='nowrap' mt={{ base: '50px', sm: '0px' }} direction={{ base: 'column', lg: 'row' }}>
-            <Flex gap="xs" h={'95vh'} justify='center' align='start' wrap='nowrap' direction='column' >
+        <Flex gap="xl" miw={360} justify='center' align='center' wrap='nowrap' mt={{ base: '50px', sm: '0px' }} direction={{ base: 'column', lg: 'row' }}>
+            <Flex gap="xs" justify='center' align='start' wrap='nowrap' direction='column' >
                 <NavLink
                     p="2px"
                     label={"opponent"}
@@ -18,7 +18,7 @@ const Layout = () => {
                     description={"description"}
                 />
                 <MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
-                    <img draggable={false} height={'100%'} style={{aspectRatio:'1'}} miw={480} src="/src/assets/images/chess_board.png" />
+                    <img draggable={false} width={600} miw={480} src="/src/assets/images/chess_board.png" />
                 </MediaQuery>
                 <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
                     <img draggable={false} width="100%" maw={540} src="/src/assets/images/chess_board.png" />
diff --git a/frontend/src/pages/Play/Play.jsx b/frontend/src/pages/Play/Play.jsx
index b6c2307..0e7ba29 100644
--- a/frontend/src/pages/Play/Play.jsx
+++ b/frontend/src/pages/Play/Play.jsx
@@ -6,13 +6,13 @@ import { Card, Flex, Image, NavLink, Title } from '@mantine/core'
 
 const Play = () => {
     return (
-        <Card sx={{
-            width: '540px',
-            height: '75%',
+        <Card maw={450} sx={{
+            width: '100%',
+            height: '600px',
             textAlign: 'center',
             backgroundColor: '#262523'
         }}>
-            <Flex gap="15px" px="20px" justify='center' align='center' wrap='nowrap' direction='column'>
+            <Flex gap="5px" px="20px" justify='center' align='center' wrap='nowrap' direction='column'>
                 <Title order={2} >Play Chess</Title>
                 <Image my="md" withPlaceholder width={200} height={120} src={null} />
                 {
@@ -32,7 +32,6 @@ const CardItem = ({ label, description, src, to }) => {
             icon={<Image src={src} width={50} />}
             description={description}
             sx={{ backgroundColor: '#1f1f1a', borderRadius: '5px' }}
-            p='20px'
         />
     )
 }
diff --git a/frontend/src/pages/Play/PlayFriend.jsx b/frontend/src/pages/Play/PlayFriend.jsx
index 2ede59a..f51b7b9 100644
--- a/frontend/src/pages/Play/PlayFriend.jsx
+++ b/frontend/src/pages/Play/PlayFriend.jsx
@@ -22,13 +22,12 @@ const PlayFriend = () => {
                 </div>
             </Modal>
             <Card
-                sx={{
-                    width: '600px',
-                    height: '90%',
+                maw={450} sx={{
+                    width: '100%',
+                    height: '600px',
                     textAlign: 'center',
                     backgroundColor: '#262523'
                 }}
-                px='30px'
             >
                 <Flex align="center" justify="center" gap="xs" my="lg">
                     <Image width="30px" src="https://www.chess.com/bundles/web/images/color-icons/handshake.fb30f50b.svg" />