wip

frontend/src/App/ThemeProvider.tsx

@@ -1,9 +1,10 @@
-import "@mantine/core/styles.css";
-import "@mantine/notifications/styles.css";
-import { createTheme, MantineProvider } from "@mantine/core";
+import { ActionIcon, Button, createTheme, MantineProvider } from "@mantine/core";
 import { FunctionComponent, PropsWithChildren } from "react";
 import ThemeLoader from "@/App/ThemeLoader";
-import styleVars from "@/_variables.module.scss";
+import "@mantine/core/styles.layer.css";
+import "@mantine/notifications/styles.layer.css";
+import styleVars from "@/assets/_variables.module.scss";
+import buttonClasses from "@/assets/button.module.scss";
 
 const themeProvider = createTheme({
   fontFamily: "Roboto, open sans, Helvetica Neue, Helvetica, Arial, sans-serif",
@@ -22,6 +23,11 @@ const themeProvider = createTheme({
     ],
   },
   primaryColor: "brand",
+  components: {
+    Button: Button.extend({
+      classNames: buttonClasses,
+    }),
+  },
 });
 
 const ThemeProvider: FunctionComponent<PropsWithChildren> = ({ children }) => {

frontend/src/App/index.tsx

@@ -12,7 +12,7 @@ import { showNotification } from "@mantine/notifications";
 import { FunctionComponent, useEffect, useState } from "react";
 import { Outlet, useNavigate } from "react-router-dom";
 import AppHeader from "./Header";
-import styleVars from "@/_variables.module.scss";
+import styleVars from "@/assets/_variables.module.scss";
 
 const App: FunctionComponent = () => {
   const navigate = useNavigate();

frontend/src/assets/_bazarr.scss

@@ -36,9 +36,3 @@ $header-height: 64px;
     }
   }
 }
-
-button {
-  @include dark {
-    color: $color-brand-0 !important;
-  }
-}

frontend/src/assets/button.module.scss

@@ -0,0 +1,6 @@
+.root {
+  &[data-variant='danger'] {
+    background-color: var(--mantine-color-red-9);
+    color: var(--mantine-color-red-0);
+  }
+}

frontend/src/pages/Settings/components/index.tsx

@@ -56,7 +56,7 @@ export const URLTestButton: FunctionComponent<{
   }, [address, port, url, apikey, ssl]);
 
   return (
-    <Button onClick={click} color={color} title={title}>
+    <Button autoContrast onClick={click} variant={color} title={title}>
       {title}
     </Button>
   );
@@ -107,7 +107,7 @@ export const ProviderTestButton: FunctionComponent<{
   }, [testUrl]);
 
   return (
-    <Button onClick={click} color={color} title={title}>
+    <Button onClick={click} variant={color} title={title}>
       {title}
     </Button>
   );

frontend/vite.config.ts

@@ -35,8 +35,8 @@ export default defineConfig(async ({ mode, command }) => {
       preprocessorOptions: {
         scss: {
           additionalData: `
-            @import "./src/_mantine";
-            @import "./src/_bazarr";
+            @import "./src/assets/_mantine";
+            @import "./src/assets/_bazarr";
           `,
         },
       },