feat: update styles and wording

example-party.json

@@ -0,0 +1,31 @@
+{
+  "title": "Nouveau quizz",
+  "questions": [
+    {
+      "duration": 30,
+      "title": "Question 1",
+      "choices": [
+        {
+          "title": "Réponse 1"
+        },
+        {
+          "title": "Réponse 2",
+          "valid": true
+        }
+      ]
+    },
+    {
+      "duration": 30,
+      "title": "Question 2",
+      "choices": [
+        {
+          "title": "Réponse 1"
+        },
+        {
+          "title": "Réponse 2",
+          "valid": true
+        }
+      ]
+    }
+  ]
+}

src/assets/scss/base/_global.scss

@@ -187,3 +187,7 @@ h3 {
   margin: var(--margin, 0.4em 0);
   line-height: 1.2;
 }
+
+#jsonGame {
+  font-family: monospace;
+}

src/components/Admin/AdminGames/AdminGames.js

@@ -2,14 +2,14 @@ import { useMutation, useQuery } from '@apollo/client';
 import Button from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
 import TextField from '@mui/material/TextField';
-import TextareaAutosize from '@mui/material/TextareaAutosize';
 import AdminWizard from 'components/Admin/AdminWizard/AdminWizard';
 import NetworkStatus from 'components/NetworkStatus/NetworkStatus';
 import React, { useState } from 'react';
 import { Edit, PlayCircle, Trash2 } from 'react-feather';
 import { useHistory } from 'react-router-dom';
 import CrudList from '../CrudList/CrudList';
 import { ADD_GAME, ADD_JSON_GAME, DELETE_GAME, UPDATE_GAME, USER_QUERY } from './AdminGames.actions';
+import styles from './AdminGames.module.scss';
 
 const AdminGames = () => {
   const [input, setInput] = useState('');
@@ -69,6 +69,7 @@ const AdminGames = () => {
     });
   };
 
+
   if (loading) return <div>Chargement des parties...</div>;
   if (error) return <div>Erreur lors du chargement des parties, veuillez réessayer.</div>;
 
@@ -121,12 +122,12 @@ const AdminGames = () => {
     data: gamesToRender,
     title: 'Liste des parties',
     actions: (
-      <div>
-        <Button size="small" onClick={() => {setShow("add"); setDialogOpen(true)}} variant="contained" color="primary">
+      <div className={styles.buttons}>
+        <Button size="small" onClick={() => { setShow("add"); setDialogOpen(true) }} variant="contained" color="primary">
           Ajouter une partie
         </Button>
-        <Button size="small" onClick={() => {setShow("json"); setDialogOpen(true)}} variant="contained" color="primary">
-          Ajouter un JSON
+        <Button size="small" onClick={() => { setShow("json"); setDialogOpen(true) }} variant="contained" color="primary">
+          Importer un JSON
         </Button>
       </div>
     ),
@@ -153,21 +154,24 @@ const AdminGames = () => {
   };
 
   const dataJsonDialog = {
-    title: 'Ajouter une partie',
-    description: 'Pour ajouter une partie, coller son json',
+    title: 'Importer un JSON',
+    description: ['Créer une partie à partir d\'un fichier JSON.', <br />, 'Pour le format requis, voir sur ', <a href="https://github.com/Zenika/qvgdc-app/blob/main/example-party.json" rel="noreferrer noopener" target="_blank">GitHub</a>, '.'],
     open: dialogOpen,
     closeDialog: setDialogOpen,
     completeDialog: addJsonGame,
     fields: [
-      <TextareaAutosize
+      <TextField
         key="jsonGame"
+        multiline
         onChange={(e) => setInput(e.target.value)}
         autoFocus
+        fullWidth
+        minRows="8"
         margin="dense"
         id="jsonGame"
-        placeholder="Json de la partie"
-        fullWidth
+        placeholder="{ }"
         variant="outlined"
+        className={styles.jsontextarea}
       />,
     ],
   };
@@ -176,7 +180,7 @@ const AdminGames = () => {
     <>
       <AdminWizard />
       <br />
-      <CrudList table={dataTable} dialog={show === "json" ? dataJsonDialog: dataDialog} />
+      <CrudList table={dataTable} dialog={show === "json" ? dataJsonDialog : dataDialog} />
     </>
   );
 };

src/components/Admin/AdminGames/AdminGames.module.scss

@@ -1,10 +1,10 @@
-.title {
-  width: 100%;
+.buttons {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 1em;
 }
 
-.paper p {
-  padding: 0 16px 16px;
+.jsontextarea {
+  min-width: 540px;
+  font-family: monospace;
 }

src/components/Admin/AdminWizard/AdminWizard.js

@@ -11,7 +11,7 @@ const AdminWizard = () => {
         Pour cela il faut :
       </p>
       <ol>
-        <li>Ajouter une partie;</li>
+        <li>Ajouter une partie ou importer une partie via un <strong>JSON</strong>;</li>
         <li>
           L'éditer en cliquant sur le{' '}
           <strong>