disable undo button

client/src/app.css

@@ -2,6 +2,8 @@
 
 :root {
   --clr-primary: #1976d2;
+  --clr-light-gray: #ddd;
+  --clr-dark-gray: #aaa;
   --clr-code: rgba(0, 32, 90, 0.87);
   --ff-primary: Roboto;
   --ff-code: "Roboto Mono";
@@ -54,7 +56,13 @@ code {
 }
 
 .btn-disabled, .btn[disabled] {
-  color: #aaa;
+  color: var(--clr-dark-gray);
+  background: var(--clr-light-gray);
+}
+
+.btn-inverted.btn-disabled, .btn-inverted.btn[disabled] {
+  color: var(--clr-dark-gray);
+  background: white;
 }
 
 /* App Bar */

client/src/components/Level.tsx

@@ -58,6 +58,7 @@ function Level() {
 
   const [commandLineMode, setCommandLineMode] = useState(true)
   const [showSidePanel, setShowSidePanel] = useState(true)
+  const [canUndo, setCanUndo] = useState(true)
 
   const toggleSidePanel = () => {
     setShowSidePanel(!showSidePanel)
@@ -114,6 +115,8 @@ function Level() {
 
   const onDidChangeContent = (code) => {
     dispatch(codeEdited({world: worldId, level: levelId, code}))
+
+    setCanUndo(code.trim() !== "")
   }
 
   const initialCode = useSelector(selectCode(worldId, levelId))
@@ -157,7 +160,7 @@ function Level() {
       </div>
       <div className="info-panel">
         <div className="input-mode-switch">
-          {commandLineMode && <button className="btn" onClick={handleUndo}><FontAwesomeIcon icon={faRotateLeft} /> Undo</button>}
+          {commandLineMode && <button className="btn" onClick={handleUndo} disabled={!canUndo}><FontAwesomeIcon icon={faRotateLeft} /> Undo</button>}
           <FormGroup>
             <FormControlLabel control={<Switch onChange={(ev) => { setCommandLineMode(!commandLineMode) }} />} label="Editor mode" />
           </FormGroup>