Add color categories correct shade to card

src/components/Card.jsx

@@ -41,8 +41,10 @@ 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.event.category || 'other';
+    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;
 
     return (

src/components/CardStack.jsx

@@ -22,6 +22,7 @@ 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}
@@ -96,8 +97,9 @@ class CardStack extends React.Component {
 function mapStateToProps(state) {
   return {
     selected: state.app.selected,
-    language: 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/presentational/CardCategory.js

@@ -4,7 +4,7 @@ const CardCategory = ({ categoryTitle, categoryLabel, colorType }) => (
   <div className="event-card-section category">
     <h4>{categoryTitle}</h4>
     <p>
-      <span className={`color-category ${colorType}`}/>
+      <span className='color-category' style={{ background: colorType }}/>
       {categoryLabel}
     </p>
   </div>

src/scss/_colors.scss

@@ -10,8 +10,13 @@ $midgrey: rgb(44, 44, 44);
 $darkgrey: #232323;
 $black: #000000;
 
-$category_group00: #FF0000;
-$category_group01: #226b22;
-$category_group02: #671f6f;
-$category_group03: #0000bf;
-$category_group04: #d3ce2a;
+// Category colors
+$default:   red;
+$alpha:     #00ff00;
+$beta:      #ff00ff;
+$other:     yellow;
+
+.default { background: $default; }
+.other { background: $other; }
+.alpha { background: $alpha; }
+.beta { background: $beta; }

src/scss/card.scss

@@ -112,12 +112,6 @@
       border-radius: 20px;
       display: inline-block;
       margin: 0px 5px 0 0;
-
-      &.category_group00 { background: $category_group00; }
-      &.category_group01 { background: $category_group01; }
-      &.category_group02 { background: $category_group02; }
-      &.category_group03 { background: $category_group03; }
-      &.category_group04 { background: $category_group04; }
     }
   }
 

src/scss/infopopup.scss

@@ -53,12 +53,6 @@
           border-radius: 10px;
           display: inline-block;
           margin: 0px 5px 0 0;
-
-          &.category_group00 { background: $category_group00; }
-          &.category_group01 { background: $category_group01; }
-          &.category_group02 { background: $category_group02; }
-          &.category_group03 { background: $category_group03; }
-          &.category_group04 { background: $category_group04; }
         }
       }
     }

src/store/initial.js

@@ -31,7 +31,7 @@ const initial = {
     filters: {
       timerange: [
           d3.timeParse("%Y-%m-%dT%H:%M:%S")("2014-08-22T12:00:00"),
-          d3.timeParse("%Y-%m-%dT%H:%M:%S")("2017-08-27T12:00:00")
+          d3.timeParse("%Y-%m-%dT%H:%M:%S")("2014-08-27T12:00:00")
       ],
       tags: [],
       categories: [],
@@ -76,7 +76,10 @@ const initial = {
 
       categories: {
         default: 'red',
-        other: "#FF0000"
+        // Add here other categories to differentiate by color, like:
+        alpha: '#00ff00',
+        beta: '#ff0000',
+        other: 'yellow'
       },
 
       narratives: {