From f0a692f492fb57fcd52f4e7bd87a8a00fe907936 Mon Sep 17 00:00:00 2001
From: mochaaP <git@mochaa.ws>
Date: Thu, 23 Jun 2022 06:00:47 +0000
Subject: [PATCH] fix: card color on dark mode

---
 package.json                                                 | 1 +
 resources/assets/src/views/admin/PlayersManagement/Card.tsx  | 5 ++++-
 .../assets/src/views/admin/PlayersManagement/LoadingCard.tsx | 5 ++++-
 .../assets/src/views/admin/PluginsManagement/InfoBox.tsx     | 5 ++++-
 resources/assets/src/views/admin/UsersManagement/Card.tsx    | 5 ++++-
 .../assets/src/views/admin/UsersManagement/LoadingCard.tsx   | 5 ++++-
 yarn.lock                                                    | 5 +++++
 7 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 4de3d7d6..505fbc84 100644
--- a/package.json
+++ b/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",
diff --git a/resources/assets/src/views/admin/PlayersManagement/Card.tsx b/resources/assets/src/views/admin/PlayersManagement/Card.tsx
index c9ccbff7..66079f4d 100644
--- a/resources/assets/src/views/admin/PlayersManagement/Card.tsx
+++ b/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" />
diff --git a/resources/assets/src/views/admin/PlayersManagement/LoadingCard.tsx b/resources/assets/src/views/admin/PlayersManagement/LoadingCard.tsx
index 0b0394ed..b83ad5b3 100644
--- a/resources/assets/src/views/admin/PlayersManagement/LoadingCard.tsx
+++ b/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>
diff --git a/resources/assets/src/views/admin/PluginsManagement/InfoBox.tsx b/resources/assets/src/views/admin/PluginsManagement/InfoBox.tsx
index fb0f0357..3b47b6bc 100644
--- a/resources/assets/src/views/admin/PluginsManagement/InfoBox.tsx
+++ b/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>
diff --git a/resources/assets/src/views/admin/UsersManagement/Card.tsx b/resources/assets/src/views/admin/UsersManagement/Card.tsx
index 98649b15..de41fbe4 100644
--- a/resources/assets/src/views/admin/UsersManagement/Card.tsx
+++ b/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" />
diff --git a/resources/assets/src/views/admin/UsersManagement/LoadingCard.tsx b/resources/assets/src/views/admin/UsersManagement/LoadingCard.tsx
index 2b1fef76..10e47590 100644
--- a/resources/assets/src/views/admin/UsersManagement/LoadingCard.tsx
+++ b/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>
diff --git a/yarn.lock b/yarn.lock
index 59c60d4c..35bee011 100644
--- a/yarn.lock
+++ b/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"