Add cells to card and tidy up

src/components/Card.jsx

@@ -139,7 +139,7 @@ class Card extends React.Component {
           {this.renderTimestamp()}
           {this.renderLocation()}
         </div>
-        {this.renderCategory()}        
+        {this.renderCategory()}
         {this.renderSummary()}
       </div>
     );

src/components/presentational/CardCategory.js

@@ -1,11 +1,13 @@
 import React from 'react';
 
+import { capitalizeFirstLetter } from '../../js/data/utilities.js';
+
 const CardCategory = ({ categoryTitle, categoryLabel, color }) => (
-  <div className="card-cell category">
+  <div className="card-row card-cell category">
     <h4>{categoryTitle}</h4>
     <p>
+      {capitalizeFirstLetter(categoryLabel)}
       <span className='color-category' style={{ background: color }}/>
-      {categoryLabel}
     </p>
   </div>
 );

src/components/presentational/CardLocation.js

@@ -7,22 +7,22 @@ const CardLocation = ({ language, location }) => {
 
   if (isNotNullNorUndefined(location)) {
     return (
-      <p className="card-cell location">
+      <div className="card-cell location">
         <p>
           <i className="material-icons left">location_on</i>
           {location}
         </p>
-      </p>
+      </div>
     );
   } else {
     const unknown = copy[language].cardstack.unknown_location;
     return (
-      <p className="card-cell location">
+      <div className="card-cell location">
         <p>
           <i className="material-icons left">location_on</i>
           {unknown}
         </p>
-      </p>
+      </div>
     );
   }
 }

src/components/presentational/CardNarrative.js

@@ -3,10 +3,12 @@ import React from 'react';
 import CardNarrativeLink from './CardNarrativeLink';
 
 const CardNarrative = (props) => (
-  <div className="card-cell">
+  <div className="card-row">
     <h4>Connected events</h4>
-    <p>Next: <CardNarrativeLink {...props} event={props.next}/></p>
-    <p>Previous: <CardNarrativeLink {...props} event={props.prev} /></p>
+    <div className="card-cell">
+      <p>&larr; <CardNarrativeLink {...props} event={props.next}/></p>
+      <p>&rarr; <CardNarrativeLink {...props} event={props.prev} /></p>
+    </div>
   </div>
 );
 

src/components/presentational/CardSource.js

@@ -4,10 +4,11 @@ import copy from '../../js/data/copy.json';
 
 const CardSource = ({ source, language }) => {
   const source_lang = copy[language].cardstack.source;
+  if (!source) source = copy[language].cardstack.unknown_source;
 
   return (
-    <div className="card-cell source">
-      <h4>{source_lang}</h4>
+    <div className="card-row card-cell source">
+      <h4>{source_lang}: </h4>
       <p>{source}</p>
     </div>
   );

src/components/presentational/CardSummary.js

@@ -8,9 +8,11 @@ const CardSummary = ({ language, description, isHighlighted }) => {
   const descriptionText = (isHighlighted) ? description : `${description.substring(0, 40)}...`;
 
   return (
-    <div className="card-cell summary">
-      <h4>{summary}</h4>
-      <p>{descriptionText}</p>
+    <div className="card-row summary">
+      <div className="card-cell">
+        <h4>{summary}</h4>
+        <p>{descriptionText}</p>
+      </div>
     </div>
   );
 }

src/components/presentational/CardTags.js

@@ -8,8 +8,8 @@ const CardTags = ({ tags, language }) => {
 
   if (tags.length > 0) {
     return (
-      <div className="card-cell tags">
-        <h4>{tags_lang}</h4>
+      <div className="card-row card-cell tags">
+        <h4>{tags_lang}:</h4>
         <p>
           {tags.map((tag, idx) => {
               return (
@@ -26,7 +26,7 @@ const CardTags = ({ tags, language }) => {
     );
   }
   return (
-    <div className="card-cell tags">
+    <div className="card-row card-cell tags">
       <h4>{tags_lang}</h4>
       <p>{no_tags_lang}</p>
     </div>