apps/khata-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

theme changes

Browse Source
This commit is contained in:
Vishesh 'ironeagle' Bangotra
2026-04-25 13:47:42 +05:30
parent 8a3ebdb1be
commit cc7e6509d2
5 changed files with 106 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/HistoryChart/HistoryChart.view.tsx
View File

@@ -6,6 +6,7 @@ import {
ToggleButton,
Paper
} from "@mui/material";
import { useTheme, alpha } from "@mui/material/styles";
import IconButton from "@mui/material/IconButton";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
@@ -48,6 +49,9 @@ export default function HistoryChartView(props: ViewProps) {
activeDataKey,
} = props;
const theme = useTheme();
const isDark = theme.palette.mode === "dark";
const handleTabChange = (_: React.MouseEvent<HTMLElement>, newTab: string | null) => {
if (newTab !== null) setActiveTab(newTab);
};
@@ -66,16 +70,17 @@ export default function HistoryChartView(props: ViewProps) {
return (
<Paper
sx={{
p: { xs: 2, sm: 4 },
p: { xs: 2.5, sm: 4 },
borderRadius: 4,
width: "100%",
boxShadow: "none",
border: "1px solid",
borderColor: "divider",
bgcolor: colorScheme.light,
bgcolor: isDark ? "background.paper" : colorScheme.light,
transition: 'background-color 0.3s ease, border-color 0.3s ease'
}}
>
<Typography variant="h6" fontWeight={700} gutterBottom color={colorScheme.text}>
<Typography variant="h6" fontWeight={700} gutterBottom sx={{ color: isDark ? 'text.primary' : colorScheme.text }}>
{header}
</Typography>
@@ -157,7 +162,7 @@ export default function HistoryChartView(props: ViewProps) {
return (
<Box key={point.id} sx={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-end", height: "100%" }}>
<Box sx={{ display: "flex", alignItems: "flex-end", gap: comparison ? 0.5 : 0, height: "100%", position: "relative" }}>
<Box sx={{ display: "flex", alignItems: "flex-end", gap: comparison ? 1 : 0.5, height: "100%", position: "relative" }}>
<Typography
variant="caption"
sx={{
@@ -167,30 +172,31 @@ export default function HistoryChartView(props: ViewProps) {
transform: "translate(-50%, -6px)",
fontSize: "0.65rem",
whiteSpace: "nowrap",
pointerEvents: "none"
pointerEvents: "none",
color: 'text.secondary',
fontWeight: 600
}}
>
{formatDisplay(point, activeTab.toLowerCase(), comparison)}
</Typography>
{comparison && (
<Box sx={{ width: 6, height: `${compareHeight}%`, bgcolor: `${colorScheme.primary}55`, borderRadius: 2 }} />
<Box sx={{ width: 8, height: `${compareHeight}%`, bgcolor: isDark ? alpha(colorScheme.primary, 0.3) : alpha(colorScheme.primary, 0.4), borderRadius: '4px 4px 0 0' }} />
)}
<Box sx={{ width: 4 }} />
<Box
sx={{
width: 10,
width: comparison ? 10 : 16,
height: `${currentHeight}%`,
bgcolor: point.highlighted ? colorScheme.primary : `${colorScheme.primary}99`,
borderRadius: 2
bgcolor: point.highlighted ? colorScheme.primary : isDark ? alpha(colorScheme.primary, 0.8) : alpha(colorScheme.primary, 0.9),
borderRadius: '4px 4px 0 0',
boxShadow: point.highlighted ? `0 0 10px ${alpha(colorScheme.primary, 0.5)}` : 'none'
}}
/>
</Box>
<Box sx={{ mt: 1, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", lineHeight: 1.1 }}>
<Typography variant="caption" sx={{ fontSize: "0.7rem", opacity: 0.7 }}>
<Box sx={{ mt: 1.5, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", lineHeight: 1.1 }}>
<Typography variant="caption" sx={{ fontSize: "0.7rem", opacity: 0.8, color: 'text.primary', fontWeight: 500 }}>
{formatLabel(point.id, activeDataKey)}
</Typography>
@@ -198,7 +204,7 @@ export default function HistoryChartView(props: ViewProps) {
variant="caption"
sx={{
fontSize: "0.65rem",
color: "grey.400",
color: "text.disabled",
visibility: comparison && point.compare && activeDataKey !== "daily" ? "visible" : "hidden"
}}
>