Change: Replace glamor based css styles for axis with global styles

Use global styles (based on styled-components) instead of creating local
styles with glamor for the chart axis.

src/web/components/chart/axis.js

@@ -17,8 +17,6 @@
  */
 import React from 'react';
 
-import {css} from 'glamor';
-
 import {Axis as VxAxis} from '@vx/axis';
 
 import PropTypes from 'web/utils/proptypes';
@@ -28,24 +26,6 @@ const FONT_SIZE = 10;
 
 const DEFAULT_TICK_LENGTH = 8;
 
-const labelCss = css({
-  fill: Theme.darkGray,
-});
-
-const lineCss = css({
-  shapeRendering: 'crispEdges',
-  stroke: Theme.mediumGray,
-  strokeWidth: 0.99,
-});
-
-const tickCss = css({
-  '& line': {
-    stroke: Theme.mediumGray,
-    shapeRendering: 'crispEdges',
-    strokeWidth: 0.99,
-  },
-});
-
 const DEFAULT_TICK_PROPS = {
   fill: Theme.mediumGray,
   fontFamily: Theme.Font.default,
@@ -98,10 +78,10 @@ const Axis = ({
 }) => (
   <VxAxis
     {...props}
-    axisLineClassName={`${lineCss}`}
-    tickClassName={`${tickCss}`}
+    axisLineClassName="axis-line"
+    tickClassName="axis-tick"
     labelOffset={labelOffset}
-    labelClassName={`${labelCss}`}
+    labelClassName="axis-label"
     orientation={orientation}
     rangePadding={rangePadding}
     tickLabelProps={tickLabelProps}

src/web/components/layout/globalstyles.js

@@ -78,6 +78,16 @@ const GlobalStyles = createGlobalStyle`
   p {
     margin: 0 0 10px;
   }
+
+  .axis-label {
+    fill: ${Theme.darkGray}
+  }
+
+  .axis-line, .axis-tick line {
+    shape-rendering: 'crispEdges';
+    stroke: ${Theme.mediumGray};
+    stroke-width: 0.99;
+  }
 `;
 
 export default GlobalStyles;