Fixed minor style and colors broken on Mantine v7 update

* Fixed action icon styles * small fixes * fix brand color * more small fixes * fix disabled color for dark * feat: customize highlight and warning badge * chore: Remove hardcoded variables * feat: add text wrap pretty to pop over * fix: pagination position * chore: small adjustments
6 months ago · 0a0762b1cf
parent 240948e638
commit 0a0762b1cf
17 changed files with 124 additions and 24 deletions
--- a/frontend/src/App/Header.tsx
+++ b/frontend/src/App/Header.tsx
@ -52,7 +52,7 @@ const AppHeader: FunctionComponent = () => {
            size="sm"
            hiddenFrom="sm"
          ></Burger>
-          <Badge size="lg" radius="sm">
+          <Badge size="lg" radius="sm" variant="brand">
            Bazarr
          </Badge>
        </Group>
--- a/frontend/src/App/ThemeProvider.tsx
+++ b/frontend/src/App/ThemeProvider.tsx
@ -6,6 +6,7 @@ import {
  Button,
  createTheme,
  MantineProvider,
+  Pagination,
 } from "@mantine/core";
 import ThemeLoader from "@/App/ThemeLoader";
 import "@mantine/core/styles.layer.css";
@ -15,6 +16,7 @@ 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";

 const themeProvider = createTheme({
  fontFamily: "Roboto, open sans, Helvetica Neue, Helvetica, Arial, sans-serif",
@ -46,6 +48,9 @@ const themeProvider = createTheme({
    Button: Button.extend({
      classNames: buttonClasses,
    }),
+    Pagination: Pagination.extend({
+      classNames: paginationClasses,
+    }),
  },
 });

--- a/frontend/src/assets/_bazarr.scss
+++ b/frontend/src/assets/_bazarr.scss
@ -9,6 +9,42 @@ $color-brand-7: #ae3ec9;
 $color-brand-8: #9c36b5;
 $color-brand-9: #862e9c;

+// Based on Mantine Cyan
+$color-highlight-0: #e3fafc;
+$color-highlight-1: #c5f6fa;
+$color-highlight-2: #99e9f2;
+$color-highlight-3: #66d9e8;
+$color-highlight-4: #3bc9db;
+$color-highlight-5: #22b8cf;
+$color-highlight-6: #15aabf;
+$color-highlight-7: #1098ad;
+$color-highlight-8: #0c8599;
+$color-highlight-9: #0b7285;
+
+// Based on Mantine Yellow
+$color-warning-0: #fff9db;
+$color-warning-1: #fff3bf;
+$color-warning-2: #ffec99;
+$color-warning-3: #ffe066;
+$color-warning-4: #ffd43b;
+$color-warning-5: #fcc419;
+$color-warning-6: #fab005;
+$color-warning-7: #f59f00;
+$color-warning-8: #f08c00;
+$color-warning-9: #e67700;
+
+// Based on Mantine Gray
+$color-disabled-0: #f8f9fa;
+$color-disabled-1: #f1f3f5;
+$color-disabled-2: #e9ecef;
+$color-disabled-3: #dee2e6;
+$color-disabled-4: #ced4da;
+$color-disabled-5: #adb5bd;
+$color-disabled-6: #868e96;
+$color-disabled-7: #495057;
+$color-disabled-8: #343a40;
+$color-disabled-9: #212529;
+
 $header-height: 64px;

 :global {
--- a/frontend/src/assets/action_icon.module.scss
+++ b/frontend/src/assets/action_icon.module.scss
@ -1,14 +1,25 @@
@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);
+    }
+
    @include light {
      &[data-variant="light"] {
        background-color: var(--mantine-color-gray-1);
        color: var(--mantine-color-dark-2);
      }
+
+      &[data-variant="dark"] {
+        --ai-color: var(--mantine-color-dark-filled);
+      }
    }
  }
 }
