From 2efdfe3d07c304ab0e8d5d2b7cb2e8b655ea4d08 Mon Sep 17 00:00:00 2001
From: Jon Eugster <eugster.jon@gmail.com>
Date: Thu, 19 Jan 2023 14:02:10 +0100
Subject: [PATCH] format navigation buttons

---
 client/src/components/Level.tsx | 6 +++---
 client/src/index.css            | 5 +++++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Level.tsx b/client/src/components/Level.tsx
index e4b6a41..9876e42 100644
--- a/client/src/components/Level.tsx
+++ b/client/src/components/Level.tsx
@@ -25,7 +25,7 @@ import { useAppDispatch } from '../hooks';
 import { useSelector } from 'react-redux';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faUpload, faArrowRotateRight, faChevronLeft, faChevronRight, faBook, faHome } from '@fortawesome/free-solid-svg-icons'
+import { faUpload, faArrowRotateRight, faChevronLeft, faChevronRight, faBook, faHome, faArrowRight, faArrowLeft } from '@fortawesome/free-solid-svg-icons'
 
 import { styled, useTheme, Theme, CSSObject } from '@mui/material/styles';
 import { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
@@ -176,11 +176,11 @@ function Level() {
           <Button
             disabled={levelId <= 1} component={RouterLink}
             to={`/world/${worldId}/level/${levelId - 1}`}
-            sx={{ ml: 3, mt: 2, mb: 2 }} disableFocusRipple>Previous Level</Button>
+            sx={{ ml: 3, mt: 2, mb: 2 }} disableFocusRipple><FontAwesomeIcon icon={faArrowLeft}></FontAwesomeIcon>&nbsp;Previous</Button>
           <Button
             disabled={levelId >= gameInfo.data?.worldSize[worldId]}
             component={RouterLink} to={`/world/${worldId}/level/${levelId + 1}`}
-            sx={{ ml: 3, mt: 2, mb: 2 }} disableFocusRipple>Next Level</Button>
+            sx={{ ml: 3, mt: 2, mb: 2 }} disableFocusRipple>Next&nbsp;<FontAwesomeIcon icon={faArrowRight}></FontAwesomeIcon></Button>
           <Button
             component={RouterLink} to={`/`}
             sx={{ ml: 3, mt: 2, mb: 2 }} disableFocusRipple><FontAwesomeIcon icon={faHome}></FontAwesomeIcon></Button>
diff --git a/client/src/index.css b/client/src/index.css
index 28e666e..f30339b 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -24,3 +24,8 @@ code {
 .monaco-workbench > .notifications-toasts.visible {
   display: none !important;
 }
+
+/* TODO: Do this the correct way. */
+.MuiButtonBase-root {
+  margin : 0 !important;
+}