Add Paper styling to modal

This commit is contained in:
nickofolas 2022-01-29 23:54:36 -06:00
parent e800886d42
commit dd77deca7b

@ -7,6 +7,7 @@ import Button from "@mui/material/Button";
import Box from "@mui/material/Box";
import Tooltip from "@mui/material/Tooltip";
import TextField from "@mui/material/TextField";
import Paper from "@mui/material/Paper";
import IconButton from "@mui/material/IconButton";
import ReplyIcon from "@mui/icons-material/Reply";
import HistoryIcon from '@mui/icons-material/History';
@ -104,6 +105,7 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
}}>
<Typography variant="h4">Customize Editor theme</Typography>
<Typography>Hover over input boxes for more information</Typography>
<Paper sx={{ p: 1, my: 1 }}>
<OptionSwitch
checked={themeCopy.base === "vs"}
onChange={(val) => {
@ -113,8 +115,8 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
text="Use light theme as base"
tooltip={
<>
If enabled, the vs light theme will be used as the
theme base, otherwise, vs-dark will be used.
If enabled, the <code>vs</code> light theme will be used as the
theme base, otherwise, <code>vs-dark</code> will be used.
</>
}
/>
@ -245,6 +247,8 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
/>
</Box>
</Box>
</Paper>
<Paper sx={{ p: 1 }}>
<TextField
multiline
fullWidth
@ -253,7 +257,7 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
value={JSON.stringify(themeCopy, undefined, 2)}
onChange={onThemeChange}
/>
<Box sx={{ my: 1 }}>
<Box sx={{ mt: 1 }}>
<Button onClick={() => {
Settings.EditorTheme = { ...themeCopy };
props.onClose()
@ -266,6 +270,7 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
startIcon={<HistoryIcon />}
>Reset to default</Button>
</Box>
</Paper>
</Modal>
)
}