Change colors of Stat element in the panel

resources/scripts/components/server/console/StatBlock.tsx

@@ -20,9 +20,9 @@ export default ({ title, copyOnClick, icon, color, className, children }: StatBl
 
     return (
         <CopyOnClick text={copyOnClick}>
-            <div className={classNames(styles.stat_block, 'bg-gray-600', className)}>
-                <div className={classNames(styles.status_bar, color || 'bg-gray-700')} />
-                <div className={classNames(styles.icon, color || 'bg-gray-700')}>
+            <div className={classNames(styles.stat_block, 'bg-gray-800', className)}>
+                <div className={classNames(styles.status_bar, 'bg-gray-700')} />
+                <div className={classNames(styles.icon, 'bg-gray-900')}>
                     <Icon
                         icon={icon}
                         className={classNames({

resources/scripts/components/server/console/style.module.css

@@ -59,5 +59,5 @@
 }
 
 .chart_container {
-    @apply bg-gray-600 rounded shadow-lg pt-2 border-b-4 border-gray-700 relative;
+    @apply rounded shadow-lg pt-2 relative bg-gray-800;
 }

tailwind.config.js

@@ -1,16 +1,16 @@
 const colors = require('tailwindcss/colors');
 
 const gray = {
-    50: 'hsl(216, 33%, 97%)',
-    100: 'hsl(214, 15%, 91%)',
-    200: 'hsl(210, 16%, 82%)',
-    300: 'hsl(211, 13%, 65%)',
-    400: 'hsl(211, 10%, 53%)',
-    500: 'hsl(211, 12%, 43%)',
-    600: 'hsl(209, 14%, 37%)',
-    700: 'hsl(209, 18%, 30%)',
-    800: 'hsl(209, 20%, 25%)',
-    900: 'hsl(210, 24%, 16%)',
+    50: colors.neutral[50],
+    100: colors.neutral[100],
+    200: colors.neutral[200],
+    300: colors.neutral[300],
+    400: colors.neutral[400],
+    500: colors.neutral[500],
+    600: colors.neutral[600],
+    700: colors.neutral[700],
+    800: colors.neutral[800],
+    900: colors.neutral[900],
 };
 
 module.exports = {