From 4d27f7819ce80d65ca7239c40c7b404b82aa947b Mon Sep 17 00:00:00 2001
From: Anderson Oki <anderson.vs.oki@gmail.com>
Date: Tue, 30 Apr 2024 15:24:47 +0900
Subject: [PATCH] update specific styles

---
 frontend/src/App/ThemeProvider.tsx               | 15 +++++++++------
 frontend/src/assets/action_icon.module.scss      | 16 ++++++++++++++++
 frontend/src/assets/badge.module.scss            |  8 ++++++++
 frontend/src/assets/button.module.scss           | 10 ++++++----
 .../src/pages/Settings/components/Message.tsx    |  2 +-
 5 files changed, 40 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/assets/action_icon.module.scss
 create mode 100644 frontend/src/assets/badge.module.scss

diff --git a/frontend/src/App/ThemeProvider.tsx b/frontend/src/App/ThemeProvider.tsx
index 8678e8e18..0ed53be7e 100644
--- a/frontend/src/App/ThemeProvider.tsx
+++ b/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,
+    }),
   },
 });
 
diff --git a/frontend/src/assets/action_icon.module.scss b/frontend/src/assets/action_icon.module.scss
new file mode 100644
index 000000000..de4f87b47
--- /dev/null
+++ b/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);
+      }
+    }
+  }
+}
diff --git a/frontend/src/assets/badge.module.scss b/frontend/src/assets/badge.module.scss
new file mode 100644
index 000000000..830da2927
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/frontend/src/assets/button.module.scss b/frontend/src/assets/button.module.scss
index 6084b7af8..06a2e3383 100644
--- a/frontend/src/assets/button.module.scss
+++ b/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);
+    }
   }
 }
diff --git a/frontend/src/pages/Settings/components/Message.tsx b/frontend/src/pages/Settings/components/Message.tsx
index 301df7bab..eac84131b 100644
--- a/frontend/src/pages/Settings/components/Message.tsx
+++ b/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>
   );