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

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>

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,
+    }),
   },
 });
 

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 {

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);
+      }
     }
   }
 }

frontend/src/assets/app_shell.module.scss

@@ -1,5 +1,7 @@
-.main {
+@layer mantine {
+  .main {
     @include dark {
-    background-color: rgb(26, 27, 30);
+      background-color: var(--mantine-color-dark-8);
+    }
   }
 }

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);
+
+    &[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: var(--mantine-color-dark-filled);
-    background-color: var(--mantine-color-grape-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);
+      }
+    }
   }
 }

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);
+    }
+  }
 }

frontend/src/assets/pagination.module.scss

@@ -0,0 +1,3 @@
+.control {
+  --pagination-active-bg: var(--mantine-color-brand-filled);
+}

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>
   );

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>

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);
   }
 }

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>
   );

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>
   );

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,

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}
                 />

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>

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"