start replacing mui by custom css

client/src/App.tsx

@@ -7,9 +7,8 @@ import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
 
-import { AppBar, CssBaseline, Toolbar, Typography } from '@mui/material';
-
-import { useAppSelector } from './hooks';
+import './reset.css';
+import './app.css';
 
 type SetTitleType = {setTitle: (string) => void, setSubtitle: (string) => void}
 export const SetTitleContext = React.createContext<SetTitleType>({setTitle: () => {}, setSubtitle: () => {}})
@@ -19,18 +18,15 @@ function App() {
   const [subtitle, setSubtitle] = useState("")
 
   return (
-    <div className="App">
-      <CssBaseline />
-      <AppBar className="AppBar" position="sticky" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}>
-        <Toolbar sx={{ justifyContent: "space-between" }}>
-        <Typography variant="h6" noWrap component="div">
+    <div className="app">
+      <div className="app-bar">
+        <div className="app-bar-title">
           {title}
-        </Typography>
-        <Typography variant="h6" noWrap component="div">
+        </div>
+        <div className="app-bar-subtitle">
           {subtitle}
-        </Typography>
-        </Toolbar>
-      </AppBar>
+        </div>
+      </div>
       <SetTitleContext.Provider value={{setTitle, setSubtitle}}>
         <Outlet />
       </SetTitleContext.Provider>

client/src/app.css

@@ -0,0 +1,61 @@
+/* variables */
+
+:root {
+  --clr-primary: #1976d2;
+  --clr-code: rgba(0, 32, 90, 0.87);
+}
+
+
+/* General styling */
+
+body {
+  font-family: Roboto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: Roboto Mono;
+  color: var(--clr-code);
+}
+
+
+/* Hide monaco editor notifications */
+.monaco-workbench > .notifications-toasts.visible {
+  display: none !important;
+}
+
+.loading {
+  margin: auto;
+  vertical-align: middle;
+}
+
+
+/* App Bar */
+
+.app {
+  display: flex;
+  flex-direction: column;
+}
+
+.app-bar {
+  z-index: 1500;
+  flex: 0;
+  background: var(--clr-primary);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 1.1em;
+  filter: drop-shadow(0 0 5px rgba(0,0,0,0.5))
+}
+
+.app-bar-title, .app-bar-subtitle {
+  color: white;
+  font-weight: 500;
+  font-size: 1.3rem;
+}
+
+.app-content {
+  flex: 1;
+  min-height: 1fr;
+}

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>

client/src/index.css

@@ -1,31 +0,0 @@
-body {
-  margin: 0;
-  font-family: Roboto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: Roboto Mono;
-  color: rgba(0, 32, 90, 0.87);
-}
-
-.App {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.AppBar {
-  flex: 0;
-}
-
-/* Hide monaco editor notifications */
-.monaco-workbench > .notifications-toasts.visible {
-  display: none !important;
-}
-
-/* TODO: Do this the correct way. */
-.MuiButtonBase-root {
-  margin : 0 !important;
-}

client/src/index.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
-import './index.css';
 import App from './App';
 import { ConnectionContext, connection } from './connection'
 import { store } from './state/store';

client/src/reset.css

@@ -0,0 +1,59 @@
+
+/* Reset, roughly following https://piccalil.li/blog/a-modern-css-reset/ */
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margin */
+* {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+    text-decoration-skip-ink: auto;
+    text-decoration-style: dotted;
+    color: var(--clr-primary);
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+   scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}