diff options
Diffstat (limited to 'frontend/src/pages/Settings')
20 files changed, 65 insertions, 72 deletions
diff --git a/frontend/src/pages/Settings/General/index.tsx b/frontend/src/pages/Settings/General/index.tsx index 8cc5ea8c3..bec3f946f 100644 --- a/frontend/src/pages/Settings/General/index.tsx +++ b/frontend/src/pages/Settings/General/index.tsx @@ -4,7 +4,7 @@ import { faClipboard, faSync, } from "@fortawesome/free-solid-svg-icons"; -import { Group as MantineGroup, Text as MantineText } from "@mantine/core"; +import { Box, Group as MantineGroup, Text as MantineText } from "@mantine/core"; import { useClipboard } from "@mantine/hooks"; import { FunctionComponent, useState } from "react"; import { @@ -54,7 +54,7 @@ const SettingsGeneralView: FunctionComponent = () => { ></Number> <Text label="Base URL" - icon="/" + leftSection="/" settingKey="settings-general-base_url" settingOptions={{ onLoaded: (s) => s.general.base_url?.slice(1) ?? "", @@ -87,7 +87,7 @@ const SettingsGeneralView: FunctionComponent = () => { rightSectionWidth={95} rightSectionProps={{ style: { justifyContent: "flex-end" } }} rightSection={ - <MantineGroup spacing="xs" mx="xs" position="right"> + <MantineGroup gap="xs" mx="xs" justify="right"> { // Clipboard API is only available in secure contexts See: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API#interfaces window.isSecureContext && ( @@ -204,13 +204,12 @@ const SettingsGeneralView: FunctionComponent = () => { <Number label="Retention" settingKey="settings-backup-retention" - styles={{ - rightSection: { width: "4rem", justifyContent: "flex-end" }, - }} rightSection={ - <MantineText size="xs" px="sm" color="dimmed"> - Days - </MantineText> + <Box w="4rem" style={{ justifyContent: "flex-end" }}> + <MantineText size="xs" px="sm" c="dimmed"> + Days + </MantineText> + </Box> } ></Number> </Section> diff --git a/frontend/src/pages/Settings/Languages/equals.tsx b/frontend/src/pages/Settings/Languages/equals.tsx index a4fe95eee..a417059ab 100644 --- a/frontend/src/pages/Settings/Languages/equals.tsx +++ b/frontend/src/pages/Settings/Languages/equals.tsx @@ -355,7 +355,7 @@ const EqualsTable: FunctionComponent<EqualsTableProps> = () => { return ( <> <SimpleTable data={equals} columns={columns}></SimpleTable> - <Button fullWidth disabled={!canAdd} color="light" onClick={add}> + <Button fullWidth disabled={!canAdd} onClick={add}> {canAdd ? "Add Equal" : "No Enabled Languages"} </Button> </> diff --git a/frontend/src/pages/Settings/Languages/table.tsx b/frontend/src/pages/Settings/Languages/table.tsx index a1ee217e8..86a227207 100644 --- a/frontend/src/pages/Settings/Languages/table.tsx +++ b/frontend/src/pages/Settings/Languages/table.tsx @@ -70,7 +70,7 @@ const Table: FunctionComponent = () => { const items = row.value; const cutoff = row.row.original.cutoff; return ( - <Group spacing="xs" noWrap> + <Group gap="xs" wrap="nowrap"> {items.map((v) => { const isCutoff = v.id === cutoff || cutoff === anyCutoff; return ( @@ -128,7 +128,7 @@ const Table: FunctionComponent = () => { Cell: ({ row }) => { const profile = row.original; return ( - <Group spacing="xs" noWrap> + <Group gap="xs" wrap="nowrap"> <Action label="Edit Profile" icon={faWrench} @@ -163,7 +163,6 @@ const Table: FunctionComponent = () => { <Button fullWidth disabled={!canAdd} - color="light" onClick={() => { const profile = { profileId: nextProfileId, diff --git a/frontend/src/pages/Settings/Notifications/components.tsx b/frontend/src/pages/Settings/Notifications/components.tsx index 1a2b20f65..cde3f3268 100644 --- a/frontend/src/pages/Settings/Notifications/components.tsx +++ b/frontend/src/pages/Settings/Notifications/components.tsx @@ -90,7 +90,7 @@ const NotificationForm: FunctionComponent<Props> = ({ ></Textarea> </div> <Divider></Divider> - <Group position="right"> + <Group justify="right"> <MutateButton mutation={test} args={() => form.values.url}> Test </MutateButton> diff --git a/frontend/src/pages/Settings/Providers/components.tsx b/frontend/src/pages/Settings/Providers/components.tsx index 91076d7de..803550ce5 100644 --- a/frontend/src/pages/Settings/Providers/components.tsx +++ b/frontend/src/pages/Settings/Providers/components.tsx @@ -9,12 +9,12 @@ import { Text as MantineText, SimpleGrid, Stack, + AutocompleteProps, } from "@mantine/core"; import { useForm } from "@mantine/form"; import { capitalize } from "lodash"; import { FunctionComponent, - forwardRef, useCallback, useMemo, useRef, @@ -50,6 +50,11 @@ interface ProviderViewProps { settingsKey: SettingsKey; } +interface ProviderSelect { + value: string; + payload: ProviderInfo; +} + export const ProviderView: FunctionComponent<ProviderViewProps> = ({ availableOptions, settingsKey, @@ -130,17 +135,16 @@ interface ProviderToolProps { settingsKey: Readonly<SettingsKey>; } -const SelectItem = forwardRef< - HTMLDivElement, - { payload: ProviderInfo; label: string } ->(({ payload: { description }, label, ...other }, ref) => { +const SelectItem: AutocompleteProps["renderOption"] = ({ option }) => { + const provider = option as ProviderSelect; + return ( - <Stack spacing={1} ref={ref} {...other}> - <MantineText size="md">{label}</MantineText> - <MantineText size="xs">{description}</MantineText> + <Stack gap={1}> + <MantineText size="md">{provider.value}</MantineText> + <MantineText size="xs">{provider.payload.description}</MantineText> </Stack> ); -}); +}; const ProviderTool: FunctionComponent<ProviderToolProps> = ({ payload, @@ -298,19 +302,19 @@ const ProviderTool: FunctionComponent<ProviderToolProps> = ({ } }); - return <Stack spacing="xs">{elements}</Stack>; + return <Stack gap="xs">{elements}</Stack>; }, [info]); return ( <SettingsProvider value={settings}> <FormContext.Provider value={form}> <Stack> - <Stack spacing="xs"> + <Stack gap="xs"> <Selector data-autofocus searchable placeholder="Click to Select a Provider" - itemComponent={SelectItem} + renderOption={SelectItem} disabled={payload !== null} {...selectorOptions} value={info} @@ -323,7 +327,7 @@ const ProviderTool: FunctionComponent<ProviderToolProps> = ({ </div> </Stack> <Divider></Divider> - <Group position="right"> + <Group justify="right"> <Button hidden={!payload} color="red" onClick={deletePayload}> Delete </Button> diff --git a/frontend/src/pages/Settings/Radarr/index.tsx b/frontend/src/pages/Settings/Radarr/index.tsx index 8cd038ab8..8805aeed8 100644 --- a/frontend/src/pages/Settings/Radarr/index.tsx +++ b/frontend/src/pages/Settings/Radarr/index.tsx @@ -30,7 +30,7 @@ const SettingsRadarrView: FunctionComponent = () => { <Number label="Port" settingKey="settings-radarr-port"></Number> <Text label="Base URL" - icon="/" + leftSection="/" settingKey="settings-radarr-base_url" settingOptions={{ onLoaded: (s) => s.radarr.base_url?.slice(1) ?? "", diff --git a/frontend/src/pages/Settings/Sonarr/index.tsx b/frontend/src/pages/Settings/Sonarr/index.tsx index 1d2125568..0f60d70a8 100644 --- a/frontend/src/pages/Settings/Sonarr/index.tsx +++ b/frontend/src/pages/Settings/Sonarr/index.tsx @@ -32,7 +32,7 @@ const SettingsSonarrView: FunctionComponent = () => { <Number label="Port" settingKey="settings-sonarr-port"></Number> <Text label="Base URL" - icon="/" + leftSection="/" settingKey="settings-sonarr-base_url" settingOptions={{ onLoaded: (s) => s.sonarr.base_url?.slice(1) ?? "", diff --git a/frontend/src/pages/Settings/Subtitles/index.tsx b/frontend/src/pages/Settings/Subtitles/index.tsx index f2dec69ac..c4dffd227 100644 --- a/frontend/src/pages/Settings/Subtitles/index.tsx +++ b/frontend/src/pages/Settings/Subtitles/index.tsx @@ -501,7 +501,7 @@ const SettingsSubtitlesView: FunctionComponent = () => { label="Command" settingKey="settings-general-postprocessing_cmd" ></Text> - <Table highlightOnHover fontSize="sm"> + <Table highlightOnHover fs="sm"> <tbody>{commandOptionElements}</tbody> </Table> </CollapseBox> diff --git a/frontend/src/pages/Settings/components/Card.module.scss b/frontend/src/pages/Settings/components/Card.module.scss new file mode 100644 index 000000000..746e55e65 --- /dev/null +++ b/frontend/src/pages/Settings/components/Card.module.scss @@ -0,0 +1,9 @@ +.card { + border-radius: var(--mantine-radius-sm); + border: 1px solid var(--mantine-color-gray-7); + + &:hover { + box-shadow: var(--mantine-shadow-md); + border: 1px solid $color-brand-5; + } +} diff --git a/frontend/src/pages/Settings/components/Card.tsx b/frontend/src/pages/Settings/components/Card.tsx index 4f3bd4fbf..6e4b58f47 100644 --- a/frontend/src/pages/Settings/components/Card.tsx +++ b/frontend/src/pages/Settings/components/Card.tsx @@ -1,30 +1,8 @@ import { faPlus } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - Center, - createStyles, - Stack, - Text, - UnstyledButton, -} from "@mantine/core"; +import { Center, Stack, Text, UnstyledButton } from "@mantine/core"; import { FunctionComponent } from "react"; - -const useCardStyles = createStyles((theme) => { - return { - card: { - borderRadius: theme.radius.sm, - border: `1px solid ${theme.colors.gray[7]}`, - - "&:hover": { - boxShadow: theme.shadows.md, - border: `1px solid ${theme.colors.brand[5]}`, - }, - }, - stack: { - height: "100%", - }, - }; -}); +import styles from "./Card.module.scss"; interface CardProps { header?: string; @@ -39,16 +17,15 @@ export const Card: FunctionComponent<CardProps> = ({ plus, onClick, }) => { - const { classes } = useCardStyles(); return ( - <UnstyledButton p="lg" onClick={onClick} className={classes.card}> + <UnstyledButton p="lg" onClick={onClick} className={styles.card}> {plus ? ( <Center> <FontAwesomeIcon size="2x" icon={faPlus}></FontAwesomeIcon> </Center> ) : ( - <Stack className={classes.stack} spacing={0} align="flex-start"> - <Text weight="bold">{header}</Text> + <Stack h="100%" gap={0} align="flex-start"> + <Text fw="bold">{header}</Text> <Text hidden={description === undefined}>{description}</Text> </Stack> )} diff --git a/frontend/src/pages/Settings/components/Layout.tsx b/frontend/src/pages/Settings/components/Layout.tsx index b20c8092b..5fb6dbbed 100644 --- a/frontend/src/pages/Settings/components/Layout.tsx +++ b/frontend/src/pages/Settings/components/Layout.tsx @@ -73,7 +73,7 @@ const Layout: FunctionComponent<Props> = (props) => { icon={faSave} loading={isMutating} disabled={totalStagedCount === 0} - rightIcon={ + rightSection={ <Badge size="xs" radius="sm" hidden={totalStagedCount === 0}> {totalStagedCount} </Badge> diff --git a/frontend/src/pages/Settings/components/LayoutModal.tsx b/frontend/src/pages/Settings/components/LayoutModal.tsx index cb4d5a1b5..6150295e4 100644 --- a/frontend/src/pages/Settings/components/LayoutModal.tsx +++ b/frontend/src/pages/Settings/components/LayoutModal.tsx @@ -74,7 +74,7 @@ const LayoutModal: FunctionComponent<Props> = (props) => { <Space h="md" /> <Divider></Divider> <Space h="md" /> - <Group position="right"> + <Group justify="right"> <Button type="submit" disabled={totalStagedCount === 0} diff --git a/frontend/src/pages/Settings/components/Message.tsx b/frontend/src/pages/Settings/components/Message.tsx index 301df7bab..eac84131b 100644 --- a/frontend/src/pages/Settings/components/Message.tsx +++ b/frontend/src/pages/Settings/components/Message.tsx @@ -12,7 +12,7 @@ export const Message: FunctionComponent<Props> = ({ children, }) => { return ( - <Text size="sm" color={type === "info" ? "dimmed" : "yellow"} my={0}> + <Text size="sm" c={type === "info" ? "dimmed" : "yellow"} my={0}> {children} </Text> ); diff --git a/frontend/src/pages/Settings/components/Section.test.tsx b/frontend/src/pages/Settings/components/Section.test.tsx index e7f270e0d..850a47671 100644 --- a/frontend/src/pages/Settings/components/Section.test.tsx +++ b/frontend/src/pages/Settings/components/Section.test.tsx @@ -1,4 +1,4 @@ -import { rawRender, screen } from "@/tests"; +import { render, screen } from "@/tests"; import { Text } from "@mantine/core"; import { describe, it } from "vitest"; import { Section } from "./Section"; @@ -6,7 +6,7 @@ import { Section } from "./Section"; describe("Settings section", () => { const header = "Section Header"; it("should show header", () => { - rawRender(<Section header="Section Header"></Section>); + render(<Section header="Section Header"></Section>); expect(screen.getByText(header)).toBeDefined(); expect(screen.getByRole("separator")).toBeDefined(); @@ -14,7 +14,7 @@ describe("Settings section", () => { it("should show children", () => { const text = "Section Child"; - rawRender( + render( <Section header="Section Header"> <Text>{text}</Text> </Section>, @@ -26,7 +26,7 @@ describe("Settings section", () => { it("should work with hidden", () => { const text = "Section Child"; - rawRender( + render( <Section header="Section Header" hidden> <Text>{text}</Text> </Section>, diff --git a/frontend/src/pages/Settings/components/Section.tsx b/frontend/src/pages/Settings/components/Section.tsx index 36f56ff8d..7c5727bf0 100644 --- a/frontend/src/pages/Settings/components/Section.tsx +++ b/frontend/src/pages/Settings/components/Section.tsx @@ -14,7 +14,7 @@ export const Section: FunctionComponent<Props> = ({ children, }) => { return ( - <Stack hidden={hidden} spacing="xs" my="lg"> + <Stack hidden={hidden} gap="xs" my="lg"> <Title order={4}>{header}</Title> <Divider></Divider> {children} diff --git a/frontend/src/pages/Settings/components/collapse.tsx b/frontend/src/pages/Settings/components/collapse.tsx index 1dcffbd97..c598105bd 100644 --- a/frontend/src/pages/Settings/components/collapse.tsx +++ b/frontend/src/pages/Settings/components/collapse.tsx @@ -31,7 +31,7 @@ const CollapseBox: FunctionComponent<Props> = ({ return ( <Collapse in={open} pl={indent ? "md" : undefined}> - <Stack spacing="xs">{children}</Stack> + <Stack gap="xs">{children}</Stack> </Collapse> ); }; diff --git a/frontend/src/pages/Settings/components/forms.test.tsx b/frontend/src/pages/Settings/components/forms.test.tsx index 19c66ade0..26974bad9 100644 --- a/frontend/src/pages/Settings/components/forms.test.tsx +++ b/frontend/src/pages/Settings/components/forms.test.tsx @@ -1,4 +1,4 @@ -import { rawRender, RenderOptions, screen } from "@/tests"; +import { render, RenderOptions, screen } from "@/tests"; import { useForm } from "@mantine/form"; import { FunctionComponent, PropsWithChildren, ReactElement } from "react"; import { describe, it } from "vitest"; @@ -18,7 +18,7 @@ const FormSupport: FunctionComponent<PropsWithChildren> = ({ children }) => { const formRender = ( ui: ReactElement, options?: Omit<RenderOptions, "wrapper">, -) => rawRender(ui, { wrapper: FormSupport, ...options }); +) => render(<FormSupport>{ui}</FormSupport>); describe("Settings form", () => { describe("number component", () => { diff --git a/frontend/src/pages/Settings/components/forms.tsx b/frontend/src/pages/Settings/components/forms.tsx index 3e1d3f12f..1d65b0375 100644 --- a/frontend/src/pages/Settings/components/forms.tsx +++ b/frontend/src/pages/Settings/components/forms.tsx @@ -38,6 +38,11 @@ export const Number: FunctionComponent<NumberProps> = (props) => { if (val === "") { val = 0; } + + if (typeof val === "string") { + return update(+val); + } + update(val); }} ></NumberInput> diff --git a/frontend/src/pages/Settings/components/index.tsx b/frontend/src/pages/Settings/components/index.tsx index 99d1658bc..6ac9cb86c 100644 --- a/frontend/src/pages/Settings/components/index.tsx +++ b/frontend/src/pages/Settings/components/index.tsx @@ -56,7 +56,7 @@ export const URLTestButton: FunctionComponent<{ }, [address, port, url, apikey, ssl]); return ( - <Button onClick={click} color={color} title={title}> + <Button autoContrast onClick={click} variant={color} title={title}> {title} </Button> ); @@ -107,7 +107,7 @@ export const ProviderTestButton: FunctionComponent<{ }, [testUrl]); return ( - <Button onClick={click} color={color} title={title}> + <Button onClick={click} variant={color} title={title}> {title} </Button> ); diff --git a/frontend/src/pages/Settings/components/pathMapper.tsx b/frontend/src/pages/Settings/components/pathMapper.tsx index 8bb3514b7..38fbb27e9 100644 --- a/frontend/src/pages/Settings/components/pathMapper.tsx +++ b/frontend/src/pages/Settings/components/pathMapper.tsx @@ -141,7 +141,7 @@ export const PathMappingTable: FunctionComponent<TableProps> = ({ type }) => { columns={columns} data={data} ></SimpleTable> - <Button fullWidth color="light" onClick={addRow}> + <Button fullWidth onClick={addRow}> Add </Button> </> |