Merge pull request #84 from daithihearn/styling

Styling

Author: daithihearn

public/cards/originals/blank_card.png

@@ -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>

public/cards/originals/blank_card_outline.png

@@ -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

public/cards/thumbnails/blank_card.png

@@ -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">

public/cards/thumbnails/blank_card_outline.png

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

src/components/StartNewGame/StartNewGame.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/components/icons/RefreshingData.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>
     )
 }