From 53f0a6addad2560b9d45c5d1e4f8de6407449c9e Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Thu, 22 Dec 2016 12:06:04 +0100
Subject: [PATCH] Add hover effect for collapse header

---
 src/components/layers/LayerEditor.jsx      |  4 +---
 src/components/layers/LayerEditorGroup.jsx | 24 +++++++++++++---------
 src/components/layers/LayerListItem.jsx    |  1 -
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/components/layers/LayerEditor.jsx b/src/components/layers/LayerEditor.jsx
index f725223..f294940 100644
--- a/src/components/layers/LayerEditor.jsx
+++ b/src/components/layers/LayerEditor.jsx
@@ -142,9 +142,7 @@ export default class LayerEditor extends React.Component {
       </LayerEditorGroup>
     }
 
-    return <div style={{
-        padding: margins[0],
-    }}>
+    return <div>
       {propertyGroups}
       {dataGroup}
     </div>
diff --git a/src/components/layers/LayerEditorGroup.jsx b/src/components/layers/LayerEditorGroup.jsx
index 09fc7ce..08a218e 100644
--- a/src/components/layers/LayerEditorGroup.jsx
+++ b/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={{
-        border: 2,
-        borderStyle: 'solid',
-        borderColor: colors.gray,
-      }}>
-        <Collapse isOpened={this.props.isActive}>
-          {this.props.children}
-        </Collapse>
-      </div>
+      <Collapse isOpened={this.props.isActive}>
+        {this.props.children}
+      </Collapse>
     </div>
   }
 }
diff --git a/src/components/layers/LayerListItem.jsx b/src/components/layers/LayerListItem.jsx
index 6b65316..5483b59 100644
--- a/src/components/layers/LayerListItem.jsx
+++ b/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()
     }