Improve layer colors

.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["es2015", "react"]
-}

package.json

@@ -33,6 +33,15 @@
     "rebass": "^0.3.1",
     "sass-loader": "^4.0.1"
   },
+  "babel": {
+    "presets": [
+      "es2015",
+      "react"
+    ],
+    "plugins": [
+      "transform-object-rest-spread"
+    ]
+  },
   "jshintConfig": {
     "esversion": 6
   },
@@ -49,6 +58,8 @@
       "ecmaVersion": 6,
       "sourceType": "module",
       "ecmaFeatures": {
+        "impliedStrict": true,
+        "experimentalObjectRestSpread": true,
         "jsx": true
       }
     },
@@ -61,11 +72,14 @@
     "babel-loader": "6.2.4",
     "babel-plugin-transform-class-properties": "^6.11.5",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-object-rest-spread": "^6.8.0",
     "babel-plugin-transform-runtime": "^6.15.0",
     "babel-preset-es2015": "6.14.0",
     "babel-preset-react": "6.11.1",
     "babel-runtime": "^6.11.6",
     "css-loader": "0.25.0",
+    "eslint": "^3.4.0",
+    "eslint-plugin-react": "^6.2.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "0.9.0",
     "html-webpack-plugin": "^2.22.0",

src/app.jsx

@@ -60,7 +60,7 @@ export default class App extends React.Component {
 
   render() {
 		console.log(this.state.mapStyle)
-    return <div>
+    return <div style={{ fontFamily: theme.fontFamily, color: theme.color }}>
 			<Toolbar onStyleUpload={this.updateStyle} />
 			<WorkspaceDrawer mapStyle={this.state.mapStyle} />
 			<div className={layout.map}>

src/layers.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import ScrollArea from 'react-scrollbar'
 
-import { Checkbox, Slider, Switch, Input, Panel, PanelHeader, Toolbar, NavItem, Tooltip, Container, Space} from 'rebass'
+import { Heading, Checkbox, Slider, Switch, Input, Panel, PanelHeader, Toolbar, NavItem, Tooltip, Container, Space} from 'rebass'
 import { Button, Text } from 'rebass'
 import Collapse from 'react-collapse'
 
@@ -50,7 +49,9 @@ export class LayerPanel extends React.Component {
 		}
 
 		return <Panel>
-			<PanelHeader onClick={this.toggleLayer} inverted theme="default">{this.props.layer.id}</PanelHeader>
+			<PanelHeader onClick={this.toggleLayer} theme="default">
+				#{this.props.layer.id}
+			</PanelHeader>
 			<Collapse isOpened={this.state.isOpened}>
 				{layer}
 			</Collapse>
@@ -64,10 +65,8 @@ export class LayerEditor extends React.Component {
 			return <LayerPanel key={layer.id} layer={layer} />
 		});
 		return <div>
-			<Toolbar>
+			<Heading level={2}>Layers</Heading>
-				<NavItem is="a"> Toolbar </NavItem>
+			{layerPanels}
-			</Toolbar>
-			<ScrollArea speed={0.8} horizontal={false}>{layerPanels}</ScrollArea>
 		</div>
 	}
 }

src/map.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import ReactMapboxGl from "react-mapbox-gl"
+import theme from './theme.js'
 
 export class Map extends React.Component {
 	constructor(props) {
@@ -11,8 +12,8 @@ export class Map extends React.Component {
 			return <ReactMapboxGl
 				style={this.props.mapStyle}
 				accessToken="pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6IjIzcmN0NlkifQ.0LRTNgCc-envt9d5MzR75w"/>
-	}
+		}
-		return <div />
+		return <div style={{backgroundColor: theme.colors.black}}/>
 	}
 }
 

src/theme.js

@@ -3,54 +3,66 @@ const caps = {
   letterSpacing: '.2em'
 }
 
+const baseColors = {
+	black: '#242424',
+	gray: '#313131',
+	midgray: '#778',
+	white: '#fff',
+	blue: '#00d9f7',
+	green: '#0f8',
+	orange: '#fb3',
+	red: '#f04',
+}
+
+const themeColors = {
+	primary: baseColors.gray,
+	secondary: baseColors.midgray,
+	default: baseColors.gray,
+	info: baseColors.blue,
+	success: baseColors.green,
+	warning: baseColors.orange,
+	error: baseColors.red
+}
+
+const colors = {
+	...baseColors,
+	...themeColors
+}
+
+const scale = [3, 5, 10, 20, 40]
+const fontSizes = [28, 24, 20, 16, 14, 12, 10]
+
+const border = {
+  borderColor: colors.black,
+  borderRadius: 0,
+}
+
 const dark = {
   name: 'Dark',
-  color: '#eee',
+  color: colors.white,
-  fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
+	fontFamily: 'Roboto, sans-serif',
-  backgroundColor: '#111',
+  scale,
-  borderRadius: 5,
+	fontSizes,
-  borderColor: `rgba(255, 255, 255, ${1/16})`,
+  colors,
+  inverted: colors.midGray,
+	...border,
 
-  colors: {
+	Panel: {
-		black: '#242424',
+    backgroundColor: colors.gray,
-		gray: '#313131',
+		...border,
-		white: '#fff',
+		borderLeft: 0,
-    blue: '#00d9f7',
+		borderRight: 0,
-    info: '#00d9f7',
+		marginBottom: 0,
-    green: '#0f8',
+	},
-    success: '#0f8',
+	PanelHeader: {
-    orange: '#fb3',
+		marginRight: -10,
-    warning: '#fb3',
+		fontSize: fontSizes[4],
-    primary: '#778',
+		fontWeight: 400,
-    midgray: '#778',
+		color: colors.white,
-    gray: '#333339',
+	},
-    secondary: '#333339',
-    red: '#f04',
-    error: '#f04'
-  },
-  inverted: '#222',
-
-  scale: [
-    3, 5, 10, 20, 40
-  ],
-
-  Card: {
-    backgroundColor: '#222',
-    border: 0,
-  },
-  Heading: caps,
   Button: {
     color: '#00d9f7',
   },
-  ButtonOutline: {
-    color: '#00d9f7',
-  },
-  Toolbar: {
-    minHeight: 64,
-    color: '#00d9f7',
-    backgroundColor: "rgba(0, 0, 0, 0.8)"
-  },
-  Label: { opacity: 5/8 },
   Menu: {
     color: '#00d9f7',
     backgroundColor: '#000'
@@ -59,12 +71,9 @@ const dark = {
     color: '#111',
     opacity: 15/16
   },
-  Text: {
+	Header: {
-    opacity: 7/8
+		fontWeight: 400,
-  },
+	},
-  Footer: {
-    opacity: 1/2
-  }
 }
 
 export default dark