Add theme browser page accessible from game options

Removed the themes buttons that were in the ThemeEditorModal and only
left a "Revert to Default" button along with a link to the ThemeBrowser
page.

Split off the buttons into reusable components since they are now used
in two pages.

Display the themes in big cards with a zoomable screenshot. Applying the
theme now shows a toast with an option to undo the action.

The snackbar now allows ReactNode instead of only strings.

- Add link with details on how to create a new theme in the game.
- Add link to the theme-sharing discord channel.
- Add icons to the theme & style buttons in GameOptions
- Add "Theme Editor" button to ThemeBrowser
- Add "Style Editor" button to ThemeBrowser
- Move Styles related files into Themes folder
- Includes a modal that shows a bigger version of the screenshot.
- Change Snackbar to allow for ReactNode as the message

src/ui/React/GameOptionsRoot.tsx

@@ -22,12 +22,11 @@ import TextField from "@mui/material/TextField";
 import DownloadIcon from "@mui/icons-material/Download";
 import UploadIcon from "@mui/icons-material/Upload";
 import SaveIcon from "@mui/icons-material/Save";
+import PaletteIcon from '@mui/icons-material/Palette';
 
 import { FileDiagnosticModal } from "../../Diagnostic/FileDiagnosticModal";
 import { dialogBoxCreate } from "./DialogBox";
 import { ConfirmationModal } from "./ConfirmationModal";
-import { ThemeEditorModal } from "../../Themes/ui/ThemeEditorModal";
-import { StyleEditorModal } from "./StyleEditorModal";
 
 import { SnackbarEvents } from "./Snackbar";
 
@@ -37,6 +36,9 @@ import { formatTime } from "../../utils/helpers/formatTime";
 import { OptionSwitch } from "./OptionSwitch";
 import { DeleteGameButton } from "./DeleteGameButton";
 import { SoftResetButton } from "./SoftResetButton";
+import { IRouter } from "../Router";
+import { ThemeEditorButton } from "../../Themes/ui/ThemeEditorButton";
+import { StyleEditorButton } from "../../Themes/ui/StyleEditorButton";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -50,6 +52,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 interface IProps {
   player: IPlayer;
+  router: IRouter;
   save: () => void;
   export: () => void;
   forceKill: () => void;
@@ -74,8 +77,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
   const [timestampFormat, setTimestampFormat] = useState(Settings.TimestampsFormat);
   const [locale, setLocale] = useState(Settings.Locale);
   const [diagnosticOpen, setDiagnosticOpen] = useState(false);
-  const [themeEditorOpen, setThemeEditorOpen] = useState(false);
-  const [styleEditorOpen, setStyleEditorOpen] = useState(false);
   const [importSaveOpen, setImportSaveOpen] = useState(false);
   const [importData, setImportData] = useState<ImportData | null>(null);
 
@@ -642,9 +643,14 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
               <Button onClick={() => setDiagnosticOpen(true)}>Diagnose files</Button>
             </Tooltip>
           </Box>
-          <Box sx={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
-            <Button onClick={() => setThemeEditorOpen(true)}>Theme editor</Button>
-            <Button onClick={() => setStyleEditorOpen(true)}>Style editor</Button>
+          <Box sx={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr" }}>
+            <Tooltip title="Head to the theme browser to see a collection of prebuilt themes.">
+              <Button startIcon={<PaletteIcon />} onClick={() => props.router.toThemeBrowser()}>
+                Theme Browser
+              </Button>
+            </Tooltip>
+            <ThemeEditorButton router={props.router} />
+            <StyleEditorButton />
           </Box>
           <Box>
             <Link href="https://github.com/danielyxie/bitburner/issues/new" target="_blank">
@@ -669,8 +675,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
         </Box>
       </Grid>
       <FileDiagnosticModal open={diagnosticOpen} onClose={() => setDiagnosticOpen(false)} />
-      <ThemeEditorModal open={themeEditorOpen} onClose={() => setThemeEditorOpen(false)} />
-      <StyleEditorModal open={styleEditorOpen} onClose={() => setStyleEditorOpen(false)} />
     </div>
   );
 }

src/ui/React/Snackbar.tsx

@@ -14,6 +14,10 @@ const useStyles = makeStyles(() => ({
   snackbar: {
     // Log popup z-index increments, so let's add a padding to be well above them.
     zIndex: `${logBoxBaseZIndex + 1000} !important` as any,
+
+    "& .MuiAlert-icon": {
+      alignSelf: 'center',
+    },
   }
 }));
 
@@ -27,7 +31,7 @@ export function SnackbarProvider(props: IProps): React.ReactElement {
   );
 }
 
