Browse Source

fix(ui): Use gray300 for project chart labels (#30041)

* fix(ui): Use gray300 for project chart labels

Gray 200 is not an accessible text color. We should use Gray 300 instead.
Vu Luong 3 years ago
parent
commit
80c36a8dd5

+ 1 - 6
static/app/views/projectDetail/charts/projectBaseEventsChart.tsx

@@ -1,5 +1,4 @@
 import {Component} from 'react';
-import {withTheme} from '@emotion/react';
 import * as Sentry from '@sentry/react';
 
 import {fetchTotalCount} from 'app/actionCreators/events';
@@ -12,7 +11,6 @@ import {t} from 'app/locale';
 import {GlobalSelection} from 'app/types';
 import {axisLabelFormatter} from 'app/utils/discover/charts';
 import getDynamicText from 'app/utils/getDynamicText';
-import {Theme} from 'app/utils/theme';
 import withGlobalSelection from 'app/utils/withGlobalSelection';
 
 type Props = Omit<
@@ -22,7 +20,6 @@ type Props = Omit<
   title: string;
   selection: GlobalSelection;
   onTotalValuesChange: (value: number | null) => void;
-  theme: Theme;
   help?: string;
   yAxis: string;
 };
@@ -67,7 +64,6 @@ class ProjectBaseEventsChart extends Component<Props> {
       query,
       field,
       title,
-      theme,
       help,
       ...eventsChartProps
     } = this.props;
@@ -105,7 +101,6 @@ class ProjectBaseEventsChart extends Component<Props> {
             grid: {left: '10px', right: '10px', top: '40px', bottom: '0px'},
             yAxis: {
               axisLabel: {
-                color: theme.gray200,
                 formatter: (value: number) => axisLabelFormatter(value, yAxis),
               },
               scale: true,
@@ -118,4 +113,4 @@ class ProjectBaseEventsChart extends Component<Props> {
   }
 }
 
-export default withGlobalSelection(withTheme(ProjectBaseEventsChart));
+export default withGlobalSelection(ProjectBaseEventsChart);

+ 1 - 2
static/app/views/projectDetail/charts/projectBaseSessionsChart.tsx

@@ -249,7 +249,7 @@ class Chart extends Component<ChartProps, ChartState> {
   }
 
   get chartOptions() {
-    const {theme, displayMode} = this.props;
+    const {displayMode} = this.props;
 
     return {
       grid: {left: '10px', right: '10px', top: '40px', bottom: '0px'},
@@ -275,7 +275,6 @@ class Chart extends Component<ChartProps, ChartState> {
         displayMode === DisplayModes.STABILITY
           ? {
               axisLabel: {
-                color: theme.gray200,
                 formatter: (value: number) => displayCrashFreePercent(value),
               },
               scale: true,