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/Themes/ui/ThemeEditorModal.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { Modal } from "../../ui/React/Modal";
 import Button from "@mui/material/Button";
+import ButtonGroup from "@mui/material/ButtonGroup";
 import Typography from "@mui/material/Typography";
 import Tooltip from "@mui/material/Tooltip";
 import Paper from "@mui/material/Paper";
@@ -8,15 +9,19 @@ import TextField from "@mui/material/TextField";
 import IconButton from "@mui/material/IconButton";
 import ReplyIcon from "@mui/icons-material/Reply";
 import PaletteSharpIcon from "@mui/icons-material/PaletteSharp";
+import HistoryIcon from '@mui/icons-material/History';
 import { Color, ColorPicker } from "material-ui-color";
 import { ThemeEvents } from "./Theme";
 import { Settings, defaultSettings } from "../../Settings/Settings";
-import { getPredefinedThemes } from "../Themes";
+import { defaultTheme } from "../Themes";
 import { UserInterfaceTheme } from "../../ScriptEditor/NetscriptDefinitions";
+import { IRouter } from "../../ui/Router";
+import { ThemeCollaborate } from "./ThemeCollaborate";
 
 interface IProps {
   open: boolean;
   onClose: () => void;
+  router: IRouter;
 }
 
 interface IColorEditorProps {
@@ -68,28 +73,6 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
     ...Settings.theme,
   });
 
-  const predefinedThemes = getPredefinedThemes();
-  const themes = predefinedThemes && Object.entries(predefinedThemes)
-    .map(([key, templateTheme]) => {
-      const name = templateTheme.name || key;
-      let inner = <Typography>{name}</Typography>;
-      let toolTipTitle;
-      if (templateTheme.credit) {
-        toolTipTitle = <Typography>{templateTheme.description || name} <em>by {templateTheme.credit}</em></Typography>;
-      } else if (templateTheme.description) {
-        toolTipTitle = <Typography>{templateTheme.description}</Typography>;
-      }
-      if (toolTipTitle) {
-        inner = <Tooltip title={toolTipTitle}>{inner}</Tooltip>
-      }
-      return (
-        <Button onClick={() => setTemplateTheme(templateTheme.colors)}
-          startIcon={<PaletteSharpIcon />} key={key} sx={{ mr: 1, mb: 1 }}>
-            {inner}
-        </Button>
-      );
-    }) || <></>;
-
   function setTheme(theme: UserInterfaceTheme): void {
     setCustomTheme(theme);
     Object.assign(Settings.theme, theme);
@@ -372,8 +355,18 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
         />
           <>
             <Typography sx={{ my: 1 }}>Backup your theme or share it with others by copying the string above.</Typography>
-            <Typography sx={{ my: 1 }}>Replace the current theme with a pre-built template using the buttons below.</Typography>
-            {themes}
+            <ThemeCollaborate />
+            <ButtonGroup>
+              <Tooltip title="Reverts all modification back to the default theme. This is permanent.">
+                <Button onClick={() => setTemplateTheme(defaultTheme)}
+                  startIcon={<HistoryIcon />}>
+                    Revert to Default
+                </Button>
+              </Tooltip>
+              <Tooltip title="Move over to the theme browser's page to use one of our predefined themes.">
+                <Button startIcon={<PaletteSharpIcon />} onClick={() => props.router.toThemeBrowser()}>See more themes</Button>
+              </Tooltip>
+            </ButtonGroup>
           </>
       </Paper>
     </Modal>