Add layer button and increase contrast

src/components/layers/LayerList.jsx

@@ -1,7 +1,9 @@
 import React from 'react'
 import cloneDeep from 'lodash.clonedeep'
 
+import Button from '../Button'
 import LayerListItem from './LayerListItem'
+import AddIcon from 'react-icons/lib/md/add-circle-outline'
 
 import style from '../../libs/style.js'
 import {SortableContainer, SortableHandle, arrayMove} from 'react-sortable-hoc';
@@ -67,9 +69,16 @@ class LayerListContainer extends React.Component {
         onLayerVisibilityToggle={this.onLayerVisibilityToggle.bind(this)}
       />
     })
-    return <ul className="maputnik-layer-list-container">
+    return <div className="maputnik-layer-list">
+      <header className="maputnik-layer-list-header">
+        <span>Layers</span>
+        <span className="maputnik-space" />
+        <Button className="maputnik-add-layer">Add Layer</Button>
+      </header>
+      <ul className="maputnik-layer-list-container">
         {layerPanels}
       </ul>
+    </div>
   }
 }
 

src/components/layers/LayerListItem.jsx

@@ -46,7 +46,7 @@ class IconAction extends React.Component {
 
   render() {
     return <a
-      className="maputnik-icon-action"
+      className="maputnik-layer-list-icon-action"
       onClick={this.props.onClick}
     >
       {this.renderIcon()}

src/styles/_base.scss

@@ -14,7 +14,7 @@
 
 html {
   color: $color-white;
-  font-size: $font-size-2;
+  font-size: $font-size-5;
   box-sizing: border-box;
 }
 
@@ -33,6 +33,7 @@ p {
 h1 {
   font-size: $font-size-2;
   margin-bottom: $margin-3;
+  font-weight: bold;
 }
 
 h2 {

src/styles/_components.scss

@@ -19,7 +19,6 @@
     box-sizing: border-box;
     font-size: $font-size-6;
     line-height: 2;
-    color: $color-lowgray;
     user-select: none;
     position: relative;
     vertical-align: top;
@@ -86,8 +85,8 @@
   margin: $margin-3;
 
   &-label {
-    display: inline-block;
     color: $color-lowgray;
+    display: inline-block;
     user-select: none;
     width: 50%;
     vertical-align: top;
@@ -124,3 +123,4 @@
     color: $color-red;
   }
 }
+

src/styles/_input.scss

@@ -10,7 +10,7 @@
   padding-right: $margin-2;
   border: none;
   background-color: $color-gray;
-  color: $color-lowgray;
+  color: lighten($color-lowgray, 12);
 }
 
 .maputnik-string {

src/styles/_layer.scss

@@ -1,11 +1,29 @@
 // LAYER LIST
-.maputnik-layer-list-container {
+.maputnik-add-layer {
+}
+
+.maputnik-layer-list {
+  &-header{
+    padding: $margin-2;
+    font-weight: bold;
+    font-size: $font-size-5;
+    color: $color-lowgray;
+    display: flex;
+    flex-direction: row;
+
+    > * {
+      vertical-align: middle;
+      margin-bottom: 0;
+    }
+  }
+
+  &-container {
     padding: 0;
     margin: 0;
     padding-bottom: $margin-5;
-}
+  }
 
-.maputnik-layer-list-item {
+  &-item {
     font-weight: 400;
     color: $color-lowgray;
     font-size: $font-size-6;
@@ -22,40 +40,41 @@
     line-height: 1.3;
     display: flex;
     flex-direction: row;
-}
+  }
 
-.maputnik-icon-action svg {
+  &-icon-action svg {
     fill: $color-black;
-}
+  }
 
-.maputnik-layer-list-item:hover, .maputnik-layer-list-item-selected {
+  .maputnik-layer-list-item:hover, .maputnik-layer-list-item-selected {
     background-color: lighten($color-black, 2);
 
-  .maputnik-icon-action svg {
+    .maputnik-layer-list-icon-action svg {
-    fill: $color-midgray;
+      fill: darken($color-lowgray, 0.5);
       &:hover {
-      fill: $color-lowgray;
+        fill: $color-white;
+      }
     }
   }
-}
 
-.maputnik-layer-list-item-selected {
+  &-item-selected {
     color: $color-white;
-}
+  }
 
-.maputnik-layer-list-item-id {
+  &-item-id {
     width: 115px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+  }
 }
 
+
 // FILTER EDITOR
 .maputnik-layer-editor-group {
   font-weight: bold;
   font-size: $font-size-5;
   background-color: lighten($color-black, 2);
-
   color: $color-lowgray;
   cursor: pointer;
   user-select: none;