--- a/frontend/src/assets/app_shell.module.scss
+++ b/frontend/src/assets/app_shell.module.scss
@ -1,5 +1,7 @@
-.main {
-  @include dark {
-    background-color: rgb(26, 27, 30);
+@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
@ -1,8 +1,40 @@
-.root {
-  background-color: var(--mantine-color-grape-light);
+@layer mantine {
+  .root {
+    background-color: transparentize($color-brand-6, 0.8);

-  @include light {
-    color: var(--mantine-color-dark-filled);
-    background-color: var(--mantine-color-grape-light);
+    &[data-variant="warning"] {
+      color: lighten($color-warning-2, 1);
+      background-color: transparentize($color-warning-6, 0.8);
+    }
+
+    &[data-variant="highlight"] {
+      color: lighten($color-highlight-2, 1);
+      background-color: transparentize($color-highlight-5, 0.8);
+    }
+
+    &[data-variant="disabled"] {
+      color: lighten($color-disabled-0, 1);
+      background-color: transparentize($color-disabled-7, 0.8);
+    }
+
+    @include light {
+      color: $color-brand-6;
+      background-color: transparentize($color-brand-3, 0.8);
+
+      &[data-variant="warning"] {
+        color: darken($color-warning-7, 1);
+        background-color: transparentize($color-warning-6, 0.8);
+      }
+
+      &[data-variant="disabled"] {
+        color: darken($color-disabled-6, 1);
+        background-color: transparentize($color-disabled-4, 0.8);
+      }
+
+      &[data-variant="highlight"] {
+        color: darken($color-highlight-6, 1);
+        background-color: transparentize($color-highlight-5, 0.8);
+      }
+    }
  }
 }
--- a/frontend/src/assets/button.module.scss
+++ b/frontend/src/assets/button.module.scss
@ -9,4 +9,10 @@
      color: var(--mantine-color-red-0);
    }
  }
+
+  .root:disabled {
+    @include dark {
+      color: var(--mantine-color-dark-9);
+    }
+  }
 }
--- a/frontend/src/assets/pagination.module.scss
+++ b/frontend/src/assets/pagination.module.scss
@ -0,0 +1,3 @@
+.control {
+  --pagination-active-bg: var(--mantine-color-brand-filled);
+}
--- a/frontend/src/components/TextPopover.tsx
+++ b/frontend/src/components/TextPopover.tsx
@ -21,7 +21,12 @@ const TextPopover: FunctionComponent<TextPopoverProps> = ({
  }

  return (
-    <Tooltip opened={hovered} label={text} {...tooltip}>
+    <Tooltip
+      opened={hovered}
+      label={text}
+      {...tooltip}
+      style={{ textWrap: "pretty" }}
+    >
      <div ref={ref}>{children}</div>
    </Tooltip>
  );
--- a/frontend/src/components/tables/PageControl.tsx
+++ b/frontend/src/components/tables/PageControl.tsx
@ -1,6 +1,7 @@
 import { FunctionComponent, useEffect } from "react";
 import { Group, Pagination, Text } from "@mantine/core";
 import { useIsLoading } from "@/contexts";
+
 interface Props {
  count: number;
  index: number;
@ -28,7 +29,7 @@ const PageControl: FunctionComponent<Props> = ({
  }, [total, goto]);

  return (
-    <Group p={16} justify="apart">
+    <Group p={16} justify="space-between">
      <Text size="sm">
        Show {start} to {end} of {total} entries
      </Text>
--- a/frontend/src/components/toolbox/Toolbox.module.scss
+++ b/frontend/src/components/toolbox/Toolbox.module.scss
@ -1,9 +1,9 @@
 .group {
  @include light {
-    color: var(--mantine-color-gray-3);
+    background-color: var(--mantine-color-gray-3);
  }

  @include dark {
-    color: var(--mantine-color-dark-5);
+    background-color: var(--mantine-color-dark-5);
  }
 }
--- a/frontend/src/components/toolbox/Toolbox.tsx
+++ b/frontend/src/components/toolbox/Toolbox.tsx
@ -10,7 +10,7 @@ declare type ToolboxComp = FunctionComponent<PropsWithChildren> & {

 const Toolbox: ToolboxComp = ({ children }) => {
  return (
-    <Group p={12} justify="apart" className={styles.group}>
+    <Group p={12} justify="space-between" className={styles.group}>
      {children}
    </Group>
  );
--- a/frontend/src/pages/Episodes/components.tsx
+++ b/frontend/src/pages/Episodes/components.tsx
@ -24,13 +24,13 @@ export const Subtitle: FunctionComponent<Props> = ({

  const disabled = subtitle.path === null;

-  const color: MantineColor | undefined = useMemo(() => {
+  const variant: MantineColor | undefined = useMemo(() => {
    if (opened && !disabled) {
-      return "cyan";
+      return "highlight";
    } else if (missing) {
-      return "yellow";
+      return "warning";
    } else if (disabled) {
-      return "gray";
+      return "disabled";
    }
  }, [disabled, missing, opened]);

@ -50,7 +50,7 @@ export const Subtitle: FunctionComponent<Props> = ({
  }, [episodeId, subtitle.code2, subtitle.path]);

  const ctx = (
-    <Badge color={color}>
+    <Badge variant={variant}>
      <Language.Text value={subtitle} long={false}></Language.Text>
    </Badge>
  );
--- a/frontend/src/pages/Episodes/table.tsx
+++ b/frontend/src/pages/Episodes/table.tsx
@ -169,7 +169,7 @@ const Table: FunctionComponent<Props> = ({
              <Action
                label="Manual Search"
                disabled={disabled}
-                color="dark"
+                variant="dark"
                onClick={() => {
                  modals.openContextModal(EpisodeSearchModal, {
                    item: row.original,
@ -182,7 +182,7 @@ const Table: FunctionComponent<Props> = ({
              <Action
                label="History"
                disabled={disabled}
-                color="dark"
+                variant="dark"
                onClick={() => {
                  modals.openContextModal(
                    EpisodeHistoryModal,
--- a/frontend/src/pages/Movies/Details/index.tsx
+++ b/frontend/src/pages/Movies/Details/index.tsx
@ -198,7 +198,6 @@ const MovieDetailView: FunctionComponent = () => {
              <Menu.Target>
                <Action
                  label="More Actions"
-                  color="dark"
                  icon={faEllipsis}
                  disabled={hasTask}
                />
--- a/frontend/src/pages/Movies/Details/table.tsx
+++ b/frontend/src/pages/Movies/Details/table.tsx
@ -161,7 +161,7 @@ const Table: FunctionComponent<Props> = ({ movie, profile, disabled }) => {
              <Action
                label="Subtitle Actions"
                disabled={isSubtitleTrack(path)}
-                color="dark"
+                variant="dark"
                icon={faEllipsis}
              ></Action>
            </SubtitleToolsMenu>
--- a/frontend/src/pages/views/ItemOverview.tsx
+++ b/frontend/src/pages/views/ItemOverview.tsx
@ -132,7 +132,7 @@ const ItemOverview: FunctionComponent<Props> = (props) => {
          flexWrap: "nowrap",
        }}
      >
-        <Grid.Col span={3} hiddenFrom="sm">
+        <Grid.Col span={3} visibleFrom="sm">
          <Image
            src={item?.poster}
            mx="auto"