renamed js folder as common + moved hardcoded colors into global.js

src/actions/index.js

@@ -1,5 +1,5 @@
 /* global fetch, alert */
-import { urlFromEnv } from '../js/utilities'
+import { urlFromEnv } from '../common/utilities'
 
 // TODO: relegate these URLs entirely to environment variables
 const EVENT_DATA_URL = urlFromEnv('EVENT_EXT')

src/common/global.js

@@ -0,0 +1,13 @@
+
+const colors = {
+  fa_red : '#eb443e',
+  yellow : '#ffd800',
+  black : '#000',
+  white : '#fff'
+}
+
+export default {
+  darkBackground : colors.black,
+  primaryHighlight : colors.yellow,
+  secondaryHighlight : colors.white
+}

src/components/Card.jsx

@@ -1,8 +1,8 @@
-import copy from '../js/data/copy.json'
+import copy from '../common/data/copy.json'
 import {
   parseDate,
   formatterWithYear
-} from '../js/utilities'
+} from '../common/utilities'
 import React from 'react'
 
 import CardTimestamp from './presentational/Card/Timestamp'

src/components/CardStack.jsx

@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
 import * as selectors from '../selectors'
 
 import Card from './Card.jsx'
-import copy from '../js/data/copy.json'
+import copy from '../common/data/copy.json'
 
 class CardStack extends React.Component {
   constructor () {

src/components/InfoPopup.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import copy from '../js/data/copy.json'
+import copy from '../common/data/copy.json'
 
 export default ({ ui, app, methods }) => {
   function renderIntro () {

src/components/Layout.js

@@ -16,7 +16,7 @@ import Notification from './Notification.jsx'
 import StaticPage from './StaticPage'
 import TemplateCover from './presentational/covers/TemplateCover'
 
-import { parseDate } from '../js/utilities'
+import { parseDate } from '../common/utilities'
 import { isMobile } from 'react-device-detect'
 
 class Dashboard extends React.Component {

src/components/Overlay/Loading.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import copy from '../../js/data/copy.json'
+import copy from '../../common/data/copy.json'
 
 const LoadingOverlay = ({ isLoading, language }) => {
   let classes = 'loading-overlay'

src/components/Overlay/Media.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import Content from './Content'
 import Controls from './Controls'
-import { selectTypeFromPathWithPoster } from '../../js/utilities'
+import { selectTypeFromPathWithPoster } from '../../common/utilities'
 
 class SourceOverlay extends React.Component {
   constructor () {

src/components/Timeline.jsx

@@ -4,8 +4,8 @@ import { connect } from 'react-redux'
 import * as selectors from '../selectors'
 import hash from 'object-hash'
 
-import copy from '../js/data/copy.json'
-import { formatterWithYear, parseDate } from '../js/utilities'
+import copy from '../common/data/copy.json'
+import { formatterWithYear, parseDate } from '../common/utilities'
 import Header from './presentational/Timeline/Header'
 import Axis from './TimelineAxis.jsx'
 import Clip from './presentational/Timeline/Clip'

src/components/Toolbar/CategoriesListPanel.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import Checkbox from '../presentational/Checkbox'
-import copy from '../../js/data/copy.json'
+import copy from '../../common/data/copy.json'
 
 export default ({
   categories,

src/components/Toolbar/Layout.js

@@ -9,8 +9,8 @@ import Search from './Search'
 import TagListPanel from './TagListPanel'
 import CategoriesListPanel from './CategoriesListPanel'
 import BottomActions from './BottomActions'
-import copy from '../../js/data/copy.json'
-import { trimAndEllipse } from '../../js/utilities.js'
+import copy from '../../common/data/copy.json'
+import { trimAndEllipse } from '../../common/utilities.js'
 
 class Toolbar extends React.Component {
   constructor (props) {

src/components/Toolbar/Search.js

@@ -1,6 +1,6 @@
 /* global fetch */
 import React from 'react'
-import copy from '../../js/data/copy.json'
+import copy from '../../common/data/copy.json'
 import TagFilter from './TagFilter'
 
 export default class Search extends React.Component {

src/components/Toolbar/TagListPanel.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import Checkbox from '../presentational/Checkbox'
-import copy from '../../js/data/copy.json'
+import copy from '../../common/data/copy.json'
 
 function TagListPanel ({
   tags,

src/components/presentational/Card/Category.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { capitalizeFirstLetter } from '../../../js/utilities.js'
+import { capitalizeFirstLetter } from '../../../common/utilities.js'
 
 const CardCategory = ({ categoryTitle, categoryLabel, color }) => (
   <div className='card-row card-cell category'>

src/components/presentational/Card/Location.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import copy from '../../../js/data/copy.json'
+import copy from '../../../common/data/copy.json'
 
 const CardLocation = ({ language, location, isPrecise }) => {
   if (location !== '') {

src/components/presentational/Card/Summary.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import copy from '../../../js/data/copy.json'
+import copy from '../../../common/data/copy.json'
 
 const CardSummary = ({ language, description, isHighlighted }) => {
   const summary = copy[language].cardstack.description

src/components/presentational/Card/Tags.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import copy from '../../../js/data/copy.json'
+import copy from '../../../common/data/copy.json'
 
 const CardTags = ({ tags, language }) => {
   const tagsLang = copy[language].cardstack.tags

src/components/presentational/Card/Timestamp.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import copy from '../../../js/data/copy.json'
-import { isNotNullNorUndefined } from '../../../js/utilities'
+import copy from '../../../common/data/copy.json'
+import { isNotNullNorUndefined } from '../../../common/utilities'
 
 const CardTimestamp = ({ timelabel, language, precision }) => {
   // const daytimeLang = copy[language].cardstack.timestamp

src/components/presentational/Map/Events.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Portal } from 'react-portal'
+import colors from '../../../common/global.js'
 
 function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation, selected, narrative, onSelect, svg, locations }) {
   function getCoordinatesForPercent (radius, percent) {
@@ -16,7 +17,7 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,
           cx="0"
           cy="0"
           r="10"
-          stroke="#ffd800"
+          stroke={colors.primaryHighlight}
           fill-opacity="0.0"
         />}
       </React.Fragment>
@@ -30,7 +31,7 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,
 
     let styles = ({
       fill: getCategoryColor(locCategory),
-      stroke: '#ffffff',
+      stroke: colors.darkBackground,
       strokeWidth: 0,
       fillOpacity: 0.85,
       ...extraStyles

src/components/presentational/Map/SelectedEvents.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Portal } from 'react-portal'
+import colors from '../../../common/global.js'
 
 class MapSelectedEvents extends React.Component {
   renderMarker (event) {
@@ -13,7 +14,7 @@ class MapSelectedEvents extends React.Component {
       >
         <path
           className='leaflet-interactive'
-          stroke={styles ? styles.stroke : '#ffd800'}
+          stroke={styles ? styles.stroke : colors.primaryHighlight}
           stroke-opacity='1'
           stroke-width={styles ? styles['stroke-width'] : 2}
           stroke-linecap=''

src/components/presentational/Timeline/Markers.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import colors from '../../../common/global.js'
 
 const TimelineMarkers = ({ styles, getEventX, getCategoryY, transitionDuration, selected }) => {
   function renderMarker (event) {
@@ -7,7 +8,7 @@ const TimelineMarkers = ({ styles, getEventX, getCategoryY, transitionDuration,
         className='timeline-marker'
         cx={0}
         cy={0}
-        stroke={styles ? styles.stroke : '#ffffff'}
+        stroke={styles ? styles.stroke : colors.secondaryHighlight}
         stroke-opacity='1'
         stroke-width={styles ? styles['stroke-width'] : 2}
         stroke-linecap=''

src/reducers/app.js

@@ -1,5 +1,5 @@
 import initial from '../store/initial.js'
-import { parseDate, toggleFlagAC } from '../js/utilities'
+import { parseDate, toggleFlagAC } from '../common/utilities'
 
 import {
   UPDATE_HIGHLIGHTED,

src/selectors/helpers.js

@@ -1,4 +1,4 @@
-import { parseTimestamp } from '../js/utilities'
+import { parseTimestamp } from '../common/utilities'
 /**
 * Some handy helpers
 */

src/selectors/index.js

@@ -1,5 +1,5 @@
 import { createSelector } from 'reselect'
-import { compareTimestamp, insetSourceFrom } from '../js/utilities'
+import { compareTimestamp, insetSourceFrom } from '../common/utilities'
 import { isTimeRangedIn } from './helpers'
 
 // Input selectors

src/store/initial.js

@@ -1,6 +1,5 @@
 import { mergeDeepLeft } from 'ramda'
-
-const FA_RED = '#eb443e';
+import colors from '../common/global.js'
 
 const initial = {
   /*
@@ -107,12 +106,12 @@ const initial = {
     tiles: 'openstreetmap', // ['openstreetmap', 'streets', 'satellite']
     style: {
       categories: {
-        default: FA_RED
+        default: colors.fa_red
       },
       narratives: {
         default: {
           opacity: 0.9,
-          stroke: FA_RED,
+          stroke: colors.fa_red,
           strokeWidth: 3
         }
       },