From 2e0cc4511ce4dcb481b9a04d4be68186b5b0b7d5 Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Wed, 11 Jan 2017 20:48:15 +0100
Subject: [PATCH] Improve add layer button visually

---
 src/components/layers/LayerList.jsx |  2 +-
 src/styles/_layer.scss              | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/layers/LayerList.jsx b/src/components/layers/LayerList.jsx
index 56ad83e..e0739e2 100644
--- a/src/components/layers/LayerList.jsx
+++ b/src/components/layers/LayerList.jsx
@@ -175,7 +175,7 @@ class LayerListContainer extends React.Component {
           onLayersChange={this.props.onLayersChange}
       />
       <header className="maputnik-layer-list-header">
-        <span>Layers</span>
+        <span className="maputnik-layer-list-header-title">Layers</span>
         <span className="maputnik-space" />
         <Button
           onClick={this.toggleModal.bind(this, 'add')}
diff --git a/src/styles/_layer.scss b/src/styles/_layer.scss
index 0ef4978..b0492e1 100644
--- a/src/styles/_layer.scss
+++ b/src/styles/_layer.scss
@@ -5,9 +5,6 @@
 .maputnik-layer-list {
   &-header{
     padding: $margin-2;
-    font-weight: bold;
-    font-size: $font-size-5;
-    color: $color-white;
     display: flex;
     display: -ms-flexbox;
     @include vendor-prefix(flex-direction, row)
@@ -18,6 +15,13 @@
     }
   }
 
+  &-header-title {
+    font-size: $font-size-5;
+    color: $color-white;
+    font-weight: bold;
+    line-height: 1.3;
+  }
+
   &-container {
     padding: 0;
     margin: 0;