Sync styling of marker in both map and timeline from config

src/components/Dashboard.jsx

@@ -92,7 +92,7 @@ class Dashboard extends React.Component {
 
   render () {
     const { actions, app, domain, ui } = this.props
-    console.log(app)
+
     return (
       <div>
         <Toolbar

src/components/Map.jsx

@@ -280,7 +280,7 @@ function mapStateToProps (state) {
       tiles: state.ui.tiles,
       dom: state.ui.dom,
       narratives: state.ui.style.narratives,
-      mapSelectedEvents: state.ui.style.mapSelectedEvents,
+      mapSelectedEvents: state.ui.style.selectedEvents,
       shapes: state.ui.style.shapes
     }
   }

src/components/Timeline.jsx

@@ -290,15 +290,12 @@ class Timeline extends React.Component {
                 dims={dims}
                 onApplyZoom={this.onApplyZoom}
               />
-              {/* <Labels */}
-              {/*   dims={dims} */}
-              {/*   timelabels={this.state.timerange} */}
-              {/* /> */}
               <Markers
                 selected={this.props.app.selected}
                 getEventX={this.getDatetimeX}
                 getCategoryY={this.state.scaleY}
                 transitionDuration={this.state.transitionDuration}
+                styles={this.props.ui.styles}
               />
               <Events
                 datetimes={this.props.domain.datetimes}
@@ -333,7 +330,8 @@ function mapStateToProps (state) {
       narrative: state.app.narrative
     },
     ui: {
-      dom: state.ui.dom
+      dom: state.ui.dom,
+      styles: state.ui.style.selectedEvents
     }
   }
 }

src/components/presentational/Timeline/Markers.js

@@ -1,12 +1,18 @@
 import React from 'react'
 
-const TimelineMarkers = ({ getEventX, getCategoryY, transitionDuration, selected }) => {
+const TimelineMarkers = ({ styles, getEventX, getCategoryY, transitionDuration, selected }) => {
   function renderMarker (event) {
     return (
       <circle
         className='timeline-marker'
         cx={0}
         cy={0}
+        stroke={styles ? styles.stroke : '#ffffff'}
+        stroke-opacity='1'
+        stroke-width={styles ? styles['stroke-width'] : 2}
+        stroke-linecap=''
+        stroke-linejoin='round'
+        stroke-dasharray={styles ? styles['stroke-dasharray'] : '2,2'}
         style={{
           'transform': `translate(${getEventX(event)}px, ${getCategoryY(event.category)}px)`,
           '-webkit-transition': `transform ${transitionDuration / 1000}s ease`,

src/scss/timeline.scss

@@ -198,10 +198,6 @@
         stroke-dasharray: 1px 2px;
       }
 
-      .datetime {
-        /*transition: transform 0.2s ease;*/
-      }
-
       .event {
         cursor: pointer;
         opacity: .7;
@@ -213,9 +209,6 @@
 
       .timeline-marker {
         fill: none;
-        stroke: $offwhite;
-        stroke-width: 2;
-        stroke-dasharray: 5px 2px;
         transition: transform 0.2s ease;
       }