Fixed theme colors and variantsv1.4.4-beta.5

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) => (