Fix minor dark mode issues and language/theme selection alignement

This commit is contained in:
2026-02-02 11:21:20 +00:00
parent 3e3ca3621c
commit 8e74fe576f
4 changed files with 177 additions and 161 deletions

View File

@@ -327,12 +327,12 @@ const chartDomain = React.useMemo(() => {
<UiTooltip>
<UiTooltipTrigger asChild>
<span
className="px-1 py-0.5 rounded-sm bg-white text-black shadow-sm border border-muted truncate inline-block max-w-[100px]"
className="px-1 py-0.5 rounded-sm bg-background text-foreground shadow-sm border border-border truncate inline-block max-w-[100px]"
>
{labelInfo.display}
</span>
</UiTooltipTrigger>
<UiTooltipContent className="bg-white text-black shadow-md border max-w-xs">
<UiTooltipContent className="bg-background text-foreground shadow-md border border-border max-w-xs">
<span className="font-medium">{labelInfo.full}</span>
</UiTooltipContent>
</UiTooltip>
@@ -481,9 +481,9 @@ const chartDomain = React.useMemo(() => {
}
return (
<div className="recharts-default-tooltip" style={{ margin: 0, padding: 10, backgroundColor: 'rgb(255, 255, 255)', border: '1px solid rgb(204, 204, 204)', whiteSpace: 'nowrap' }}>
<p className="recharts-tooltip-label" style={{ margin: 0 }}>{t('time')}: {timeLabel}</p>
<ul className="recharts-tooltip-item-list" style={{ padding: 0, margin: 0 }}>
<div className="bg-background border border-border rounded shadow-lg" style={{ margin: 0, padding: 10, whiteSpace: 'nowrap' }}>
<p className="text-foreground font-medium" style={{ margin: 0 }}>{t('time')}: {timeLabel}</p>
<ul style={{ padding: 0, margin: 0 }}>
{payload.map((entry: any, index: number) => {
const labelInfo = seriesLabels[entry.dataKey] || { display: entry.name, full: entry.name };
const isTemplate = entry.dataKey?.toString().includes('template');
@@ -493,12 +493,12 @@ const chartDomain = React.useMemo(() => {
return (
<li
key={`item-${index}`}
className="recharts-tooltip-item"
className="text-foreground"
style={{ display: 'block', paddingTop: 4, paddingBottom: 4, color: entry.color, opacity }}
>
<span className="recharts-tooltip-item-name" title={labelInfo.full}>{labelInfo.display}</span>
<span className="recharts-tooltip-item-separator">: </span>
<span className="recharts-tooltip-item-value">{value} {t('unitNgml')}</span>
<span title={labelInfo.full}>{labelInfo.display}</span>
<span>: </span>
<span>{value} {t('unitNgml')}</span>
</li>
);
})}