From d719d4c6df0c8d8dbc71e29aabf59f5d0987ac18 Mon Sep 17 00:00:00 2001 From: Anderson Shindy Oki Date: Thu, 13 Jun 2024 11:35:35 +0900 Subject: [PATCH] Fixed theme colors and variants --- frontend/src/App/Header.tsx | 3 +-- frontend/src/App/Navbar.tsx | 10 ++------ frontend/src/App/ThemeProvider.tsx | 5 ---- frontend/src/assets/_bazarr.scss | 6 +++++ frontend/src/assets/action_icon.module.scss | 25 ++++++------------- frontend/src/assets/app_shell.module.scss | 7 ------ frontend/src/assets/badge.module.scss | 7 +++++- .../forms/MovieUploadForm.module.scss | 0 .../src/components/forms/MovieUploadForm.tsx | 2 +- .../src/components/forms/ProfileEditForm.tsx | 2 +- .../src/components/forms/SeriesUploadForm.tsx | 2 +- .../components/modals/ManualSearchModal.tsx | 3 +-- frontend/src/pages/Episodes/table.tsx | 2 -- frontend/src/pages/Movies/Details/table.tsx | 1 - frontend/src/pages/Movies/index.tsx | 1 - frontend/src/pages/Series/index.tsx | 1 - frontend/src/pages/Settings/General/index.tsx | 6 ++--- .../src/pages/Settings/Languages/equals.tsx | 2 +- .../src/pages/Settings/Languages/table.tsx | 2 -- .../pages/Settings/Notifications/index.tsx | 9 ++++++- frontend/src/pages/System/Backups/table.tsx | 2 +- frontend/src/pages/System/Releases/index.tsx | 2 +- 22 files changed, 40 insertions(+), 60 deletions(-) delete mode 100644 frontend/src/assets/app_shell.module.scss delete mode 100644 frontend/src/components/forms/MovieUploadForm.module.scss 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" > 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 = () => { toggleColorScheme()} icon={dark ? faSun : faMoon} > @@ -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" > - + 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 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 = ({ action.remove(index)} > ); 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 = ({ action.remove(row.index)} > ); 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 = ({ action.remove(index)} > ); 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(props: Props) { { 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 = ({ { modals.openContextModal(EpisodeSearchModal, { item: row.original, @@ -182,7 +181,6 @@ const Table: FunctionComponent = ({ { 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 = ({ movie, profile, disabled }) => { 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 = () => { 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 = () => { 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 && ( { if (value) { @@ -108,9 +107,8 @@ const SettingsGeneralView: FunctionComponent = () => { } { 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 = () => { remove(row.index)} > ); 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.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 ( -
+
} + > Thanks to caronc for his work on{" "} = ({ backups }) => { return ( 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 ( - + {data?.map((v, idx) => (