patrickdundas · patrickdundas · Jul 29, 2026 · Jul 29, 2026 · Jul 29, 2026 · Jul 29, 2026
diff --git a/docs/ui-redesign/after-charts.png b/docs/ui-redesign/after-charts.png
diff --git a/docs/ui-redesign/after-dashboard.png b/docs/ui-redesign/after-dashboard.png
diff --git a/docs/ui-redesign/after-login.png b/docs/ui-redesign/after-login.png
diff --git a/docs/ui-redesign/after-tracker.png b/docs/ui-redesign/after-tracker.png
diff --git a/docs/ui-redesign/before-charts.png b/docs/ui-redesign/before-charts.png
diff --git a/docs/ui-redesign/before-dashboard.png b/docs/ui-redesign/before-dashboard.png
diff --git a/docs/ui-redesign/before-login.png b/docs/ui-redesign/before-login.png
diff --git a/docs/ui-redesign/option-a-graphite.png b/docs/ui-redesign/option-a-graphite.png
diff --git a/docs/ui-redesign/option-b-slate.png b/docs/ui-redesign/option-b-slate.png
diff --git a/docs/ui-redesign/option-c-porcelain.png b/docs/ui-redesign/option-c-porcelain.png
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "private-tracker-tracker",
-  "version": "2.8.9-homelab.3",
+  "version": "2.8.9-homelab.4",
   "description": "Self-hosted dashboard for monitoring private tracker stats over time",
   "license": "GPL-3.0",
   "repository": {

diff --git a/public/img/trackerTracker_logo.svg b/public/img/trackerTracker_logo.svg
diff --git a/src/app/globals.css b/src/app/globals.css
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,6 @@
 // src/app/layout.tsx
 import type { Metadata } from "next"
-import { Archivo, Space_Mono } from "next/font/google"
+import { Archivo, JetBrains_Mono } from "next/font/google"
 import type { ReactNode } from "react"
 import "./globals.css"
 
@@ -9,7 +9,7 @@ const archivo = Archivo({
   variable: "--font-archivo",
 })
 
-const spaceMono = Space_Mono({
+const jetBrainsMono = JetBrains_Mono({
   subsets: ["latin"],
   weight: ["400", "700"],
   variable: "--font-mono",
@@ -30,7 +30,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" className="dark">
       <body
-        className={`${archivo.variable} ${spaceMono.variable} font-sans antialiased bg-base text-primary`}
+        className={`${archivo.variable} ${jetBrainsMono.variable} font-sans antialiased bg-base text-primary`}
       >
         {children}
       </body>

diff --git a/src/components/TrackerSettingsSheet.tsx b/src/components/TrackerSettingsSheet.tsx
@@ -376,7 +376,7 @@ function TrackerSettingsSheet({ open, tracker, onClose, onUpdated }: TrackerSett
                   onChange={(e) => setEditDcCookies(e.target.value)}
                   placeholder="uid=56954; pass=abc123def456..."
                   rows={2}
-                  className="w-full font-mono text-sm text-primary bg-control-bg rounded-nm-md px-4 py-3 placeholder:text-muted nm-inset focus:outline-none focus:nm-inset border-0 resize-y"
+                  className="w-full font-mono text-sm text-primary bg-control-bg rounded-nm-md px-4 py-3 placeholder:text-muted nm-inset focus:outline-none focus:nm-focus border-0 resize-y"
                 />
                 <Notice message={errors.apiToken} />
                 <Button

diff --git a/src/components/charts/BufferVelocityChart.tsx b/src/components/charts/BufferVelocityChart.tsx
@@ -189,14 +189,11 @@ function buildBufferVelocityOption(
       lineStyle: {
         color: tracker.color,
         width: 2,
-        shadowColor: tracker.color,
-        shadowBlur: 8,
       },
       emphasis: {
         focus: "series" as const,
         lineStyle: {
-          shadowBlur: 16,
-          shadowColor: tracker.color,
+          width: 3,
         },
       },
       // Only the first series carries the "Break even" markLine label

diff --git a/src/components/charts/ComparisonChart.tsx b/src/components/charts/ComparisonChart.tsx
@@ -134,11 +134,9 @@ function buildAverageSeries(
       lineStyle: {
         color,
         width: 3,
-        shadowColor: color,
-        shadowBlur: 12,
       },
       emphasis: {
-        lineStyle: { shadowBlur: 20, shadowColor: color },
+        lineStyle: { width: 4 },
       },
       areaStyle: {
         color: {
@@ -243,11 +241,9 @@ function buildComparisonOption(
         lineStyle: {
           color: totalColor,
           width: 3,
-          shadowColor: totalColor,
-          shadowBlur: 12,
         },
         emphasis: {
-          lineStyle: { shadowBlur: 20, shadowColor: totalColor },
+          lineStyle: { width: 4 },
         },
       },
     ]
@@ -285,11 +281,10 @@ function buildComparisonOption(
         lineStyle: {
           color: tracker.color,
           width: useStacked ? 1 : 2,
-          ...(useStacked ? {} : { shadowColor: tracker.color, shadowBlur: 8 }),
         },
         emphasis: useStacked
           ? { focus: "series" as const }
-          : { focus: "series" as const, lineStyle: { shadowBlur: 16, shadowColor: tracker.color } },
+          : { focus: "series" as const, lineStyle: { width: 3 } },
       }
     })
   }

diff --git a/src/components/charts/CrossSeedNetwork.tsx b/src/components/charts/CrossSeedNetwork.tsx
@@ -4,7 +4,6 @@
 
 import type { EChartsOption } from "echarts"
 import { useMemo } from "react"
-import { hexToRgba } from "@/lib/color-utils"
 import type { CrossSeedEdge, CrossSeedNode } from "@/lib/fleet-aggregation"
 import { formatCount } from "@/lib/formatters"
 import { ChartECharts } from "./lib/ChartECharts"
@@ -21,7 +20,7 @@ interface NetworkNode {
   id: string
   name: string
   symbolSize: number
-  itemStyle: { color: string; shadowBlur: number; shadowColor: string }
+  itemStyle: { color: string }
   label: { show: boolean; color: string; fontSize: number; fontFamily: string }
   torrentCount: number
   crossSeeded: number
@@ -45,7 +44,7 @@ function buildStyledNodes(aggregatedNodes: CrossSeedNode[]): NetworkNode[] {
       symbolSize: nodeSize,
       torrentCount: n.torrentCount,
       crossSeeded: n.crossSeeded,
-      itemStyle: { color: n.color, shadowBlur: 20, shadowColor: hexToRgba(n.color, 0.5) },
+      itemStyle: { color: n.color },
       label: {
         show: true,
         color: CHART_THEME.textSecondary,
@@ -130,7 +129,6 @@ function buildCrossSeedNetworkOption(nodes: NetworkNode[], edges: NetworkEdge[])
         emphasis: {
           focus: "adjacency",
           lineStyle: { width: 4, opacity: 0.9 },
-          itemStyle: { shadowBlur: 30 },
         },
         blur: {
           itemStyle: { opacity: 0.15 },

diff --git a/src/components/charts/DailyVolumeChart.tsx b/src/components/charts/DailyVolumeChart.tsx
@@ -100,7 +100,7 @@ function buildDailyVolumeOption(trackerData: TrackerSnapshotSeries[]): EChartsOp
         return [dayTimestamps[i], val] as [number, number]
       }),
       itemStyle: { color: tracker.color, borderRadius: [2, 2, 0, 0] },
-      emphasis: { itemStyle: { shadowBlur: 8, shadowColor: tracker.color } },
+      emphasis: { itemStyle: { opacity: 1 } },
     })
 
     series.push({
@@ -119,7 +119,7 @@ function buildDailyVolumeOption(trackerData: TrackerSnapshotSeries[]): EChartsOp
         opacity: 0.5,
         borderRadius: [0, 0, 2, 2],
       },
-      emphasis: { itemStyle: { shadowBlur: 8, shadowColor: tracker.color } },
+      emphasis: { itemStyle: { opacity: 1 } },
     })
   }
 
@@ -464,8 +464,6 @@ function buildSumsOption(trackerData: TrackerSnapshotSeries[]): EChartsOption {
         lineStyle: {
           color: CHART_THEME.upload,
           width: 3,
-          shadowColor: CHART_THEME.upload,
-          shadowBlur: 12,
         },
         areaStyle: {
           color: {
@@ -494,8 +492,6 @@ function buildSumsOption(trackerData: TrackerSnapshotSeries[]): EChartsOption {
         lineStyle: {
           color: CHART_THEME.download,
           width: 3,
-          shadowColor: CHART_THEME.download,
-          shadowBlur: 12,
         },
         areaStyle: {
           color: {

diff --git a/src/components/charts/DistributionChart.tsx b/src/components/charts/DistributionChart.tsx
@@ -305,7 +305,7 @@ function buildParallelOption(
         opacity: 0.7,
       },
       emphasis: {
-        lineStyle: { width: 5, opacity: 1, shadowBlur: 12, shadowColor: t.color },
+        lineStyle: { width: 5, opacity: 1 },
       },
       data: [[t.uploadPct, t.seedingPct]],
     })),

diff --git a/src/components/charts/FleetSizeJitter.tsx b/src/components/charts/FleetSizeJitter.tsx
@@ -51,8 +51,6 @@ function buildFleetSizeJitterOption(data: TrackerSizes[]): EChartsOption {
       emphasis: {
         itemStyle: {
           opacity: 1,
-          shadowBlur: 8,
-          shadowColor: entry.color,
         },
       },
     }

diff --git a/src/components/charts/FleetVolumeCalendar.tsx b/src/components/charts/FleetVolumeCalendar.tsx
@@ -126,8 +126,8 @@ function buildFleetVolumeCalendarOption(
         },
         emphasis: {
           itemStyle: {
-            shadowBlur: 8,
-            shadowColor: hexToRgba(color, 0.4),
+            borderWidth: 2,
+            borderColor: color,
           },
         },
       },

diff --git a/src/components/charts/FleetVolumeHeatmap.tsx b/src/components/charts/FleetVolumeHeatmap.tsx
@@ -130,8 +130,7 @@ function buildFleetVolumeHeatmapOption(
         },
         emphasis: {
           itemStyle: {
-            shadowBlur: 10,
-            shadowColor: hexToRgba(color, 0.4),
+            borderColor: color,
           },
         },
       },

diff --git a/src/components/charts/MetricChart.tsx b/src/components/charts/MetricChart.tsx
@@ -4,7 +4,6 @@
 import type { EChartsOption } from "echarts"
 import { useState } from "react"
 import { TabBar } from "@/components/ui/TabBar"
-import { getComplementaryColor } from "@/lib/color-utils"
 import { bytesToGiB, formatCount } from "@/lib/formatters"
 import { isValidHex } from "@/lib/validators"
 import type { Snapshot } from "@/types/api"
@@ -32,6 +31,7 @@ import {
   chartTooltip,
   chartTooltipHeader,
   chartTooltipRow,
+  downloadSeriesColor,
   escHtml,
   formatChartTimestamp,
 } from "./lib/theme"
@@ -197,12 +197,10 @@ function buildLineOption(
         lineStyle: {
           color: safeAccent,
           width: 2,
-          shadowColor: safeAccent,
-          shadowBlur: 8,
         },
         areaStyle: buildGlowAreaStyle(safeAccent),
         emphasis: {
-          lineStyle: { shadowBlur: 16, shadowColor: safeAccent },
+          lineStyle: { width: 3 },
         },
         markLine:
           baselineValue != null && baselineValue > 0
@@ -248,7 +246,9 @@ function buildDailyDeltaOption(
   const finalUpload = uploadData.map((v) => Number((v / divisor).toFixed(3)))
   const finalDownload = downloadData.map((v) => Number((v / divisor).toFixed(3)))
 
-  const complementColor = getComplementaryColor(safeAccent)
+  // Download Δ series uses the semantic download color instead of a
+  // hue-rotated complement of the tracker color (see UploadDownloadChart).
+  const complementColor = downloadSeriesColor(safeAccent)
   const deltaDotSize = adaptiveDotSize(buckets.length, [30, 14])
 
   return {
@@ -309,9 +309,9 @@ function buildDailyDeltaOption(
               symbol: "circle",
               symbolSize: deltaDotSize,
               itemStyle: { color: safeAccent },
-              lineStyle: { color: safeAccent, width: 2, shadowColor: safeAccent, shadowBlur: 8 },
+              lineStyle: { color: safeAccent, width: 2 },
               areaStyle: buildGlowAreaStyle(safeAccent),
-              emphasis: { lineStyle: { shadowBlur: 16, shadowColor: safeAccent } },
+              emphasis: { lineStyle: { width: 3 } },
             },
             {
               name: "Download Δ",
@@ -325,11 +325,9 @@ function buildDailyDeltaOption(
               lineStyle: {
                 color: complementColor,
                 width: 2,
-                shadowColor: complementColor,
-                shadowBlur: 8,
               },
               areaStyle: buildGlowAreaStyle(complementColor, 0.2),
-              emphasis: { lineStyle: { shadowBlur: 16, shadowColor: complementColor } },
+              emphasis: { lineStyle: { width: 3 } },
             },
           ]
         : [
@@ -341,7 +339,9 @@ function buildDailyDeltaOption(
                 color: safeAccent,
                 borderRadius: [3, 3, 0, 0],
               },
-              emphasis: { itemStyle: { shadowBlur: 8, shadowColor: safeAccent } },
+              emphasis: {
+                itemStyle: { borderColor: CHART_THEME.textPrimary, borderWidth: 1.5 },
+              },
             },
             {
               name: "Download Δ",
@@ -351,7 +351,9 @@ function buildDailyDeltaOption(
                 color: complementColor,
                 borderRadius: [3, 3, 0, 0],
               },
-              emphasis: { itemStyle: { shadowBlur: 8, shadowColor: complementColor } },
+              emphasis: {
+                itemStyle: { borderColor: CHART_THEME.textPrimary, borderWidth: 1.5 },
+              },
             },
           ],
   }

diff --git a/src/components/charts/ParallelTorrentsChart.tsx b/src/components/charts/ParallelTorrentsChart.tsx
@@ -199,8 +199,6 @@ function buildParallelOption(torrents: TorrentRaw[], trackerColor: string): ECha
             color: lineEmphasisColor,
             width: 2,
             opacity: 1,
-            shadowColor: trackerColor,
-            shadowBlur: 8,
           },
         },
         data: rows,

diff --git a/src/components/charts/RatioStabilityChart.tsx b/src/components/charts/RatioStabilityChart.tsx
@@ -166,7 +166,7 @@ function buildRatioStabilityOption(
       itemStyle: { color: tracker.color },
       emphasis: {
         focus: "series" as const,
-        lineStyle: { shadowBlur: 16, shadowColor: tracker.color },
+        lineStyle: { width: 3 },
       },
     })
   }

diff --git a/src/components/charts/SpeedHistoryChart.tsx b/src/components/charts/SpeedHistoryChart.tsx
@@ -134,10 +134,10 @@ function buildOption(snapshots: FleetSnapshot[]): EChartsOption {
         symbol: "none",
         sampling: "lttb",
         itemStyle: { color: CYAN },
-        lineStyle: { color: CYAN, width: 2, shadowColor: CYAN, shadowBlur: 8 },
+        lineStyle: { color: CYAN, width: 2 },
         emphasis: {
           focus: "series" as const,
-          lineStyle: { shadowBlur: 16, shadowColor: CYAN },
+          lineStyle: { width: 3 },
         },
         areaStyle: {
           color: {
@@ -162,10 +162,10 @@ function buildOption(snapshots: FleetSnapshot[]): EChartsOption {
         symbol: "none",
         sampling: "lttb",
         itemStyle: { color: AMBER },
-        lineStyle: { color: AMBER, width: 2, shadowColor: AMBER, shadowBlur: 8 },
+        lineStyle: { color: AMBER, width: 2 },
         emphasis: {
           focus: "series" as const,
-          lineStyle: { shadowBlur: 16, shadowColor: AMBER },
+          lineStyle: { width: 3 },
         },
         areaStyle: {
           color: {

diff --git a/src/components/charts/TorrentActivityHeatmap.tsx b/src/components/charts/TorrentActivityHeatmap.tsx
@@ -87,8 +87,7 @@ function buildHeatmapOption(
         label: { show: false },
         emphasis: {
           itemStyle: {
-            shadowBlur: 10,
-            shadowColor: hexToRgba(accentColor, 0.4),
+            borderColor: accentColor,
           },
         },
         itemStyle: {

diff --git a/src/components/charts/TorrentAgeTimeline.tsx b/src/components/charts/TorrentAgeTimeline.tsx
@@ -81,12 +81,10 @@ function TorrentAgeTimeline({ torrents, accentColor }: TorrentAgeTimelineProps)
         lineStyle: {
           color: accentColor,
           width: 2,
-          shadowColor: accentColor,
-          shadowBlur: 8,
         },
         areaStyle: buildGlowAreaStyle(accentColor),
         emphasis: {
-          lineStyle: { shadowBlur: 16, shadowColor: accentColor },
+          lineStyle: { width: 3 },
         },
       },
     ],

diff --git a/src/components/charts/TorrentAvgSeedTime.tsx b/src/components/charts/TorrentAvgSeedTime.tsx
@@ -85,11 +85,11 @@ function TorrentAvgSeedTime({ torrents, accentColor }: TorrentAvgSeedTimeProps)
         smooth: true,
         symbol: "circle",
         symbolSize: 4,
-        lineStyle: { color: accentColor, width: 2, shadowColor: accentColor, shadowBlur: 8 },
+        lineStyle: { color: accentColor, width: 2 },
         itemStyle: { color: accentColor },
         areaStyle: buildGlowAreaStyle(accentColor, 0.3, 0.02),
         emphasis: {
-          lineStyle: { shadowBlur: 16, shadowColor: accentColor },
+          lineStyle: { width: 3 },
         },
       },
     ],

diff --git a/src/components/charts/TorrentCategoryRadar.tsx b/src/components/charts/TorrentCategoryRadar.tsx
@@ -55,8 +55,6 @@ function TorrentCategoryRadar({ categories, accentColor }: TorrentCategoryRadarP
     areaStyle: { color: hexToRgba(palette[i % palette.length], 0.15) },
     lineStyle: {
       width: 2,
-      shadowColor: palette[i % palette.length],
-      shadowBlur: 6,
     },
   }))