fix: card color on dark mode

package.json

@@ -30,6 +30,7 @@
     "bootstrap": "^4.6.1",
     "cac": "^6.6.1",
     "cli-spinners": "^2.5.0",
+    "clsx": "^1.1.1",
     "echarts": "^5.1.2",
     "events": "^3.2.0",
     "immer": "^7.0.4",

resources/assets/src/views/admin/PlayersManagement/Card.tsx

@@ -3,6 +3,7 @@ import { t } from '@/scripts/i18n'
 import { showModal } from '@/scripts/notify'
 import type { Player } from '@/scripts/types'
 import { Box } from './styles'
+import clsx from 'clsx'
 
 interface Props {
   player: Player
@@ -65,11 +66,13 @@ const Card: React.FC<Props> = (props) => {
     })
   }
 
+  const isDarkMode = document.body.classList.contains('dark-mode')
+
   const avatar = `${blessing.base_url}/avatar/player/${player.name}`
   const avatarPNG = `${avatar}?png`
 
   return (
-    <Box className="info-box">
+    <Box className={clsx('info-box', { 'bg-gray-dark': isDarkMode })}>
       <div className="info-box-icon">
         <picture>
           <source srcSet={avatar} type="image/webp" />

resources/assets/src/views/admin/PlayersManagement/LoadingCard.tsx

@@ -2,13 +2,16 @@ import React from 'react'
 import styled from '@emotion/styled'
 import Skeleton from 'react-loading-skeleton'
 import { Box } from './styles'
+import clsx from 'clsx'
+
+const isDarkMode = document.body.classList.contains('dark-mode')
 
 const ShrinkedSkeleton = styled(Skeleton)<{ width?: string }>`
   width: ${(props) => props.width};
 `
 
 const LoadingCard: React.FC = () => (
-  <Box className="info-box">
+  <Box className={clsx('info-box', { 'bg-gray-dark': isDarkMode })}>
     <div className="info-box-icon">
       <Skeleton circle height={50} width={50} />
     </div>

resources/assets/src/views/admin/PluginsManagement/InfoBox.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import styled from '@emotion/styled'
 import { t } from '@/scripts/i18n'
 import type { Plugin } from './types'
+import clsx from 'clsx'
 
 const Box = styled.div`
   cursor: default;
@@ -60,8 +61,10 @@ const InfoBox: React.FC<Props> = (props) => {
 
   const handleDelete = () => props.onDelete(plugin)
 
+  const isDarkMode = document.body.classList.contains('dark-mode')
+
   return (
-    <Box className="info-box mr-3">
+    <Box className={clsx('info-box', 'mr-3', { 'bg-gray-dark': isDarkMode })}>
       <span className={`info-box-icon bg-${plugin.icon.bg}`}>
         <i className={`${plugin.icon.faType} fa-${plugin.icon.fa}`} />
       </span>

resources/assets/src/views/admin/UsersManagement/Card.tsx

@@ -8,6 +8,7 @@ import {
   canModifyUser,
   canModifyPermission,
 } from './utils'
+import clsx from 'clsx'
 
 interface Props {
   user: User
@@ -24,12 +25,14 @@ interface Props {
 const Card: React.FC<Props> = (props) => {
   const { user, currentUser } = props
 
+  const isDarkMode = document.body.classList.contains('dark-mode')
+
   const avatar = `${blessing.base_url}/avatar/user/${user.uid}`
   const avatarPNG = `${avatar}?png`
   const canModify = canModifyUser(user, currentUser)
 
   return (
-    <Box className="info-box">
+    <Box className={clsx('info-box', { 'bg-gray-dark': isDarkMode })}>
       <Icon py>
         <picture>
           <source srcSet={avatar} type="image/webp" />

resources/assets/src/views/admin/UsersManagement/LoadingCard.tsx

@@ -3,13 +3,16 @@ import styled from '@emotion/styled'
 import Skeleton from 'react-loading-skeleton'
 import { t } from '@/scripts/i18n'
 import { Box, Icon, InfoTable } from './styles'
+import clsx from 'clsx'
 
 const ShrinkedSkeleton = styled(Skeleton)<{ width?: string }>`
   width: ${(props) => props.width};
 `
 
+const isDarkMode = document.body.classList.contains('dark-mode')
+
 const LoadingCard: React.FC = () => (
-  <Box className="info-box">
+  <Box className={clsx('info-box', { 'bg-gray-dark': isDarkMode })}>
     <Icon>
       <Skeleton circle height={50} width={50} />
     </Icon>

yarn.lock

@@ -3056,6 +3056,11 @@ clone@^1.0.4:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
+clsx@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.npmjs.org/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"