Merge pull request #84 from daithihearn/styling

Styling

src/components/StartNewGame/StartNewGame.tsx

@@ -102,21 +102,8 @@ const StartNewGame = () => {
                 <CardHeader tag="h2">Start a new game</CardHeader>
                 <CardBody>
                     <FormGroup>
-                        <DataTable
-                            noHeader
-                            pagination
-                            theme="solarized"
-                            data={allPlayers}
-                            columns={columns}
-                            highlightOnHover
-                            selectableRows
-                            customStyles={customStyles}
-                            onSelectedRowsChange={togglePlayer}
-                        />
-
                         <Form onSubmit={startGame}>
                             <FormGroup>
-                                <Label for="exampleText">Name</Label>
                                 <Input
                                     className="name"
                                     id="newGameName"
@@ -125,7 +112,6 @@ const StartNewGame = () => {
                                     autoComplete="off"
                                     onChange={handleNameChange}
                                     value={newGameName}
-                                    disabled={selectedPlayers.length < 2}
                                     required
                                 />
                             </FormGroup>
@@ -143,6 +129,17 @@ const StartNewGame = () => {
                                 </Button>
                             </ButtonGroup>
                         </Form>
+                        <DataTable
+                            noHeader
+                            pagination
+                            theme="solarized"
+                            data={allPlayers}
+                            columns={columns}
+                            highlightOnHover
+                            selectableRows
+                            customStyles={customStyles}
+                            onSelectedRowsChange={togglePlayer}
+                        />
                     </FormGroup>
                 </CardBody>
             </Card>

src/components/icons/RefreshingData.tsx

@@ -0,0 +1,14 @@
+import LoadingIcon from "../../assets/img/brand/loading.gif"
+
+const RefreshingData = () => {
+    return (
+        <>
+            <img
+                src={LoadingIcon}
+                className="refreshing-data"
+                alt="Refreshing data"
+            />
+        </>
+    )
+}
+export default RefreshingData

src/pages/Game/Game.tsx

@@ -13,7 +13,7 @@ import { useSnackbar } from "notistack"
 import { getHasGame, resetGame } from "../../caches/GameSlice"
 import { clearAutoPlay } from "../../caches/AutoPlaySlice"
 import { clearMyCards } from "../../caches/MyCardsSlice"
-import Loading from "../../components/icons/Loading"
+import RefreshingData from "../../components/icons/RefreshingData"
 
 const Game = () => {
     const dispatch = useAppDispatch()
@@ -44,7 +44,9 @@ const Game = () => {
     }, [id])
 
     return (
-        <PullToRefresh onRefresh={fetchData} refreshingContent={<Loading />}>
+        <PullToRefresh
+            onRefresh={fetchData}
+            refreshingContent={<RefreshingData />}>
             <div className="app carpet">
                 <div className="game_wrap">
                     <div className="game_container">

src/pages/Game/_game.scss

@@ -4,6 +4,7 @@
 
 .card {
     --cui-card-bg: ;
+    border: 0;
 }
 
 .cardNotSelected {

src/pages/Home/Home.tsx

@@ -13,8 +13,8 @@ import { getMyProfile } from "../../caches/MyProfileSlice"
 import GameService from "../../services/GameService"
 import { useSnackbar } from "notistack"
 import StatsService from "../../services/StatsService"
-import Loading from "../../components/icons/Loading"
 import { Divider } from "@mui/material"
+import RefreshingData from "../../components/icons/RefreshingData"
 
 const Home = () => {
     const dispatch = useAppDispatch()
@@ -39,7 +39,9 @@ const Home = () => {
     }, [])
 
     return (
-        <PullToRefresh onRefresh={fetchData} refreshingContent={<Loading />}>
+        <PullToRefresh
+            onRefresh={fetchData}
+            refreshingContent={<RefreshingData />}>
             <div className="app carpet">
                 <div className="game_wrap">
                     <div className="game_container">

src/pages/Layout/Layout.tsx

@@ -15,26 +15,24 @@ const Layout = () => {
     }, [isLoading, isAuthenticated])
 
     return (
-        <div>
-            <div className="main_content">
-                <span className="app" style={{ overflowX: "hidden" }}>
-                    <div className="app_body">
-                        <main className="main">
-                            {isAuthenticated && accessToken ? (
-                                <>
-                                    <DefaultHeader />
-                                    <Outlet />
-                                </>
-                            ) : (
-                                <>
-                                    <DefaultHeader />
-                                    <Loading />
-                                </>
-                            )}
-                        </main>
-                    </div>
-                </span>
-            </div>
+        <div className="main_content">
+            <span className="app" style={{ overflowX: "hidden" }}>
+                <div className="app_body">
+                    <main className="main">
+                        {isAuthenticated && accessToken ? (
+                            <>
+                                <DefaultHeader />
+                                <Outlet />
+                            </>
+                        ) : (
+                            <>
+                                <DefaultHeader />
+                                <Loading />
+                            </>
+                        )}
+                    </main>
+                </div>
+            </span>
         </div>
     )
 }

src/scss/_custom.scss

@@ -8,12 +8,14 @@ body {
 
 // Here you can add other styles
 .main_content {
-    background-image: url("/assets/img/cloth.jpg");
+    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='40' height='40' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(135)'%3E%3Crect width='100%25' height='100%25' fill='rgba(47, 133, 90,1)'/%3E%3Ccircle cx='40' cy='20' r='1' fill='%231a202c'/%3E%3Ccircle cx='0' cy='20' r='1' fill='%231a202c'/%3E%3Ccircle cx='20' cy='40' r='1' fill='%231a202c'/%3E%3Ccircle cx='20' cy='0' r='1' fill='%231a202c'/%3E%3Ccircle cx='38' cy='2' r='1' fill='%23ecc94b'/%3E%3Ccircle cx='2' cy='38' r='1' fill='%23ecc94b'/%3E%3Ccircle cx='38' cy='38' r='1' fill='%23ecc94b'/%3E%3Ccircle cx='2' cy='2' r='1' fill='%23ecc94b'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ");
+    background-color: #2f855a;
     min-height: 800px;
     position: fixed;
     width: 100%;
     height: 100vh;
     overflow: overlay;
+    padding-bottom: 100px;
 
     &_mainBody {
         width: 100%;
@@ -64,3 +66,13 @@ body {
     height: 100px;
     width: 100px;
 }
+
+.refreshing-data {
+    position: fixed;
+    top: 125px;
+    left: 50%;
+    margin-top: -50px;
+    margin-left: -50px;
+    height: 100px;
+    width: 100px;
+}