Imrove layer list design

package.json

@@ -25,6 +25,7 @@
     "mapbox-gl-style-spec": "mapbox/mapbox-gl-style-spec#83b1a3e5837d785af582efd5ed1a212f2df6a4ae",
     "ol-mapbox-style": "0.0.11",
     "openlayers": "^3.19.1",
+    "radium": "^0.18.1",
     "randomcolor": "^0.4.4",
     "react": "^15.4.0",
     "react-addons-pure-render-mixin": "^15.4.0",

src/app.jsx

@@ -123,7 +123,7 @@ export default class App extends React.Component {
         top: 50,
         left: 0,
         zIndex: 100,
-        width: 200,
+        width: 180,
         overflow: "hidden",
         backgroundColor: colors.gray
       }}>
@@ -136,7 +136,7 @@ export default class App extends React.Component {
       <div style={{
         ...fullHeight,
         top: 50,
-        left: 200,
+        left: 180,
         zIndex: 100,
         width: 300,
         overflow: "hidden",

src/layers/editor.jsx

@@ -128,13 +128,6 @@ export class LayerEditor extends React.Component {
 
     return <div style={{
         padding: theme.scale[0],
-        borderBottom: 1,
-        borderTop: 1,
-        borderLeft: 2,
-        borderRight: 0,
-        borderStyle: "solid",
-        borderColor: theme.borderColor,
-        borderLeftColor: this.props.layer.getIn(['metadata', 'maputnik:color'])
       }}>
       <Toolbar>
         <NavItem style={{fontWeight: 400}}>

src/layers/list.jsx

@@ -7,6 +7,7 @@ import NavItem from 'rebass/dist/NavItem'
 import Space from 'rebass/dist/Space'
 
 import { LayerEditor } from './editor.jsx'
+import LayerListItem from './listitem.jsx'
 import scrollbars from '../scrollbars.scss'
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import theme from '../theme.js'
@@ -39,25 +40,13 @@ export class LayerList extends React.Component {
   }
 
   render() {
-    var layerPanels = []
-    layerPanels = this.props.layers.map(layer => {
+    const layerPanels = this.props.layers.map(layer => {
       const layerId = layer.get('id')
-      return <div key={layerId} style={{
-          padding: theme.scale[0],
-          borderBottom: 1,
-          borderTop: 1,
-          borderLeft: 2,
-          borderRight: 0,
-          borderStyle: "solid",
-          borderColor: theme.borderColor
-      }}>
-        <Toolbar onClick={() => this.props.onLayerSelected(layerId)}>
-          <NavItem style={{fontWeight: 400}}>
-            #{layerId}
-          </NavItem>
-          <Space auto x={1} />
-        </Toolbar>
-      </div>
+      return <LayerListItem
+        key={layerId}
+        layerId={layerId}
+        onLayerSelected={this.props.onLayerSelected}
+      />
     }).toIndexedSeq()
 
     return <div>

src/layers/listitem.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import Radium from 'radium'
+import Immutable from 'immutable'
+import color from 'color'
+
+import Heading from 'rebass/dist/Heading'
+import Toolbar from 'rebass/dist/Toolbar'
+import NavItem from 'rebass/dist/NavItem'
+import Space from 'rebass/dist/Space'
+
+import { LayerEditor } from './editor.jsx'
+import scrollbars from '../scrollbars.scss'
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import theme from '../theme.js'
+
+@Radium
+class LayerListItem extends React.Component {
+  static propTypes = {
+    layerId: React.PropTypes.number.isRequired,
+    onLayerSelected: React.PropTypes.func.isRequired,
+  }
+
+  constructor(props) {
+    super(props)
+    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
+  }
+
+  render() {
+    return <div key={this.props.layerId} style={{
+        borderBottom: 1,
+        borderLeft: 2,
+        borderRight: 0,
+        borderStyle: "solid",
+        borderColor: color(theme.colors.gray).lighten(0.1).hexString(),
+    }}>
+      <div
+        onClick={() => this.props.onLayerSelected(this.props.layerId)}
+        style={{
+          backgroundColor: theme.colors.gray,
+          ":hover": {
+            backgroundColor: color(theme.colors.gray).lighten(0.15).hexString(),
+          }
+        }}
+      >
+        <NavItem style={{
+          fontWeight: 400,
+          color: theme.colors.lowgray,
+        }}>
+          #{this.props.layerId}
+        </NavItem>
+      </div>
+    </div>
+  }
+}
+
+export default Radium(LayerListItem);

src/scrollbars.scss

@@ -1,6 +1,6 @@
 .darkScrollbar::-webkit-scrollbar {
     background-color: #26282e;
-    width: 10px;
+    width: 5px;
 }
 
 .darkScrollbar::-webkit-scrollbar-thumb {

src/theme.js

@@ -48,7 +48,7 @@ export const inputBase = {
 }
 
 const scale = [3, 5, 10, 30, 40]
-const fontSizes = [28, 24, 20, 16, 14, 12, 10]
+const fontSizes = [26, 20, 16, 14, 12, 10]
 
 const border = {
   borderColor: colors.black,

src/toolbar.jsx

@@ -122,7 +122,7 @@ export class Toolbar extends React.Component {
         toggle={() => this.toggleSettings.bind(this)}
       />
       <InlineBlock>
-          <Button style={{width: 300, textAlign: 'left'}}>
+          <Button style={{width: 180, textAlign: 'left'}}>
             <img src="https://github.com/maputnik/editor/raw/master/media/maputnik.png" alt="Maputnik" style={{width: 40, height: 40, paddingRight: 5, verticalAlign: 'middle'}}/>
             <span style={{fontSize: 20 }}>Maputnik</span>
           </Button>