convert milestones to mui

src/Milestones/ui/MilestonesRoot.tsx

@@ -3,6 +3,9 @@ import { Milestones } from "../Milestones";
 import { Milestone } from "../Milestone";
 import * as React from "react";
 
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+
 interface IProps {
   player: IPlayer;
 }
@@ -21,25 +24,25 @@ export function MilestonesRoot(props: IProps): JSX.Element {
   const milestones = Milestones.map((milestone: Milestone, i: number) => {
     if (i <= n + 1) {
       return (
-        <ul key={i}>
-          <p>
-            [{milestone.fulfilled(props.player) ? "x" : " "}] {milestone.title}
-          </p>
-        </ul>
+        <Typography key={i}>
+          [{milestone.fulfilled(props.player) ? "x" : " "}] {milestone.title}
+        </Typography>
       );
     }
   });
   return (
-    <div className="milestones-container">
-      <h1>Milestones</h1>
-      <p>
-        Milestones don't reward you for completing them. They are here to guide you if you're lost. They will reset when
-        you install Augmentations.
-      </p>
-      <br />
+    <>
+      <Typography variant="h4">Milestones</Typography>
+      <Box mx={2}>
+        <Typography>
+          Milestones don't reward you for completing them. They are here to guide you if you're lost. They will reset
+          when you install Augmentations.
+        </Typography>
+        <br />
 
-      <h2>Completing fl1ght.exe</h2>
-      <li>{milestones}</li>
-    </div>
+        <Typography>Completing fl1ght.exe</Typography>
+        {milestones}
+      </Box>
+    </>
   );
 }