Fixed theme colors and variants

5 months ago · d719d4c6df
parent d7445bf39c
commit d719d4c6df
22 changed files with 40 additions and 60 deletions
--- 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>
--- 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>
--- 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,
    }),
--- 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);
+  }
+}
--- 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);
    }
  }
 }
--- a/frontend/src/assets/app_shell.module.scss
+++ b/frontend/src/assets/app_shell.module.scss
@ -1,7 +0,0 @@
-@layer mantine {
-  .main {
-    @include dark {
-      background-color: var(--mantine-color-dark-8);
-    }
-  }
-}
--- 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);
--- a/frontend/src/components/forms/MovieUploadForm.module.scss
+++ b/frontend/src/components/forms/MovieUploadForm.module.scss
--- 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>
          );
--- 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>
          );
--- 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>
          );
--- 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;
--- 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,
--- 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>
--- 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,
--- 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,
--- 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());
--- 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>
          );
--- 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)}
--- 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
--- 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",
--- 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) => (