Styling, descriptions for inputs

This commit is contained in:
2025-09-21 17:38:42 +02:00
parent 4decfff9ff
commit 51e284985c
2 changed files with 10 additions and 4 deletions

View File

@@ -3,7 +3,7 @@ import {SettingsContext, SettingsItem} from './Settings.tsx';
import {ApiContext} from '../../contexts/ApiContext.tsx'; import {ApiContext} from '../../contexts/ApiContext.tsx';
import TButton from "../Inputs/TButton.tsx"; import TButton from "../Inputs/TButton.tsx";
import {LibraryRefreshSetting, PatchLibraryRefreshRecord} from "../../api/data-contracts.ts"; import {LibraryRefreshSetting, PatchLibraryRefreshRecord} from "../../api/data-contracts.ts";
import {Input, Radio, RadioGroup} from "@mui/joy"; import {Input, Radio, RadioGroup, Typography} from "@mui/joy";
export default function LibraryRefresh(): ReactNode { export default function LibraryRefresh(): ReactNode {
const settings = useContext(SettingsContext); const settings = useContext(SettingsContext);
@@ -35,11 +35,13 @@ export default function LibraryRefresh(): ReactNode {
return ( return (
<SettingsItem title={'Library Refresh'}> <SettingsItem title={'Library Refresh'}>
<Typography level={"body-md"}>Refresh after</Typography>
<RadioGroup defaultValue={value.setting} onChange={onSettingChanged}> <RadioGroup defaultValue={value.setting} onChange={onSettingChanged}>
{Object.keys(LibraryRefreshSetting).map(e => ( {Object.keys(LibraryRefreshSetting).map(e => (
<Radio value={e}>{e}</Radio> <Radio value={e} label={e} />
))} ))}
</RadioGroup> </RadioGroup>
<Typography level={"body-md"}>When {LibraryRefreshSetting.WhileDownloading} refresh every x-minutes:</Typography>
<Input defaultValue={value.refreshLibraryWhileDownloadingEveryMinutes??undefined} onChange={onMinutesChanged} type={"number"} /> <Input defaultValue={value.refreshLibraryWhileDownloadingEveryMinutes??undefined} onChange={onMinutesChanged} type={"number"} />
<TButton onClick={updateSetting}>Update</TButton> <TButton onClick={updateSetting}>Update</TButton>
</SettingsItem> </SettingsItem>

View File

@@ -8,7 +8,7 @@ import {
DialogContent, DialogContent,
DialogTitle, DialogTitle,
Modal, Modal,
ModalDialog, ModalDialog, Stack,
} from '@mui/joy'; } from '@mui/joy';
import './Settings.css'; import './Settings.css';
import * as React from 'react'; import * as React from 'react';
@@ -82,7 +82,11 @@ export function SettingsItem({ title, children }: { title: string; children: Rea
return ( return (
<Accordion> <Accordion>
<AccordionSummary>{title}</AccordionSummary> <AccordionSummary>{title}</AccordionSummary>
<AccordionDetails>{children}</AccordionDetails> <AccordionDetails>
<Stack gap={1} direction="column">
{children}
</Stack>
</AccordionDetails>
</Accordion> </Accordion>
); );
} }