Imrove layer list design

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);