-export const SnackbarEvents = new EventEmitter<[string, "success" | "warning" | "error" | "info", number]>();
+export const SnackbarEvents = new EventEmitter<[string | React.ReactNode, "success" | "warning" | "error" | "info", number]>();
 
 export function Snackbar(): React.ReactElement {
   const { enqueueSnackbar, closeSnackbar } = useSnackbar();

src/ui/React/StyleEditorModal.tsx

@@ -1,165 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Modal } from "./Modal";
-
-import Button from "@mui/material/Button";
-import ButtonGroup from "@mui/material/ButtonGroup";
-import Typography from "@mui/material/Typography";
-import Paper from "@mui/material/Paper";
-import TextField from "@mui/material/TextField";
-import ReplyIcon from "@mui/icons-material/Reply";
-import SaveIcon from "@mui/icons-material/Save";
-
-import { ThemeEvents } from "../../Themes/ui/Theme";
-import { Settings } from "../../Settings/Settings";
-import { defaultStyles } from "../../Settings/Styles";
-import { Tooltip } from "@mui/material";
-import { IStyleSettings } from "../../ScriptEditor/NetscriptDefinitions";
-
-interface IProps {
-  open: boolean;
-  onClose: () => void;
-}
-
-interface FontFamilyProps {
-  value: React.CSSProperties["fontFamily"];
-  onChange: (newValue: React.CSSProperties["fontFamily"], error?: string) => void;
-  refreshId: number;
-}
-
-function FontFamilyField({ value, onChange, refreshId }: FontFamilyProps): React.ReactElement {
-  const [errorText, setErrorText] = useState<string | undefined>();
-  const [fontFamily, setFontFamily] = useState<React.CSSProperties["fontFamily"]>(value);
-
-  function update(newValue: React.CSSProperties["fontFamily"]): void {
-    setFontFamily(newValue);
-    if (!newValue) {
-      setErrorText("Must have a value");
-    } else {
-      setErrorText("");
-    }
-  }
-
-  function onTextChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    update(event.target.value);
-  }
-
-  useEffect(() => onChange(fontFamily, errorText), [fontFamily]);
-  useEffect(() => update(value), [refreshId]);
-
-  return (
-    <TextField
-      sx={{ my: 1 }}
-      label={"Font-Family"}
-      error={!!errorText}
-      value={fontFamily}
-      helperText={errorText}
-      onChange={onTextChange}
-      fullWidth
-    />
-  );
-}
-
-interface LineHeightProps {
-  value: React.CSSProperties["lineHeight"];
-  onChange: (newValue: React.CSSProperties["lineHeight"], error?: string) => void;
-  refreshId: number;
-}
-
-function LineHeightField({ value, onChange, refreshId }: LineHeightProps): React.ReactElement {
-  const [errorText, setErrorText] = useState<string | undefined>();
-  const [lineHeight, setLineHeight] = useState<React.CSSProperties["lineHeight"]>(value);
-
-  function update(newValue: React.CSSProperties["lineHeight"]): void {
-    setLineHeight(newValue);
-    if (!newValue) {
-      setErrorText("Must have a value");
-    } else if (isNaN(Number(newValue))) {
-      setErrorText("Must be a number");
-    } else {
-      setErrorText("");
-    }
-  }
-
-  function onTextChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    update(event.target.value);
-  }
-
-  useEffect(() => onChange(lineHeight, errorText), [lineHeight]);
-  useEffect(() => update(value), [refreshId]);
-
-  return (
-    <TextField
-      sx={{ my: 1 }}
-      label={"Line Height"}
-      error={!!errorText}
-      value={lineHeight}
-      helperText={errorText}
-      onChange={onTextChange}
-    />
-  );
-}
-
-export function StyleEditorModal(props: IProps): React.ReactElement {
-  const [refreshId, setRefreshId] = useState<number>(0);
-  const [error, setError] = useState<string | undefined>();
-  const [customStyle, setCustomStyle] = useState<IStyleSettings>({
-    ...Settings.styles,
-  });
-
-  function persistToSettings(styles: IStyleSettings): void {
-    Object.assign(Settings.styles, styles);
-    ThemeEvents.emit();
-  }
-
-  function saveStyles(): void {
-    persistToSettings(customStyle);
-  }
-
-  function setDefaults(): void {
-    const styles = { ...defaultStyles };
-    setCustomStyle(styles);
-    persistToSettings(styles);
-    setRefreshId(refreshId + 1);
-  }
-
-  function update(styles: IStyleSettings, errorMessage?: string): void {
-    setError(errorMessage);
-    if (!errorMessage) {
-      setCustomStyle(styles);
-    }
-  }
-
-  return (
-    <Modal open={props.open} onClose={props.onClose}>
-      <Typography variant="h6">Styles Editor</Typography>
-      <Typography>
-        WARNING: Changing styles <strong>may mess up</strong> the interface. Drastic changes are{" "}
-        <strong>NOT recommended</strong>.
-      </Typography>
-      <Paper sx={{ p: 2, my: 2 }}>
-        <FontFamilyField
-          value={customStyle.fontFamily}
-          refreshId={refreshId}
-          onChange={(value, error) => update({ ...customStyle, fontFamily: value as any }, error)}
-        />
-        <br />
-        <LineHeightField
-          value={customStyle.lineHeight}
-          refreshId={refreshId}
-          onChange={(value, error) => update({ ...customStyle, lineHeight: value as any }, error)}
-        />
-        <br />
-        <ButtonGroup sx={{ my: 1 }}>
-          <Button onClick={setDefaults} startIcon={<ReplyIcon />} color="secondary" variant="outlined">
-            Revert to Defaults
-          </Button>
-          <Tooltip title={"Save styles to settings"}>
-            <Button onClick={saveStyles} endIcon={<SaveIcon />} color={error ? "error" : "primary"} disabled={!!error}>
-              Save Modifications
-            </Button>
-          </Tooltip>
-        </ButtonGroup>
-      </Paper>
-    </Modal>
-  );
-}