fix more styling

my-app/src/Components/Views/StartMenu/StartMenu.tsx

@@ -158,7 +158,6 @@ const Start = ({
             defaultValue={4}
             getAriaValueText={valuetext}
             step={null}
-            valueLabelDisplay="auto"
             marks={playerMarks}
             onChange={(e, value) => {
               setPlayerOptions({
@@ -176,7 +175,6 @@ const Start = ({
             defaultValue={40}
             getAriaValueText={valuetext}
             step={10}
-            valueLabelDisplay="auto"
             marks={healthMarks}
             onChange={(e, value) =>
               setPlayerOptions({

my-app/src/Data/theme.ts

@@ -19,8 +19,43 @@ export const theme = createTheme({
       disabled: '#5E714C',
     },
     common: {
-      white: '#5E714C',
+      white: '#ffffff',
       black: '#000000',
     },
   },
+  components: {
+    MuiSlider: {
+      styleOverrides: {
+        root: {
+          marginBottom: '4em',
+        },
+        markLabel: {
+          fontSize: '1.5em',
+          color: '#F5F5F5',
+        },
+        valueLabel: {
+          display: 'none',
+          color: '#F5F5F5',
+          background: '#5E714C',
+        },
+        track: {
+          height: '1em',
+        },
+        rail: {
+          height: '1em',
+        },
+        mark: {
+          markerStart: 'none',
+          markerEnd: 'none',
+          width: '0.5em',
+          height: '0.5em',
+          borderRadius: '50%',
+        },
+        thumb: {
+          width: '1.7em',
+          height: '1.7em',
+        },
+      },
+    },
+  },
 });