Merge branch 'main' of github.com:leanprover-community/lean4game

client/src/components/Level.tsx

@@ -152,8 +152,8 @@ function Level() {
   }, [levelId, level?.data?.title])
 
   return <>
-    <Box style={level.isLoading ? null : {display: "none"}} display="flex" alignItems="center" justifyContent="center" sx={{ height: "calc(100vh - 64px)" }}><CircularProgress /></Box>
-    <Box style={level.isLoading ? {display: "none"} : null} display="flex" className="level" sx={{ mt: 0, ml: 0, mr: 0 }} >
+    <div style={level.isLoading ? null : {display: "none"}} className="app-content loading"><CircularProgress /></div>
+    <div style={level.isLoading ? {display: "none"} : null} className="app-content level">
       <Drawer variant="permanent" open={showSidePanel} className="doc-panel">
         <DrawerHeader>
         </DrawerHeader>
@@ -193,7 +193,7 @@ function Level() {
           {/* <Infoview key={worldId + "/Level" + levelId} worldId={worldId} levelId={levelId} editor={editor} editorApi={infoProvider?.getApi()} /> */}
         </Grid>
       </Grid>
-    </Box>
+    </div>
     </>
 }
 

client/src/components/Welcome.tsx

@@ -12,7 +12,7 @@ import { useSelector } from 'react-redux';
 
 cytoscape.use( klay );
 
-import { Box, Typography, Button, CircularProgress, Grid, selectClasses } from '@mui/material';
+import { Box, Typography, CircularProgress } from '@mui/material';
 import { useGetGameInfoQuery } from '../state/api';
 import { Link } from 'react-router-dom';
 import Markdown from './Markdown';
@@ -81,7 +81,7 @@ function Welcome() {
   { gameInfo.isLoading?
     <Box display="flex" alignItems="center" justifyContent="center" sx={{ height: "calc(100vh - 64px)" }}><CircularProgress /></Box>
     :
-    <div>
+    <div className="app-content">
       <Box sx={{ m: 3 }}>
         <Typography variant="body1" component="div">
           <Markdown>{gameInfo.data?.introduction}</Markdown>