Issue/21 improve the display of the buttons

src/components/Chess.js

@@ -1,23 +1,23 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import store from '../store';
 import PrimaryButtons from './PrimaryButtons.js';
 import InviteFriendDialog from './InviteFriendDialog';
-import SecondaryButtons from './SecondaryButtons.js';
+import Settings from './Settings.js';
 import Board from './Board.js';
 import History from './History';
 import MoveValidator from './MoveValidator.js';
 import '../index.css';
+import store from '../store';
 
 const Chess = ({props}) => {
   return (
     <Provider store={store}>
+      <Settings props={props} />
       <PrimaryButtons props={props} />
       <InviteFriendDialog />
       <Board props={props} />
       <History />
       {props.server ? <MoveValidator /> : null}
-      <SecondaryButtons props={props} />
     </Provider>
   );
 }

src/components/History.js

@@ -12,35 +12,31 @@ const History = () => {
   const dispatch = useDispatch();
 
   return (
-    <ButtonGroup
-      color="primary"
-      aria-label="outlined primary button group"
-      style={{justifyContent: 'center', margin: '8px' }}
-    >
-        <Button
-          color="default"
-          startIcon={<FastRewindIcon />}
-          disabled={state.board.history.length - 1 - Math.abs(state.history.back) === 0}
-          onClick={() => dispatch(goToBeginning({ back: state.board.history.length - 1}))}
-        / >
-        <Button
-          color="default"
-          startIcon={<SkipPreviousIcon />}
-          disabled={state.board.history.length - 1 - Math.abs(state.history.back) === 0}
-          onClick={() => dispatch(goBack())}>
-        </Button>
-        <Button
-          color="default"
-          startIcon={<SkipNextIcon />}
-          disabled={state.history.back === 0}
-          onClick={() => dispatch(goForward())}>
-        </Button>
-        <Button
-          color="default"
-          startIcon={<FastForwardIcon />}
-          disabled={state.history.back === 0}
-          onClick={() => dispatch(goToEnd())}>
-        </Button>
+    <ButtonGroup color="primary">
+      <Button
+        color="default"
+        startIcon={<FastRewindIcon />}
+        disabled={state.board.history.length - 1 - Math.abs(state.history.back) === 0}
+        onClick={() => dispatch(goToBeginning({ back: state.board.history.length - 1}))}
+      / >
+      <Button
+        color="default"
+        startIcon={<SkipPreviousIcon />}
+        disabled={state.board.history.length - 1 - Math.abs(state.history.back) === 0}
+        onClick={() => dispatch(goBack())}>
+      </Button>
+      <Button
+        color="default"
+        startIcon={<SkipNextIcon />}
+        disabled={state.history.back === 0}
+        onClick={() => dispatch(goForward())}>
+      </Button>
+      <Button
+        color="default"
+        startIcon={<FastForwardIcon />}
+        disabled={state.history.back === 0}
+        onClick={() => dispatch(goToEnd())}>
+      </Button>
     </ButtonGroup>
   );
 }

src/components/PrimaryButtons.js

@@ -70,10 +70,7 @@ const PrimaryButtons = ({props}) => {
   }
 
   return (
-    <ButtonGroup
-      color="primary"
-      style={{justifyContent: 'center', margin: '8px'}}
-    >
+    <ButtonGroup color="primary">
       {buttons()}
     </ButtonGroup>
   );

src/components/Settings.js

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { Button, Menu, MenuItem } from '@material-ui/core';
+import SettingsIcon from '@material-ui/icons/Settings';
+import { useDispatch, useSelector } from 'react-redux';
+import { flipBoard } from '../actions/boardActions';
+
+const Settings = ({props}) => {
+  const state = useSelector(state => state);
+  const dispatch = useDispatch();
+
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <div>
+      <Button
+        color="default"
+        onClick={handleClick}
+        startIcon={<SettingsIcon />}
+      />
+      <Menu
+        id="simple-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
+        <MenuItem
+          onClick={() => dispatch(flipBoard())}
+        >
+          Flip board
+        </MenuItem>
+      </Menu>
+    </div>
+  );
+}
+
+export default Settings;

src/index.css

@@ -1,31 +1,26 @@
 #redux-chess {
   display: flex;
   flex-direction: column;
-  text-align: center;
-  justify-content: center;
 }
 
 .board {
   font-family: FreeSerif, sans-serif;
-  border: 1px solid #ccc;
-  clear: both;
-  margin: auto;
 }
 
 .board-row {
   clear: both;
 }
 
 .square {
-  font-size: 11vh;
+  font-size: 10vh;
   text-align: center;
   float: left;
   cursor: pointer;
 }
 
 .square span {
-  height: 11vh;
-  width: 11vh;
+  height: 9vh;
+  width: 9vh;
   display: block;
 }
 
@@ -58,11 +53,11 @@
 
 @media (max-width: 1024px) {
   .square {
-    font-size: 11vw;
+    font-size: 9vw;
   }
 
   .square span {
-    height: 11vw;
-    width: 11vw;
+    height: 9vw;
+    width: 9vw;
   }
 }