fix lint errors

src/components/Card.jsx

@@ -90,7 +90,7 @@ class Card extends React.Component {
   renderTimestamp () {
     let timelabel = this.makeTimelabel(this.props.event.timestamp)
 
-    let precision = this.props.event.time_display;
+    let precision = this.props.event.time_display
     if (precision === '_date_only') {
       precision = ''
       timelabel = timelabel.substring(0, 11)
@@ -160,9 +160,12 @@ class Card extends React.Component {
   }
 
   render () {
-    const { isSelected } = this.props
+    const { isSelected, idx } = this.props
     return (
-      <li className={`event-card ${isSelected ? 'selected' : ''}`}>
+      <li
+        className={`event-card ${isSelected ? 'selected' : ''}`}
+        id={`event-card-${idx}`}
+      >
         {this.renderMain()}
         {this.state.isOpen ? this.renderExtra() : null}
         {isSelected ? this.renderCaret() : null}

src/components/Dashboard.jsx

@@ -14,7 +14,7 @@ import InfoPopUp from './InfoPopup.jsx'
 import Timeline from './Timeline.jsx'
 import Notification from './Notification.jsx'
 
-import { parseDate, injectSource } from '../js/utilities'
+import { parseDate } from '../js/utilities'
 
 class Dashboard extends React.Component {
   constructor (props) {
@@ -172,6 +172,5 @@ function mapDispatchToProps (dispatch) {
 
 export default connect(
   state => state,
-  // state => injectSource("Hromadske.tv - Paratroopers Video"),
   mapDispatchToProps
 )(Dashboard)

src/components/Timeline.jsx

@@ -232,7 +232,7 @@ class Timeline extends React.Component {
       // make sure the zoom doesn't go over them
       const minDate = parseDate(this.props.app.timeline.rangeLimits[0])
       const maxDate = parseDate(this.props.app.timeline.rangeLimits[1])
-    
+
       newDomain0 = (newDomain0 < minDate) ? minDate : newDomain0
       newDomainF = (newDomainF > maxDate) ? maxDate : newDomainF
     }

src/components/presentational/Map/Events.jsx

@@ -2,15 +2,13 @@ import React from 'react'
 import { Portal } from 'react-portal'
 
 function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation, narrative, onSelect, svg, locations }) {
-
-  function getCoordinatesForPercent(radius, percent) {
-    const x = radius * Math.cos(2 * Math.PI * percent);
-    const y = radius * Math.sin(2 * Math.PI * percent);
-    return [x, y];
+  function getCoordinatesForPercent (radius, percent) {
+    const x = radius * Math.cos(2 * Math.PI * percent)
+    const y = radius * Math.sin(2 * Math.PI * percent)
+    return [x, y]
   }
 
-  function renderLocationSlicesByCategory(location) {
-
+  function renderLocationSlicesByCategory (location) {
     const locCategory = location.events.length > 0 ? location.events[0].category : 'default'
     const customStyles = styleLocation ? styleLocation(location) : null
     const extraStyles = customStyles[0]
@@ -25,7 +23,7 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,
 
     const colorSlices = location.events.map(e => getCategoryColor(e.category))
 
-    let cumulativeAngleSweep = 0;
+    let cumulativeAngleSweep = 0
 
     return (
       <React.Fragment>
@@ -34,22 +32,22 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,
 
           // Based on the number of events in each location,
           // create a slice per event filled with its category color
-          const [startX, startY] = getCoordinatesForPercent(r, cumulativeAngleSweep);
-          
-          cumulativeAngleSweep = (idx + 1) / colorSlices.length;
-          
-          const [endX, endY] = getCoordinatesForPercent(r, cumulativeAngleSweep);
+          const [startX, startY] = getCoordinatesForPercent(r, cumulativeAngleSweep)
+
+          cumulativeAngleSweep = (idx + 1) / colorSlices.length
+
+          const [endX, endY] = getCoordinatesForPercent(r, cumulativeAngleSweep)
 
           // if the slices are less than 2, take the long arc
-          const largeArcFlag = (colorSlices.length === 1) ? 1 : 0;
+          const largeArcFlag = (colorSlices.length === 1) ? 1 : 0
 
           // create an array and join it just for code readability
           const arc = [
-            `M ${startX} ${startY}`,                           // Move
+            `M ${startX} ${startY}`, // Move
             `A ${r} ${r} 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
-            `L 0 0 `,                                          // Line
-            `L ${startX} ${startY} Z`,                          // Line
-          ].join(' ');
+            `L 0 0 `, // Line
+            `L ${startX} ${startY} Z` // Line
+          ].join(' ')
 
           const extraStyles = ({
             ...styles,
@@ -65,9 +63,9 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,
             />
           )
         })}
-        
+
       </React.Fragment>
-    ) 
+    )
   }
 
   function renderLocation (location) {
@@ -79,8 +77,7 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,
       longitude: '32.2'
     }
     */
-   const { x, y } = projectPoint([location.latitude, location.longitude])
-
+    const { x, y } = projectPoint([location.latitude, location.longitude])
 
     // in narrative mode, only render events in narrative
     if (narrative) {
@@ -100,7 +97,7 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,
       <g
         className='location'
         transform={`translate(${x}, ${y})`}
-        onClick={() => onSelect(location.events)}        
+        onClick={() => onSelect(location.events)}
       >
         {renderLocationSlicesByCategory(location)}
         {extraRender ? extraRender() : null}

src/components/presentational/Map/Narratives.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Portal } from 'react-portal'
-import { concatStatic } from 'rxjs/operator/concat';
-import { single } from 'rxjs/operator/single';
+// import { concatStatic } from 'rxjs/operator/concat'
+// import { single } from 'rxjs/operator/single'
 
 function MapNarratives ({ styles, onSelectNarrative, svg, narrative, narratives, projectPoint }) {
   function getNarrativeStyle (narrativeId) {
@@ -66,22 +66,22 @@ function MapNarratives ({ styles, onSelectNarrative, svg, narrative, narratives,
     const theta = Math.atan2(p2.y - p1.y, p2.x - p1.x) // Angle of narrative step line
     const alpha = Math.atan2(1, 2) // Angle of arrow overture
     const edge = 10 // Arrow edge length
-    const offset = (distance < 24) ? distance / 2 : 24;
+    const offset = (distance < 24) ? distance / 2 : 24
 
     // Arrow corners
     const coord0 = {
       x: p2.x - offset * Math.cos(theta),
       y: p2.y - offset * Math.sin(theta)
-    } 
+    }
     const coord1 = {
       x: coord0.x - edge * Math.cos(-theta - alpha),
       y: coord0.y + edge * Math.sin(-theta - alpha)
-    } 
+    }
     const coord2 = {
       x: coord0.x - edge * Math.cos(-theta + alpha),
       y: coord0.y + edge * Math.sin(-theta + alpha)
-    } 
-     
+    }
+
     return (<path
       className='narrative-step-arrow'
       d={`
@@ -92,9 +92,9 @@ function MapNarratives ({ styles, onSelectNarrative, svg, narrative, narratives,
       style={{
         ...styles,
         fillOpacity: styles.strokeOpacity,
-        fill: styles.stroke,
+        fill: styles.stroke
       }}
-    ></path>)    
+    />)
   }
 
   function _renderNarrativeStep (p1, p2, styles) {
@@ -102,25 +102,25 @@ function MapNarratives ({ styles, onSelectNarrative, svg, narrative, narratives,
 
     return (
       <g>
-      <line
-        className='narrative-step'
-        x1={p1.x}
-        x2={p2.x}
-        y1={p1.y}
-        y2={p2.y}
-        markerStart='none'
-        onClick={n => onSelectNarrative(n)}
-        style={{
-          strokeWidth,
-          strokeDasharray,
-          strokeOpacity,
-          stroke
-        }}
-      />
-      {(stroke !== 'none')
-        ? _renderNarrativeStepArrow(p1, p2, styles)
-        : ''
-      }
+        <line
+          className='narrative-step'
+          x1={p1.x}
+          x2={p2.x}
+          y1={p1.y}
+          y2={p2.y}
+          markerStart='none'
+          onClick={n => onSelectNarrative(n)}
+          style={{
+            strokeWidth,
+            strokeDasharray,
+            strokeOpacity,
+            stroke
+          }}
+        />
+        {(stroke !== 'none')
+          ? _renderNarrativeStepArrow(p1, p2, styles)
+          : ''
+        }
       </g>
     )
   }

src/components/presentational/Map/SelectedEvents.jsx

@@ -20,7 +20,7 @@ class MapSelectedEvents extends React.Component {
           stroke-linejoin='round'
           stroke-dasharray={styles ? styles['stroke-dasharray'] : '2,2'}
           fill='none'
-          d={`M0,0a${r},${r} 0 1,0 ${r*2},0 a${r},${r} 0 1,0 -${r*2},0 `}
+          d={`M0,0a${r},${r} 0 1,0 ${r * 2},0 a${r},${r} 0 1,0 -${r * 2},0 `}
         />
       </g>
     )

src/scss/card.scss

@@ -5,13 +5,19 @@
   border: 1px solid $black;
   // border-radius: 3px;
   transition: 0.2 ease;
-  background: $darkwhite;
+  background: $midwhite;
   color: $darkgrey;
   box-shadow: 0 19px 19px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
   font-size: $large;
   line-height: $xxlarge;
   height: auto;
   opacity: 0.9;
+  transition: background-color 0.4s;
+
+  &:hover {
+    background: $lightwhite;
+    transition: background-color 0.4s;
+  }
 
   h4 {
     margin-bottom: 0;

src/scss/narrativecard.scss

@@ -122,17 +122,17 @@ NARRATIVE INFO
   }
 
   .material-icons {
-    font-size: 60pt;
+    font-size: 40pt;
     color: $offwhite;
     transition: color 0.2s ease;
 
     &.disabled {
-      color: $darkgrey;
+      color: $midgrey;
     }
 
     &:hover {
       cursor: pointer;
-      color: $darkgrey;
+      color: $midwhite;
     }
   }
 }