convert Create Program to mui

src/Programs/ui/ProgramsRoot.tsx

@@ -2,6 +2,9 @@ import React, { useState, useEffect } from "react";
 import { IPlayer } from "../../PersonObjects/IPlayer";
 import { getAvailableCreatePrograms } from "../ProgramHelpers";
 
+import { Box, ButtonGroup, Tooltip, Typography } from "@material-ui/core";
+import Button from "@material-ui/core/Button";
+
 interface IProps {
   player: IPlayer;
 }
@@ -19,34 +22,29 @@ export function ProgramsRoot(props: IProps): React.ReactElement {
 
   return (
     <>
-      <p id="create-program-page-text">
-        This page displays any programs that you are able to create. Writing the code for a program takes time, which
-        can vary based on how complex the program is. If you are working on creating a program you can cancel at any
-        time. Your progress will be saved and you can continue later.
-      </p>
+      <div>
+        <Box>
+          <Typography>
+            This page displays any programs that you are able to create. Writing the code for a program takes time, which
+            can vary based on how complex the program is. If you are working on creating a program you can cancel at any
+            time. Your progress will be saved and you can continue later.
+          </Typography>
+        </Box>
+        <ButtonGroup>
+          {getAvailableCreatePrograms(props.player).map((program) => {
+            const create = program.create;
+            if (create === null) return <></>;
 
-      <ul id="create-program-list">
-        {getAvailableCreatePrograms(props.player).map((program) => {
-          const create = program.create;
-          if (create === null) return <></>;
-
-          return (
-            <a
-              key={program.name}
-              className="a-link-button tooltip"
-              onClick={() => props.player.startCreateProgramWork(program.name, create.time, create.level)}
-            >
-              {program.name}
-              <span className="tooltiptext">{create.tooltip}</span>
-            </a>
-          );
-        })}
-      </ul>
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
+            return (
+              <Tooltip title={create.tooltip}>
+                <Button onClick={() => props.player.startCreateProgramWork(program.name, create.time, create.level)}>
+                {program.name}
+                </Button>
+              </Tooltip>
+            )
+          })}
+        </ButtonGroup>
+      </div>
     </>
-  );
+  )
 }

src/engine.jsx

@@ -152,7 +152,7 @@ const Engine = {
     Engine.Display.content.style.display = "block";
     routing.navigateTo(Page.CreateProgram);
     MainMenuLinks.CreateProgram.classList.add("active");
-    ReactDOM.render(<ProgramsRoot player={Player} />, Engine.Display.content);
+    ReactDOM.render(<Theme><ProgramsRoot player={Player} /></Theme>, Engine.Display.content);
   },
 
   loadFactionsContent: function () {