fix inverted attribute

client/src/components/button.tsx

@@ -3,13 +3,13 @@ import { Link, LinkProps } from "react-router-dom";
 
 export interface ButtonProps extends LinkProps {
   disabled?: boolean
-  inverted?: boolean
+  inverted?: string // Apparently "inverted" in DOM cannot be `boolean` but must be `inverted`
 }
 
 export function Button(props: ButtonProps) {
   if (props.disabled) {
-    return <span className={`btn btn-disabled ${props.inverted ? 'btn-inverted' : ''}`} {...props}>{props.children}</span>
+    return <span className={`btn btn-disabled ${props.inverted === "true" ? 'btn-inverted' : ''}`} {...props}>{props.children}</span>
   } else {
-    return <Link className={`btn ${props.inverted ? 'btn-inverted' : ''}`} {...props}>{props.children}</Link>
+    return <Link className={`btn ${props.inverted === "true" ? 'btn-inverted' : ''}`} {...props}>{props.children}</Link>
   }
 }

client/src/components/level.tsx

@@ -328,12 +328,12 @@ function LevelAppBar({isLoading, levelId, worldId, levelTitle}) {
       <span className="app-bar-title">
         {levelTitle}
       </span>
-        <Button disabled={levelId <= 0} inverted={true} to=""
+        <Button disabled={levelId <= 0} inverted="true" to=""
           onClick={(ev) => { setCommandLineMode(!commandLineMode) }}>Editor</Button>
-      <Button disabled={levelId <= 0} inverted={true}
+      <Button disabled={levelId <= 0} inverted="true"
         to={`/${gameId}/world/${worldId}/level/${levelId - 1}`}
         ><FontAwesomeIcon icon={faArrowLeft} />&nbsp;Previous</Button>
-      <Button disabled={levelId >= gameInfo.data?.worldSize[worldId]} inverted={true}
+      <Button disabled={levelId >= gameInfo.data?.worldSize[worldId]} inverted="true"
         to={`/${gameId}/world/${worldId}/level/${levelId + 1}`}
         >Next&nbsp;<FontAwesomeIcon icon={faArrowRight} /></Button>
     </div>