From 29b056cf0500ec9dd4374c774b665be467929848 Mon Sep 17 00:00:00 2001
From: Jon Eugster <eugster.jon@gmail.com>
Date: Sun, 16 Jul 2023 20:19:46 +0200
Subject: [PATCH] fix inverted attribute

---
 client/src/components/button.tsx | 6 +++---
 client/src/components/level.tsx  | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/src/components/button.tsx b/client/src/components/button.tsx
index 1f63c77..57fe728 100644
--- a/client/src/components/button.tsx
+++ b/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>
   }
 }
diff --git a/client/src/components/level.tsx b/client/src/components/level.tsx
index be2165f..2b5c604 100644
--- a/client/src/components/level.tsx
+++ b/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>