Add hover effect for collapse header

src/components/layers/LayerEditor.jsx

@@ -142,9 +142,7 @@ export default class LayerEditor extends React.Component {
       </LayerEditorGroup>
     }
 
-    return <div style={{
+    return <div>
-        padding: margins[0],
-    }}>
       {propertyGroups}
       {dataGroup}
     </div>

src/components/layers/LayerEditorGroup.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import Color from 'color'
 import colors from '../../config/colors'
 import { margins, fontSizes } from '../../config/scales'
 
@@ -28,32 +29,35 @@ export default class LayerEditorGroup extends React.Component {
     onActiveToggle: React.PropTypes.func.isRequired
   }
 
+  constructor(props) {
+    super(props)
+    this.state = { hover: false }
+  }
+
   render() {
     return <div>
       <div style={{
         fontSize: fontSizes[4],
-        backgroundColor: colors.gray,
+        backgroundColor: this.state.hover ? Color(colors.black).lighten(0.30).string() : Color(colors.black).lighten(0.15).string(),
         color: colors.lowgray,
+        cursor: 'pointer',
+        userSelect: 'none',
         padding: margins[1],
         display: 'flex',
         flexDirection: 'row',
         lineHeight: '20px',
       }}
+        onMouseOver={e => this.setState({hover: true})}
+        onMouseOut={e => this.setState({hover: false})}
         onClick={e => this.props.onActiveToggle(!this.props.isActive)}
       >
         <span>{this.props.title}</span>
         <span style={{flexGrow: 1}} />
         <Collapser isCollapsed={this.props.isActive} />
       </div>
-      <div style={{
+      <Collapse isOpened={this.props.isActive}>
-        border: 2,
+        {this.props.children}
-        borderStyle: 'solid',
+      </Collapse>
-        borderColor: colors.gray,
-      }}>
-        <Collapse isOpened={this.props.isActive}>
-          {this.props.children}
-        </Collapse>
-      </div>
     </div>
   }
 }

src/components/layers/LayerListItem.jsx

@@ -135,7 +135,6 @@ class LayerListItem extends React.Component {
     }
 
     if(this.state.hover) {
-      console.log('hooover')
       itemStyle.backgroundColor = Color(colors.black).lighten(0.10).string()
     }