(ui): Fix styles for dark-theme in metrics view

ui/src/components/DailyStatsChart.tsx

@@ -30,8 +30,12 @@ export default function DailyStatsChart(props: Props) {
     <ResponsiveContainer>
       <LineChart data={data}>
         <CartesianGrid strokeDasharray="3 3" />
-        <XAxis dataKey="date" minTickGap={10} />
+        <XAxis
-        <YAxis />
+          dataKey="date"
+          minTickGap={10}
+          stroke={theme.palette.text.secondary}
+        />
+        <YAxis stroke={theme.palette.text.secondary} />
         <Tooltip />
         <Legend />
         <Line

ui/src/components/MetricsFetchControls.tsx

@@ -350,7 +350,11 @@ function MetricsFetchControls(props: Props) {
 
   return (
     <div className={classes.root}>
-      <Typography variant="caption" className={classes.endTimeCaption}>
+      <Typography
+        variant="caption"
+        color="textPrimary"
+        className={classes.endTimeCaption}
+      >
         {formatTime(props.endTimeSec)}
       </Typography>
       <div>

ui/src/components/ProcessedTasksChart.tsx

@@ -27,8 +27,8 @@ function ProcessedTasksChart(props: Props) {
     <ResponsiveContainer>
       <BarChart data={props.data} maxBarSize={120}>
         <CartesianGrid strokeDasharray="3 3" />
-        <XAxis dataKey="queue" />
+        <XAxis dataKey="queue" stroke={theme.palette.text.secondary} />
-        <YAxis />
+        <YAxis stroke={theme.palette.text.secondary} />
         <Tooltip />
         <Legend />
         <Bar

ui/src/components/QueueMetricsChart.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from "@material-ui/core/styles";
 import React from "react";
 import {
   LineChart,
@@ -57,6 +58,8 @@ const lineColors = [
 ];
 
 function QueueMetricsChart(props: Props) {
+  const theme = useTheme();
+
   const data = toChartData(props.data);
   const keys = props.data.map((x) => x.metric.queue);
   return (
@@ -72,8 +75,12 @@ function QueueMetricsChart(props: Props) {
           }
           type="number"
           scale="time"
+          stroke={theme.palette.text.secondary}
+        />
+        <YAxis
+          tickFormatter={props.yAxisTickFormatter}
+          stroke={theme.palette.text.secondary}
         />
-        <YAxis tickFormatter={props.yAxisTickFormatter} />
         <Tooltip
           labelFormatter={(timestamp: number) => {
             return new Date(timestamp * 1000).toLocaleTimeString();

ui/src/components/QueueSizeChart.tsx

@@ -10,6 +10,7 @@ import {
   ResponsiveContainer,
 } from "recharts";
 import { useHistory } from "react-router-dom";
+import { useTheme } from "@material-ui/core/styles";
 import { queueDetailsPath } from "../paths";
 
 interface Props {
@@ -27,6 +28,7 @@ interface TaskBreakdown {
 }
 
 function QueueSizeChart(props: Props) {
+  const theme = useTheme();
   const handleClick = (params: { activeLabel?: string } | null) => {
     const allQueues = props.data.map((b) => b.queue);
     if (
@@ -47,8 +49,8 @@ function QueueSizeChart(props: Props) {
         style={{ cursor: "pointer" }}
       >
         <CartesianGrid strokeDasharray="3 3" />
-        <XAxis dataKey="queue" />
+        <XAxis dataKey="queue" stroke={theme.palette.text.secondary} />
-        <YAxis />
+        <YAxis stroke={theme.palette.text.secondary} />
         <Tooltip />
         <Legend />
         <Bar dataKey="active" stackId="a" fill="#1967d2" />

ui/src/views/MetricsView.tsx

@@ -246,7 +246,7 @@ function ChartRow(props: ChartRowProps) {
   return (
     <>
       <div className={classes.chartInfo}>
-        <Typography>{props.title}</Typography>
+        <Typography color="textPrimary">{props.title}</Typography>
         {props.metrics.status === "error" && (
           <div className={classes.errorMessage}>
             <WarningIcon fontSize="small" className={classes.warningIcon} />