WIP: better timeline styles

src/components/presentational/Timeline/Clip.js

@@ -3,10 +3,10 @@ import React from 'react'
 const TimelineClip = ({ dims }) => (
   <clipPath id='clip'>
     <rect
-      x={dims.margin_left}
+      x={dims.marginLeft}
       y='0'
-      width={dims.width - dims.margin_left - dims.width_controls}
-      height={dims.height - 25}
+      width={dims.width - dims.marginLeft - dims.width_controls}
+      height={dims.contentHeight}
     />
   </clipPath>
 )

src/components/presentational/Timeline/DatetimeBar.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-export default ({
+const actual = ({
   category,
   events,
   x,
@@ -21,3 +21,5 @@ export default ({
     height={height}
   />
 )
+
+export default () => null

src/components/presentational/Timeline/Events.js

@@ -98,7 +98,7 @@ const TimelineEvents = ({
             category={dot.category}
             events={unlocatedEvents}
             x={getDatetimeX(datetime)}
-            y={dims.margin_top}
+            y={dims.marginTop}
             width={(2 * sizes.eventDotR) * 0.9}
             height={dims.trackHeight}
             styleProps={unlocatedProps}

src/components/presentational/Timeline/Handles.js

@@ -4,14 +4,14 @@ const TimelineHandles = ({ dims, onMoveTime }) => {
   return (
     <g className='time-controls-inline'>
       <g
-        transform={`translate(${dims.margin_left - 20}, 120)`}
+        transform={`translate(${dims.marginLeft - 20}, ${dims.contentHeight - 10})`}
         onClick={() => onMoveTime('backwards')}
       >
         <circle r='15' />
         <path d='M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z' transform='rotate(270)' />
       </g>
       <g
-        transform={`translate(${dims.width - dims.width_controls + 20}, 120)`}
+        transform={`translate(${dims.width - dims.width_controls + 20}, ${dims.contentHeight - 10})`}
         onClick={() => onMoveTime('forward')}
       >
         <circle r='15' />

src/components/presentational/Timeline/Labels.js

@@ -7,8 +7,8 @@ const TimelineLabels = ({ dims, timelabels }) => {
     <g>
       <line
         class='axisBoundaries'
-        x1={dims.margin_left}
-        x2={dims.margin_left}
+        x1={dims.marginLeft}
+        x2={dims.marginLeft}
         y1='10'
         y2='20'
       />

src/components/presentational/Timeline/Markers.js

@@ -35,7 +35,7 @@ const TimelineMarkers = ({
       <rect
         className='timeline-marker'
         x={0}
-        y={-dims.margin_top - (noCategories > 2 ? noCategories * MARKER_DISPLACED : MARKER_DISPLACED)}
+        y={-dims.marginTop - (noCategories > 2 ? noCategories * MARKER_DISPLACED : MARKER_DISPLACED)}
         width={(2 * sizes.eventDotR) * 0.9}
         height={dims.trackHeight}
         stroke={styles ? styles.stroke : colors.primaryHighlight}