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">
-      {layerPanels}
-    </ul>
+    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,61 +1,80 @@
 // LAYER LIST
-.maputnik-layer-list-container {
-  padding: 0;
-  margin: 0;
-  padding-bottom: $margin-5;
+.maputnik-add-layer {
 }
 
-.maputnik-layer-list-item {
-  font-weight: 400;
-  color: $color-lowgray;
-  font-size: $font-size-6;
-  border-width: 0px 0px 1px;
-  border-style: solid;
-  border-color: lighten($color-black, 0.1);
-  user-select: none;
-  list-style: none;
-  z-index: 2000;
-  cursor: pointer;
-  position: relative;
-  padding: 5px 10px;
-  background-color: $color-black;
-  line-height: 1.3;
-  display: flex;
-  flex-direction: row;
-}
+.maputnik-layer-list {
+  &-header{
+    padding: $margin-2;
+    font-weight: bold;
+    font-size: $font-size-5;
+    color: $color-lowgray;
+    display: flex;
+    flex-direction: row;
 
-.maputnik-icon-action svg {
-  fill: $color-black;
-}
-
-.maputnik-layer-list-item:hover, .maputnik-layer-list-item-selected {
-  background-color: lighten($color-black, 2);
-
-  .maputnik-icon-action svg {
-    fill: $color-midgray;
-    &:hover {
-      fill: $color-lowgray;
+    > * {
+      vertical-align: middle;
+      margin-bottom: 0;
     }
   }
+
+  &-container {
+    padding: 0;
+    margin: 0;
+    padding-bottom: $margin-5;
+  }
+
+  &-item {
+    font-weight: 400;
+    color: $color-lowgray;
+    font-size: $font-size-6;
+    border-width: 0px 0px 1px;
+    border-style: solid;
+    border-color: lighten($color-black, 0.1);
+    user-select: none;
+    list-style: none;
+    z-index: 2000;
+    cursor: pointer;
+    position: relative;
+    padding: 5px 10px;
+    background-color: $color-black;
+    line-height: 1.3;
+    display: flex;
+    flex-direction: row;
+  }
+
+  &-icon-action svg {
+    fill: $color-black;
+  }
+
+  .maputnik-layer-list-item:hover, .maputnik-layer-list-item-selected {
+    background-color: lighten($color-black, 2);
+
+    .maputnik-layer-list-icon-action svg {
+      fill: darken($color-lowgray, 0.5);
+      &:hover {
+        fill: $color-white;
+      }
+    }
+  }
+
+  &-item-selected {
+    color: $color-white;
+  }
+
+  &-item-id {
+    width: 115px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
-.maputnik-layer-list-item-selected {
-  color: $color-white;
-}
-
-.maputnik-layer-list-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;