fixes to work cleanly with example sheet

src/components/presentational/Timeline/ZoomControls.js

@@ -1,8 +1,15 @@
 import React from 'react'
 
+function zoomIsActive(duration, extent) {
+  if (duration > 1570000 && extent > 1570000) {
+    return true;
+  }
+  return duration === extent
+}
+
 const TimelineZoomControls = ({ extent, zoomLevels, dims, onApplyZoom }) => {
   function renderZoom (zoom, idx) {
-    const isActive = (zoom.duration === extent)
+    const isActive = zoomIsActive(zoom.duration, extent)
     return (
       <text
         className={`zoom-level-button ${isActive ? 'active' : ''}`}

src/store/initial.js

@@ -1,5 +1,7 @@
 import { mergeDeepLeft } from 'ramda'
 
+const FA_RED = '#eb443e';
+
 const initial = {
   /*
    * The Domain or 'domain' of this state refers to the tree of data
@@ -105,12 +107,12 @@ const initial = {
     tiles: 'openstreetmap', // ['openstreetmap', 'streets', 'satellite']
     style: {
       categories: {
-        default: '#f3de2c'
+        default: FA_RED
       },
       narratives: {
         default: {
           opacity: 0.9,
-          stroke: 'red',
+          stroke: FA_RED,
           strokeWidth: 3
         }
       },