diff options
Diffstat (limited to 'frontend')
22 files changed, 40 insertions, 60 deletions
diff --git a/frontend/src/App/Header.tsx b/frontend/src/App/Header.tsx index cfc3f3319..29c1d1a8d 100644 --- a/frontend/src/App/Header.tsx +++ b/frontend/src/App/Header.tsx @@ -64,10 +64,9 @@ const AppHeader: FunctionComponent = () => { label="System" tooltip={{ position: "left", openDelay: 2000 }} loading={offline} - color={offline ? "yellow" : undefined} + c={offline ? "yellow" : undefined} icon={faGear} size="lg" - variant="light" ></Action> </Menu.Target> <Menu.Dropdown> diff --git a/frontend/src/App/Navbar.tsx b/frontend/src/App/Navbar.tsx index 3b5ce1881..679a0e3e7 100644 --- a/frontend/src/App/Navbar.tsx +++ b/frontend/src/App/Navbar.tsx @@ -130,8 +130,7 @@ const AppNavbar: FunctionComponent = () => { <Group gap="xs"> <Action label="Change Theme" - color={dark ? "yellow" : "indigo"} - variant="subtle" + c={dark ? "yellow" : "indigo"} onClick={() => toggleColorScheme()} icon={dark ? faSun : faMoon} ></Action> @@ -139,12 +138,7 @@ const AppNavbar: FunctionComponent = () => { href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=XHHRWXT9YB7WE&source=url" target="_blank" > - <Action - label="Donate" - icon={faHeart} - variant="subtle" - color="red" - ></Action> + <Action label="Donate" icon={faHeart} c="red"></Action> </Anchor> </Group> </AppShell.Section> diff --git a/frontend/src/App/ThemeProvider.tsx b/frontend/src/App/ThemeProvider.tsx index 224791843..662a1ce69 100644 --- a/frontend/src/App/ThemeProvider.tsx +++ b/frontend/src/App/ThemeProvider.tsx @@ -1,7 +1,6 @@ import { FunctionComponent, PropsWithChildren } from "react"; import { ActionIcon, - AppShell, Badge, Button, createTheme, @@ -13,7 +12,6 @@ import "@mantine/core/styles.layer.css"; import "@mantine/notifications/styles.layer.css"; import styleVars from "@/assets/_variables.module.scss"; import actionIconClasses from "@/assets/action_icon.module.scss"; -import appShellClasses from "@/assets/app_shell.module.scss"; import badgeClasses from "@/assets/badge.module.scss"; import buttonClasses from "@/assets/button.module.scss"; import paginationClasses from "@/assets/pagination.module.scss"; @@ -39,9 +37,6 @@ const themeProvider = createTheme({ ActionIcon: ActionIcon.extend({ classNames: actionIconClasses, }), - AppShell: AppShell.extend({ - classNames: appShellClasses, - }), Badge: Badge.extend({ classNames: badgeClasses, }), diff --git a/frontend/src/assets/_bazarr.scss b/frontend/src/assets/_bazarr.scss index a2476ed12..96e44e619 100644 --- a/frontend/src/assets/_bazarr.scss +++ b/frontend/src/assets/_bazarr.scss @@ -74,3 +74,9 @@ $header-height: 64px; } } } + +:root { + @include dark { + --mantine-color-body: var(--mantine-color-dark-8); + } +} diff --git a/frontend/src/assets/action_icon.module.scss b/frontend/src/assets/action_icon.module.scss index 3bdf0c417..d23cb6ce2 100644 --- a/frontend/src/assets/action_icon.module.scss +++ b/frontend/src/assets/action_icon.module.scss @@ -1,25 +1,16 @@ @layer mantine { .root { - background-color: transparent; - - &[data-variant="light"] { - color: var(--mantine-color-dark-0); - } - - &[data-variant="dark"] { - --ai-bg: transparent; - --ai-hover: darken(var(--mantine-color-grape-light), 0.2); - } + --ai-bg: transparent; @include light { - &[data-variant="light"] { - background-color: var(--mantine-color-gray-1); - color: var(--mantine-color-dark-2); - } + color: var(--mantine-color-dark-2); + --ai-hover: var(--mantine-color-gray-1); + --ai-hover-color: var(--mantine-color-gray-1); + } - &[data-variant="dark"] { - --ai-color: var(--mantine-color-dark-filled); - } + @include dark { + color: var(--mantine-color-dark-0); + --ai-hover: var(--mantine-color-gray-8); } } } diff --git a/frontend/src/assets/app_shell.module.scss b/frontend/src/assets/app_shell.module.scss deleted file mode 100644 index 49c3f1947..000000000 --- a/frontend/src/assets/app_shell.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -@layer mantine { - .main { - @include dark { - background-color: var(--mantine-color-dark-8); - } - } -} diff --git a/frontend/src/assets/badge.module.scss b/frontend/src/assets/badge.module.scss index 2ef1b3904..4b8717fe3 100644 --- a/frontend/src/assets/badge.module.scss +++ b/frontend/src/assets/badge.module.scss @@ -3,7 +3,7 @@ background-color: transparentize($color-brand-6, 0.8); &[data-variant="warning"] { - color: lighten($color-warning-2, 1); + color: lighten($color-warning-2, 0.8); background-color: transparentize($color-warning-6, 0.8); } @@ -17,6 +17,11 @@ background-color: transparentize($color-disabled-7, 0.8); } + &[data-variant="light"] { + color: var(--mantine-color-dark-0); + background-color: transparentize($color-disabled-9, 0.8); + } + @include light { color: $color-brand-6; background-color: transparentize($color-brand-3, 0.8); diff --git a/frontend/src/components/forms/MovieUploadForm.module.scss b/frontend/src/components/forms/MovieUploadForm.module.scss deleted file mode 100644 index e69de29bb..000000000 --- a/frontend/src/components/forms/MovieUploadForm.module.scss +++ /dev/null diff --git a/frontend/src/components/forms/MovieUploadForm.tsx b/frontend/src/components/forms/MovieUploadForm.tsx index 5a5a47f06..7e3df4b33 100644 --- a/frontend/src/components/forms/MovieUploadForm.tsx +++ b/frontend/src/components/forms/MovieUploadForm.tsx @@ -243,7 +243,7 @@ const MovieUploadForm: FunctionComponent<Props> = ({ <Action label="Remove" icon={faTrash} - color="red" + c="red" onClick={() => action.remove(index)} ></Action> ); diff --git a/frontend/src/components/forms/ProfileEditForm.tsx b/frontend/src/components/forms/ProfileEditForm.tsx index 81b50cfcd..0a6471dc5 100644 --- a/frontend/src/components/forms/ProfileEditForm.tsx +++ b/frontend/src/components/forms/ProfileEditForm.tsx @@ -241,7 +241,7 @@ const ProfileEditForm: FunctionComponent<Props> = ({ <Action label="Remove" icon={faTrash} - color="red" + c="red" onClick={() => action.remove(row.index)} ></Action> ); diff --git a/frontend/src/components/forms/SeriesUploadForm.tsx b/frontend/src/components/forms/SeriesUploadForm.tsx index 31b39a8d8..99a8e8e30 100644 --- a/frontend/src/components/forms/SeriesUploadForm.tsx +++ b/frontend/src/components/forms/SeriesUploadForm.tsx @@ -309,7 +309,7 @@ const SeriesUploadForm: FunctionComponent<Props> = ({ <Action label="Remove" icon={faTrash} - color="red" + c="red" onClick={() => action.remove(index)} ></Action> ); diff --git a/frontend/src/components/modals/ManualSearchModal.tsx b/frontend/src/components/modals/ManualSearchModal.tsx index 2c764e83c..d29a2deba 100644 --- a/frontend/src/components/modals/ManualSearchModal.tsx +++ b/frontend/src/components/modals/ManualSearchModal.tsx @@ -162,8 +162,7 @@ function ManualSearchView<T extends SupportType>(props: Props<T>) { <Action label="Download" icon={faDownload} - color="brand" - variant="light" + c="brand" disabled={item === null} onClick={() => { if (!item) return; diff --git a/frontend/src/pages/Episodes/table.tsx b/frontend/src/pages/Episodes/table.tsx index c68e7b7fc..b28e0d7e8 100644 --- a/frontend/src/pages/Episodes/table.tsx +++ b/frontend/src/pages/Episodes/table.tsx @@ -169,7 +169,6 @@ const Table: FunctionComponent<Props> = ({ <Action label="Manual Search" disabled={disabled} - variant="dark" onClick={() => { modals.openContextModal(EpisodeSearchModal, { item: row.original, @@ -182,7 +181,6 @@ const Table: FunctionComponent<Props> = ({ <Action label="History" disabled={disabled} - variant="dark" onClick={() => { modals.openContextModal( EpisodeHistoryModal, diff --git a/frontend/src/pages/Movies/Details/table.tsx b/frontend/src/pages/Movies/Details/table.tsx index 0a1b4e722..eef5a52f6 100644 --- a/frontend/src/pages/Movies/Details/table.tsx +++ b/frontend/src/pages/Movies/Details/table.tsx @@ -161,7 +161,6 @@ const Table: FunctionComponent<Props> = ({ movie, profile, disabled }) => { <Action label="Subtitle Actions" disabled={isSubtitleTrack(path)} - variant="dark" icon={faEllipsis} ></Action> </SubtitleToolsMenu> diff --git a/frontend/src/pages/Movies/index.tsx b/frontend/src/pages/Movies/index.tsx index 94c98a007..1cbd14a36 100644 --- a/frontend/src/pages/Movies/index.tsx +++ b/frontend/src/pages/Movies/index.tsx @@ -87,7 +87,6 @@ const MovieView: FunctionComponent = () => { <Action label="Edit Movie" tooltip={{ position: "left" }} - variant="light" onClick={() => modals.openContextModal( ItemEditModal, diff --git a/frontend/src/pages/Series/index.tsx b/frontend/src/pages/Series/index.tsx index e36a89be6..92f63c9ab 100644 --- a/frontend/src/pages/Series/index.tsx +++ b/frontend/src/pages/Series/index.tsx @@ -87,7 +87,6 @@ const SeriesView: FunctionComponent = () => { <Action label="Edit Series" tooltip={{ position: "left" }} - variant="light" onClick={() => modals.openContextModal( ItemEditModal, diff --git a/frontend/src/pages/Settings/General/index.tsx b/frontend/src/pages/Settings/General/index.tsx index 13f8ed409..312d09d1f 100644 --- a/frontend/src/pages/Settings/General/index.tsx +++ b/frontend/src/pages/Settings/General/index.tsx @@ -93,9 +93,8 @@ const SettingsGeneralView: FunctionComponent = () => { window.isSecureContext && ( <Action label="Copy API Key" - variant="light" settingKey={settingApiKey} - color={copied ? "green" : undefined} + c={copied ? "green" : undefined} icon={copied ? faCheck : faClipboard} onClick={(update, value) => { if (value) { @@ -108,9 +107,8 @@ const SettingsGeneralView: FunctionComponent = () => { } <Action label="Regenerate" - variant="light" settingKey={settingApiKey} - color="red" + c="red" icon={faSync} onClick={(update) => { update(generateApiKey()); diff --git a/frontend/src/pages/Settings/Languages/equals.tsx b/frontend/src/pages/Settings/Languages/equals.tsx index 968550cf2..dae20a75a 100644 --- a/frontend/src/pages/Settings/Languages/equals.tsx +++ b/frontend/src/pages/Settings/Languages/equals.tsx @@ -342,7 +342,7 @@ const EqualsTable: FunctionComponent<EqualsTableProps> = () => { <Action label="Remove" icon={faTrash} - color="red" + c="red" onClick={() => remove(row.index)} ></Action> ); diff --git a/frontend/src/pages/Settings/Languages/table.tsx b/frontend/src/pages/Settings/Languages/table.tsx index 08b1bace5..29902a546 100644 --- a/frontend/src/pages/Settings/Languages/table.tsx +++ b/frontend/src/pages/Settings/Languages/table.tsx @@ -133,7 +133,6 @@ const Table: FunctionComponent = () => { label="Edit Profile" icon={faWrench} c="gray" - variant="dark" onClick={() => { modals.openContextModal(ProfileEditModal, { languages, @@ -144,7 +143,6 @@ const Table: FunctionComponent = () => { ></Action> <Action label="Remove" - variant="dark" icon={faTrash} c="red" onClick={() => action.remove(row.index)} diff --git a/frontend/src/pages/Settings/Notifications/index.tsx b/frontend/src/pages/Settings/Notifications/index.tsx index bb116ada4..54ce0d0b8 100644 --- a/frontend/src/pages/Settings/Notifications/index.tsx +++ b/frontend/src/pages/Settings/Notifications/index.tsx @@ -1,12 +1,19 @@ +// eslint-disable-next-line simple-import-sort/imports import { FunctionComponent } from "react"; import { Anchor, Blockquote, Text } from "@mantine/core"; import { Check, Layout, Message, Section } from "@/pages/Settings/components"; import { NotificationView } from "./components"; +import { faQuoteLeftAlt } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; const SettingsNotificationsView: FunctionComponent = () => { return ( <Layout name="Notifications"> - <Blockquote> + <Blockquote + bg="transparent" + mt="xl" + icon={<FontAwesomeIcon icon={faQuoteLeftAlt}></FontAwesomeIcon>} + > <Text> Thanks to caronc for his work on{" "} <Anchor diff --git a/frontend/src/pages/System/Backups/table.tsx b/frontend/src/pages/System/Backups/table.tsx index 7076e44b6..efd60f78f 100644 --- a/frontend/src/pages/System/Backups/table.tsx +++ b/frontend/src/pages/System/Backups/table.tsx @@ -81,7 +81,7 @@ const Table: FunctionComponent<Props> = ({ backups }) => { return ( <Action label="Delete" - color="red" + c="red" onClick={() => modals.openConfirmModal({ title: "Delete Backup", diff --git a/frontend/src/pages/System/Releases/index.tsx b/frontend/src/pages/System/Releases/index.tsx index 291607a6a..908e5ba5c 100644 --- a/frontend/src/pages/System/Releases/index.tsx +++ b/frontend/src/pages/System/Releases/index.tsx @@ -21,7 +21,7 @@ const SystemReleasesView: FunctionComponent = () => { useDocumentTitle("Releases - Bazarr (System)"); return ( - <Container size={600} py={12}> + <Container size="md" py={12}> <QueryOverlay result={releases}> <Stack gap="lg"> {data?.map((v, idx) => ( |