mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-11-26 17:43:48 +01:00
a26b9c8dcf
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
78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
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>
|
|
);
|
|
}
|