Adds some basic styling

frontend/src/components/AddGameNight.jsx

@@ -1,8 +1,14 @@
 import React, { useEffect, useState } from 'react';
-import DateTime from 'react-datetime';
-import GameAdder from './GameAdder';
+import AddIcon from '@mui/icons-material/Add';
+import IconButton from '@mui/material/IconButton';
+import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import { DateTimePicker } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 
-import "react-datetime/css/react-datetime.css";
+import GameAdder from './GameAdder';
 
 function AddGameNight(props) {
   const [expanded, setExpanded] = useState(false);
@@ -68,29 +74,56 @@ function AddGameNight(props) {
 
   if(expanded) {
     return (
-      <div className="Add-GameNight">
-        <form autoComplete="off" onSubmit={e => { e.preventDefault(); }}>
-          <fieldset>
-            <legend>Gamenight</legend>
-  
-            <label for="gamename">Game name:</label>
-            <input id="gamename" name="gamename" type="text"
-              value={gameName}
-              onChange={handleNameChange} />
-            <label for="datetime">date:</label>
-            <DateTime id="datetime" onChange={onDateChange} value={date} />
-  
-            <GameAdder games={props.games} onChange={onGamesListChange}/>
+      <LocalizationProvider dateAdapter={AdapterDateFns}>
+        <div className="Add-GameNight">
+          <form autoComplete="off" onSubmit={e => { e.preventDefault(); }}>
+            <fieldset>
+              <legend>Gamenight</legend>
 
-            <button onClick={handleAddGamenight}>Submit</button>
-          </fieldset>
-        </form>
-        <button onClick={() => setExpanded(false)}>Discard</button>
-      </div>        
+              <TextField 
+                id="game-name"
+                label="Name"
+                variant="standard"
+                value={gameName}
+                onChange={handleNameChange}/>
+              
+              <DateTimePicker
+                label="Gamenight date and time"
+                variant="standard"
+                value={date}
+                onChange={onDateChange}
+                inputFormat="dd-MM-yyyy HH:mm"
+                renderInput={(params) => <TextField {...params} />}/> 
+              
+              <GameAdder games={props.games} onChange={onGamesListChange}/>
+
+              <Stack direction="row" spacing={2}>
+                <Button 
+                  variant="outlined"
+                  color="success"
+                  onClick={handleAddGamenight}>
+                  Create
+                </Button>
+                <Button 
+                  variant="outlined"
+                  color="error"
+                  onClick={() => setExpanded(false)}>
+                  Discard
+                </Button>
+              </Stack>
+            </fieldset>
+          </form>
+        </div>
+      </LocalizationProvider>        
     );
   } else {
     return (
-      <button onClick={() => setExpanded(true)}>Expand</button>
+      <IconButton  
+        aria-label="add"
+        color="success"
+        onClick={(e) => setExpanded(true)}>
+        <AddIcon />
+      </IconButton>
     );
   }
 }

frontend/src/components/Gamenight.jsx

@@ -1,38 +1,76 @@
-import * as React from 'react';
+import React, { useState } from 'react';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListSubheader from '@mui/material/ListSubheader';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+
+import moment from 'moment';
+
 
 function Gamenight(props) {
 
-    let games = props.gamenight.game_list.map(g =>
-      (
-        <li>
-          <span>{g.name}</span>
-        </li>
-      )
-    );
+  const [dense, setDense] = useState(true);
 
-    let participants = props.gamenight.participants.map(p =>
-      (
-        <li>
-          <span>{p.username}</span>
-        </li>
-      )
+  let games = props.gamenight.game_list.map(g =>
+    (
+      <ListItem>
+        <ListItemText
+          primary={g.name}
+        />
+      </ListItem>
     )
+  );
 
-    return (
-      <div>
-        <h3>{props.gamenight.name}</h3>
-        <button onClick={(e) => props.onDismis()}>x</button>
-        <span>{props.gamenight.datetime}</span>
-        <h4>Games:</h4>
-        <ul>
-          {games}
-        </ul>
-        <h4>Participants:</h4>
-        <ul>
-          {participants}
-        </ul>
-      </div>
+  let participants = props.gamenight.participants.map(p =>
+    (
+      <ListItem>
+        <ListItemText
+          primary={p.username}
+        />
+      </ListItem>
     )
+  )
+
+  return (
+    <div>
+      <IconButton  
+        aria-label="back"
+        onClick={(e) => props.onDismis()}>
+        <ArrowBackIcon />
+      </IconButton>
+
+      <Typography type="h3">
+        {props.gamenight.name}
+      </Typography>
+      <Typography type="body1">
+        When: {moment(props.gamenight.datetime).format('LL HH:mm')}
+      </Typography>
+
+      <List 
+        dense={dense}
+        aria-labelledby="games-subheader"
+        subheader={
+          <ListSubheader component="div" id="games-subheader">
+            Games:
+          </ListSubheader>
+        }>
+        {games}
+      </List>
+      <List 
+        dense={dense}
+        aria-labelledby="participants-subheader"
+        subheader={
+          <ListSubheader component="div" id="participants-subheader">
+            Participants:
+          </ListSubheader>
+        }>
+        {participants}
+      </List>
+    </div>
+  )
 }
 
 export default Gamenight

frontend/src/components/Gamenights.jsx

@@ -1,8 +1,19 @@
-import React from 'react';
+import * as React from 'react';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import ListItemText from '@mui/material/ListItemText';
+import Avatar from '@mui/material/Avatar';
+import IconButton from '@mui/material/IconButton';
+import GamesIcon from '@mui/icons-material/Games';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+import AddGameNight from './AddGameNight';
 
 function Gamenights(props) {
+  const [dense, setDense] = React.useState(false);
 
-  const DeleteGameNight = (gameId) => {
+  const DeleteGamenight = (gameId) => {
     if (props.user !== null) {
       let input = {
         game_id: gameId,
@@ -31,23 +42,52 @@ function Gamenights(props) {
     }
   }
 
-  let gamenights = props.gamenights.map(g =>
-    (
-      <li onClick={(e) => props.onSelectGamenight(g)}>
-        <span>{g.name}</span>
-        {(props.user.id === g.owner_id || props.user.role === "Admin") && 
-          <button onClick={(e) => {
+  let gamenights = props.gamenights.map(g => {
+    let secondaryAction;
+    if(props.user.id === g.owner_id || props.user.role === 'Admin') {
+      secondaryAction = (
+        <IconButton 
+          edge="end" 
+          aria-label="delete"
+          color="error"
+          onClick={(e) => {
             e.stopPropagation();
-            DeleteGameNight(g.id, g.owner)}}>x</button>
-        }
-      </li>
+            DeleteGamenight(g.id)
+          }}>
+          <DeleteIcon />
+        </IconButton>
+      )
+    }
+    return (
+      <ListItem
+        component="nav"
+        onClick={(e) => props.onSelectGamenight(g)}
+        secondaryAction={
+          secondaryAction
+        }>
+        <ListItemAvatar>
+          <Avatar>
+            <GamesIcon />
+          </Avatar>
+        </ListItemAvatar>
+        <ListItemText
+          primary={g.name}
+        />
+      </ListItem>
     )
-  );
+  });
 
   return (
-    <ul>
-      {gamenights}
-    </ul>
+    <>
+      <AddGameNight 
+        user={props.user}
+        games={props.games}
+        setFlash={props.setFlash}
+        refetchGamenights={props.refetchGamenights} />
+      <List dense={dense}>
+        {gamenights}
+      </List>
+    </>
   );
 }
 

frontend/src/components/MenuBar.jsx

@@ -1,18 +1,37 @@
-import React from 'react';
+import * as React from 'react';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import MenuIcon from '@mui/icons-material/Menu';
 
 function MenuBar(props) {
   return (
-    <ul>
-      <li>
-        <a>Gamenight</a>
-      </li>
-      <li>
-        <a>User: {props.user.username}</a>
-      </li>
-      <li>
-        <button onClick={props.onLogout}>Logout</button>
-      </li>
-    </ul>
+    <AppBar position="static">
+      <Toolbar>
+        <IconButton
+          size="large"
+          edge="start"
+          color="inherit"
+          aria-label="menu"
+          sx={{ mr: 2 }}
+        >
+          <MenuIcon />
+        </IconButton>
+        <Typography
+          variant="h6"
+          component="div"
+          sx={{ flexGrow: 1 }}>
+            Gamenight!
+        </Typography>
+        <Button 
+          color="inherit" 
+          onClick={props.onLogout}>
+            Logout
+        </Button>
+      </Toolbar>
+    </AppBar>
   );
 }