update specific styles

frontend/src/App/ThemeProvider.tsx

@@ -1,15 +1,12 @@
-import {
-  ActionIcon,
-  Button,
-  createTheme,
-  MantineProvider,
-} from "@mantine/core";
+import { ActionIcon, Badge, Button, createTheme, MantineProvider } from "@mantine/core";
 import { FunctionComponent, PropsWithChildren } from "react";
 import ThemeLoader from "@/App/ThemeLoader";
 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";
+import actionIconClasses from "@/assets/action_icon.module.scss";
+import badgeClasses from "@/assets/badge.module.scss";
 
 const themeProvider = createTheme({
   fontFamily: "Roboto, open sans, Helvetica Neue, Helvetica, Arial, sans-serif",
@@ -32,6 +29,12 @@ const themeProvider = createTheme({
     Button: Button.extend({
       classNames: buttonClasses,
     }),
+    ActionIcon: ActionIcon.extend({
+      classNames: actionIconClasses,
+    }),
+    Badge: Badge.extend({
+      classNames: badgeClasses,
+    }),
   },
 });
 

frontend/src/assets/action_icon.module.scss

@@ -0,0 +1,16 @@
+@layer mantine {
+  .root {
+    @include dark {
+      &[data-variant="light"] {
+        color: var(--mantine-color-dark-0);
+      }
+    }
+
+    @include light {
+      &[data-variant="light"] {
+        background-color: var(--mantine-color-gray-1);
+        color: var(--mantine-color-dark-2);
+      }
+    }
+  }
+}

frontend/src/assets/badge.module.scss

@@ -0,0 +1,8 @@
+.root {
+  background-color: var(--mantine-color-grape-light);
+
+  @include light {
+    color: var(--mantine-color-dark-filled);
+    background-color: var(--mantine-color-grape-light);
+  }
+}

frontend/src/assets/button.module.scss

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

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

@@ -12,7 +12,7 @@ export const Message: FunctionComponent<Props> = ({
   children,
 }) => {
   return (
-    <Text size="sm" color={type === "info" ? "dimmed" : "yellow"} my={0}>
+    <Text size="sm" c={type === "info" ? "dimmed" : "yellow"} my={0}>
       {children}
     </Text>
   );