From 4981747d8b87c9396b14d8d78781f8fbdac695a5 Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Tue, 20 Dec 2016 20:36:02 +0100
Subject: [PATCH] Make editor darker

---
 src/components/Layout.jsx               | 10 +++++-----
 src/components/Toolbar.jsx              | 14 +++++++++-----
 src/components/layers/LayerList.jsx     |  2 +-
 src/components/layers/LayerListItem.jsx | 10 +++++-----
 4 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
index 46bb45fe..d4672356 100644
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@@ -34,12 +34,12 @@ export default class Layout extends React.Component {
         position: 'absolute',
         bottom: 0,
         height: "100%",
-        top: 50,
+        top: 40,
         left: 0,
         zIndex: 100,
         width: 200,
         overflow: "hidden",
-        backgroundColor: colors.gray
+        backgroundColor: colors.black
       }}>
         {this.props.layerList}
       </div>
@@ -47,12 +47,12 @@ export default class Layout extends React.Component {
         position: 'absolute',
         bottom: 0,
         height: "100%",
-        top: 50,
+        top: 40,
         left: 200,
         zIndex: 100,
         width: 300,
-        backgroundColor: colors.gray}
-      }>
+        backgroundColor: colors.black
+      }}>
         {this.props.layerEditor}
       </div>
       {this.props.map}
diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index 522cf1c8..d9c78ecc 100644
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -101,7 +101,7 @@ export default class Toolbar extends React.Component {
   render() {
     return <div style={{
       position: "fixed",
-      height: 50,
+      height: 40,
       width: '100%',
       zIndex: 100,
       left: 0,
@@ -121,10 +121,14 @@ export default class Toolbar extends React.Component {
         toggle={() => this.toggleSettings.bind(this)}
       />
       <InlineBlock>
-          <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>
+        <Button style={{
+          width: 180,
+          textAlign: 'left',
+          backgroundColor: colors.black
+        }}>
+          <img src="https://github.com/maputnik/editor/raw/master/media/maputnik.png" alt="Maputnik" style={{width: 30, height: 30, paddingRight: 5, verticalAlign: 'middle'}}/>
+          <span style={{fontSize: 20, verticalAlign: 'middle' }}>Maputnik</span>
+        </Button>
       </InlineBlock>
       <InlineBlock>
         <FileReaderInput onChange={this.onUpload.bind(this)}>
diff --git a/src/components/layers/LayerList.jsx b/src/components/layers/LayerList.jsx
index 04f4c6f7..1a359ccb 100644
--- a/src/components/layers/LayerList.jsx
+++ b/src/components/layers/LayerList.jsx
@@ -82,7 +82,7 @@ class LayerListContainer extends React.Component {
       />
     })
     return <ScrollContainer>
-      <ul style={{ padding: margins[1], margin: 0 }}>
+      <ul style={{ padding: margins[1], paddingRight: 0, margin: 0 }}>
         {layerPanels}
       </ul>
     </ScrollContainer>
diff --git a/src/components/layers/LayerListItem.jsx b/src/components/layers/LayerListItem.jsx
index d8ea0f5e..cee6552f 100644
--- a/src/components/layers/LayerListItem.jsx
+++ b/src/components/layers/LayerListItem.jsx
@@ -45,7 +45,7 @@ class IconAction extends React.Component {
 
   renderIcon() {
     const iconStyle = {
-      fill: colors.gray
+      fill: colors.black
     }
 
     if(this.props.active) {
@@ -135,17 +135,17 @@ class LayerListItem extends React.Component {
       cursor: 'pointer',
       position: 'relative',
       padding: margins[1],
-      borderColor: Color(colors.gray).lighten(0.1).string(),
-      backgroundColor: colors.gray,
+      borderColor: Color(colors.black).lighten(0.10).string(),
+      backgroundColor: colors.black,
     }
 
     if(this.state.hover) {
       console.log('hooover')
-      itemStyle.backgroundColor = Color(colors.gray).lighten(0.10)
+      itemStyle.backgroundColor = Color(colors.black).lighten(0.10).string()
     }
 
     if(this.props.isSelected) {
-      itemStyle.backgroundColor = Color(colors.gray).lighten(0.15)
+      itemStyle.backgroundColor = Color(colors.black).lighten(0.15).string()
     }
 
     const iconProps = {