furyhawk/home_stack
1
0
Fork 0
mirror of https://github.com/furyhawk/home_stack.git synced 2026-07-21 02:06:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance dashboard styling with color mode support for metric boxes

Browse Source
This commit is contained in:
furyhawk
2026-04-22 19:25:32 +08:00
parent 28c0952cce
commit 1ba7582831
1 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/dashboard/FuryDashboard.tsx
+10 -9
View File
@@ -12,6 +12,7 @@ import {
Table,
Text,
VStack,
useColorModeValue,
} from "@chakra-ui/react"
import { useQuery } from "@tanstack/react-query"
@@ -261,27 +262,27 @@ function FuryDashboard() {
</Box>
<SimpleGrid columns={3} gap={3}>
<Box bg="gray.50" borderRadius="md" p={3}>
<Text color="gray.500" fontSize="xs" textTransform="uppercase">
<Box bg={useColorModeValue("gray.50", "gray.700")} borderRadius="md" p={3}>
<Text color={useColorModeValue("gray.500", "gray.400")} fontSize="xs" textTransform="uppercase">
Average
</Text>
<Text fontWeight="semibold" mt={1}>
<Text fontWeight="semibold" mt={1} color={useColorModeValue("gray.900", "white")}>
{formatValue(metric.summary.average, metric.unit)}
</Text>
</Box>
<Box bg="gray.50" borderRadius="md" p={3}>
<Text color="gray.500" fontSize="xs" textTransform="uppercase">
<Box bg={useColorModeValue("gray.50", "gray.700")} borderRadius="md" p={3}>
<Text color={useColorModeValue("gray.500", "gray.400")} fontSize="xs" textTransform="uppercase">
Low
</Text>
<Text fontWeight="semibold" mt={1}>
<Text fontWeight="semibold" mt={1} color={useColorModeValue("gray.900", "white")}>
{formatValue(metric.summary.min, metric.unit)}
</Text>
</Box>
<Box bg="gray.50" borderRadius="md" p={3}>
<Text color="gray.500" fontSize="xs" textTransform="uppercase">
<Box bg={useColorModeValue("gray.50", "gray.700")} borderRadius="md" p={3}>
<Text color={useColorModeValue("gray.500", "gray.400")} fontSize="xs" textTransform="uppercase">
High
</Text>
<Text fontWeight="semibold" mt={1}>
<Text fontWeight="semibold" mt={1} color={useColorModeValue("gray.900", "white")}>
{formatValue(metric.summary.max, metric.unit)}
</Text>
</Box>