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/ThemeEntry.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import Typography from "@mui/material/Typography";
+import Tooltip from "@mui/material/Tooltip";
+import PaletteSharpIcon from "@mui/icons-material/PaletteSharp";
+import { Settings } from "../../Settings/Settings";
+import { IPredefinedTheme } from "../Themes";
+import { Link, Card, CardHeader, CardContent, CardMedia, Button } from "@mui/material";
+
+interface IProps {
+  theme: IPredefinedTheme;
+  onActivated: () => void;
+  onImageClick: (src: string) => void;
+}
+
+export function ThemeEntry({ theme, onActivated, onImageClick }: IProps): React.ReactElement {
+  if (!theme) return <></>;
+  return (
+    <Card key={theme.screenshot} sx={{ width: 400, mr: 1, mb: 1 }}>
+      <CardHeader
+        action={
+          <Tooltip title="Use this theme">
+            <Button startIcon={<PaletteSharpIcon />} onClick={onActivated} variant="outlined">
+              Use
+            </Button>
+          </Tooltip>
+        }
+        title={theme.name}
+        subheader={
+          <>
+            by {theme.credit}{" "}
+            {theme.reference && (
+              <>
+                (
+                <Link href={theme.reference} target="_blank">
+                  ref
+                </Link>
+                )
+              </>
+            )}
+          </>
+        }
+        sx={{
+          color: Settings.theme.primary,
+          "& .MuiCardHeader-subheader": {
+            color: Settings.theme.secondarydark,
+          },
+          "& .MuiButton-outlined": {
+            backgroundColor: "transparent",
+          },
+        }}
+      />
+      <CardMedia
+        component="img"
+        width="400"
+        image={theme.screenshot}
+        alt={`Theme Screenshot of "${theme.name}"`}
+        sx={{
+          borderTop: `1px solid ${Settings.theme.welllight}`,
+          borderBottom: `1px solid ${Settings.theme.welllight}`,
+          cursor: "zoom-in",
+        }}
+        onClick={() => onImageClick(theme.screenshot)}
+      />
+      <CardContent>
+        <Typography
+          variant="body2"
+          color="text.secondary"
+          sx={{
+            color: Settings.theme.primarydark,
+          }}
+        >
+          {theme.description}
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+}