convert blade to mui

src/ui/React/CinematicLine.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import Typography from "@mui/material/Typography";
 
 interface IProps {
   text: string;
@@ -34,10 +35,10 @@ export function CinematicLine(props: IProps): React.ReactElement {
   });
   return (
     <>
-      <pre>
+      <Typography>
         {props.text.slice(0, length)}
         {!done && <span>&#9608;</span>}
-      </pre>
+      </Typography>
     </>
   );
 }

src/ui/React/CinematicText.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 
 import { CinematicLine } from "./CinematicLine";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
 
 interface IProps {
   lines: string[];
@@ -24,14 +26,10 @@ export function CinematicText(props: IProps): React.ReactElement {
   return (
     <div>
       {props.lines.slice(0, i).map((line, i) => (
-        <pre key={i}>{line}</pre>
+        <Typography key={i}>{line}</Typography>
       ))}
       {props.lines.length > i && <CinematicLine key={i} text={props.lines[i]} onDone={advance} />}
-      {!props.auto && props.onDone && done && (
-        <button className="std-button" onClick={props.onDone}>
-          Continue ...
-        </button>
-      )}
+      {!props.auto && props.onDone && done && <Button onClick={props.onDone}>Continue ...</Button>}
     </div>
   );
 }

src/ui/React/Theme.tsx

@@ -261,6 +261,16 @@ export function refreshTheme(): void {
           },
         },
       },
+      MuiTab: {
+        styleOverrides: {
+          textColorPrimary: {
+            color: Settings.theme.secondary,
+            "&.Mui-selected": {
+              color: Settings.theme.primary,
+            },
+          },
+        },
+      },
     },
   });
 }