All components use getCategoryColor

src/components/Card.jsx

@@ -41,17 +41,15 @@ class Card extends React.Component {
   }
 
   renderCategory() {
-    const eventCat = this.props.event.category || 'other';
     const categoryTitle = copy[this.props.language].cardstack.category;
-    const colorType = this.props.style.categories[eventCat] || this.props.style.categories['other'];
-    console.log(eventCat, this.props.event.category, this.props.style.categories)
     const categoryLabel = this.props.event.category;
+    const color = this.props.getCategoryColor(this.props.event.category);
 
     return (
       <CardCategory
         categoryTitle={categoryTitle}
         categoryLabel={categoryLabel}
-        colorType={colorType}
+        color={color}
       />
     );
   }

src/components/CardStack.jsx

@@ -22,11 +22,10 @@ class CardStack extends React.Component {
             event={event}
             language={this.props.language}
             tools={this.props.tools}
-            style={this.props.style}
             isLoading={this.props.isLoading}
             getNarrativeLinks={this.props.getNarrativeLinks}
             getCategoryGroup={this.props.getCategoryGroup}
-            getCategoryGroupColor={this.props.getCategoryGroupColor}
+            getCategoryColor={this.props.getCategoryColor}
             getCategoryLabel={this.props.getCategoryLabel}
             highlight={this.props.highlight}
             select={this.props.select}
@@ -99,7 +98,6 @@ function mapStateToProps(state) {
     selected: state.app.selected,
     language: state.app.language,
     tools: state.ui.tools,
-    style: state.ui.style,
     isCardstack: state.ui.flags.isCardstack,
     isLoading: state.ui.flags.isFetchingEvents
   }

src/components/Dashboard.jsx

@@ -92,8 +92,8 @@ class Dashboard extends React.Component {
     }
   }
 
-  getCategoryColor(category) {
-    return this.props.ui.style.categories[category];
+  getCategoryColor(category='other') {
+    return this.props.ui.style.categories[category] || this.props.style.categories['other']
   }
 
   getNarrativeLinks(event) {

src/components/Viewport.jsx

@@ -43,8 +43,7 @@ function mapStateToProps(state) {
     },
     ui: {
       dom: state.ui.dom,
-      narratives: state.ui.style.narratives,
-      categories: state.ui.style.narratives
+      narratives: state.ui.style.narratives
     }
   }
 }

src/components/presentational/CardCategory.js

@@ -1,10 +1,10 @@
 import React from 'react';
 
-const CardCategory = ({ categoryTitle, categoryLabel, colorType }) => (
+const CardCategory = ({ categoryTitle, categoryLabel, color }) => (
   <div className="event-card-section category">
     <h4>{categoryTitle}</h4>
     <p>
-      <span className='color-category' style={{ background: colorType }}/>
+      <span className='color-category' style={{ background: color }}/>
       {categoryLabel}
     </p>
   </div>

src/js/map/map.js

@@ -8,8 +8,6 @@ import 'leaflet-polylinedecorator';
 export default function(newApp, ui, methods) {
   let svg, g, defs;
 
-  let categoryColorGroups = {};
-
   const domain = {
     locations: [],
     narratives: [],
@@ -22,10 +20,8 @@ export default function(newApp, ui, methods) {
     views: Object.assign({}, newApp.views),
   }
 
-  // const getCategoryGroup = methods.getCategoryGroup;
-  // const getCategoryColor = methods.getCategoryColor;
+  const getCategoryColor = methods.getCategoryColor;
   const select = methods.select;
-  const categoryColors = ui.categories;
   const narrativeProps = ui.narratives;
 
     // Map Settings
@@ -296,7 +292,7 @@ Stop and start the development process in terminal after you have added your tok
     eventsDom
       .enter().append('circle')
       .attr('class', 'location-event-marker')
-      .style('fill', (d, i) => categoryColors[domain.categories[i]])
+      .style('fill', (d, i) => getCategoryColor(domain.categories[i]))
       .transition()
       .duration(500)
       .attr('r', d => (d) ? Math.sqrt(16 * d) + 3 : 0);