wibu/monitoring-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upd: tampilan dark dan light

Browse Source
This commit is contained in:
amal
2026-04-02 11:59:21 +08:00
parent 5136342877
commit ac17e059c7
6 changed files with 68 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/frontend/components/SummaryCard.tsx
View File

@@ -1,4 +1,4 @@
import { Card, Group, Text, ThemeIcon, Stack, Progress, Badge } from '@mantine/core'
import { Card, Group, Text, ThemeIcon, Stack, Progress, Badge, useComputedColorScheme } from '@mantine/core'
import { IconType } from 'react-icons'
import { TbTrendingUp, TbTrendingDown } from 'react-icons/tb'
@@ -27,6 +27,8 @@ export function SummaryCard({
progress,
isError
}: SummaryCardProps) {
const scheme = useComputedColorScheme('light', { getInitialValueInEffect: true })
return (
<Card
withBorder
@@ -35,9 +37,13 @@ export function SummaryCard({
className="glass"
styles={(theme) => ({
root: {
backgroundColor: isError && Number(value) > 0 ? 'rgba(239, 68, 68, 0.05)' : 'rgba(30, 41, 59, 0.4)',
borderColor: isError && Number(value) > 10 ? 'rgba(239, 68, 68, 0.3)' : 'rgba(255, 255, 255, 0.08)',
transition: 'transform 0.2s ease',
backgroundColor: isError && Number(value) > 0
? (scheme === 'dark' ? 'rgba(239, 68, 68, 0.1)' : 'rgba(255, 241, 242, 1)') // light pink for error in light mode
: 'var(--mantine-color-body)',
borderColor: isError && Number(value) > 10
? 'rgba(239, 68, 68, 0.3)'
: scheme === 'dark' ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.05)',
transition: 'transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease',
'&:hover': {
transform: 'translateY(-4px)',
}