From 9787934820f135debfde43f9898d790a3cd817d9 Mon Sep 17 00:00:00 2001
From: Anderson Shindy Oki <anderson.vs.oki@gmail.com>
Date: Tue, 11 Jun 2024 19:24:33 +0900
Subject: Fixed background color of media overview badge on light theme

---
 frontend/src/assets/badge.module.scss     | 5 +++++
 frontend/src/pages/views/ItemOverview.tsx | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/assets/badge.module.scss b/frontend/src/assets/badge.module.scss
index a570ecc45..2ef1b3904 100644
--- a/frontend/src/assets/badge.module.scss
+++ b/frontend/src/assets/badge.module.scss
@@ -35,6 +35,11 @@
         color: darken($color-highlight-6, 1);
         background-color: transparentize($color-highlight-5, 0.8);
       }
+
+      &[data-variant="light"] {
+        color: var(--mantine-color-black);
+        background-color: var(--mantine-color-gray-5);
+      }
     }
   }
 }
diff --git a/frontend/src/pages/views/ItemOverview.tsx b/frontend/src/pages/views/ItemOverview.tsx
index 4877e24e4..a2debdc57 100644
--- a/frontend/src/pages/views/ItemOverview.tsx
+++ b/frontend/src/pages/views/ItemOverview.tsx
@@ -200,8 +200,8 @@ const ItemBadge: FunctionComponent<ItemBadgeProps> = ({
 }) => (
   <Badge
     leftSection={<FontAwesomeIcon icon={icon}></FontAwesomeIcon>}
+    variant="light"
     radius="sm"
-    color="dark"
     size="sm"
     style={{ textTransform: "none" }}
     aria-label={title}
-- 
cgit v1.2.3