Darker source editor

src/components/Heading.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { fontSizes } from '../config/scales'
+import { fontSizes, margins } from '../config/scales'
 
 class Heading extends React.Component {
   static propTypes = {
@@ -10,7 +10,9 @@ class Heading extends React.Component {
   render() {
     const headingProps = {
       style: {
+        fontWeight: 400,
         fontSize: fontSizes[this.props.level - 1],
+        marginBottom: margins[1],
         ...this.props.style
       }
     }

src/components/Toolbar.jsx

@@ -114,6 +114,7 @@ export default class Toolbar extends React.Component {
         mapStyle={this.props.mapStyle}
         onStyleChanged={this.props.onStyleChanged}
         isOpen={this.state.openSourcesModal}
+        //isOpen={true}
         toggle={() => this.toggleSources.bind(this)}
       />
       <ToolbarAction style={{

src/components/modals/Modal.jsx

@@ -18,13 +18,14 @@ class Modal extends React.Component {
       <div style={{
         minWidth: 350,
         maxWidth: 600,
-        backgroundColor: colors.gray,
+        backgroundColor: colors.black,
+        boxShadow: '0px 0px 5px 0px rgba(0,0,0,0.3)',
       }}>
         <div style={{
-          backgroundColor: colors.midgray,
+          backgroundColor: colors.gray,
           display: 'flex',
           flexDirection: 'row',
-          padding: margins[1],
+          padding: margins[2],
           fontSize: fontSizes[4],
         }}>
           {this.props.title}
@@ -36,7 +37,7 @@ class Modal extends React.Component {
           </a>
         </div>
         <div style={{
-          padding: margins[1]
+          padding: margins[2],
         }}>
           {this.props.children}
         </div>

src/components/modals/SettingsModal.jsx

@@ -29,11 +29,7 @@ class SettingsModal extends React.Component {
   }
 
   render() {
-    const inputProps = {
+    const inputProps = { }
-      style: {
-        backgroundColor: colors.midgray
-      }
-    }
     return <Modal
       isOpen={this.props.isOpen}
       toggleOpen={this.props.toggle}

src/components/modals/SourcesModal.jsx

@@ -5,7 +5,9 @@ import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import publicSources from '../../config/tilesets.json'
 import colors from '../../config/colors'
-import { margins } from '../../config/scales'
+import { margins, fontSizes } from '../../config/scales'
+
+import AddIcon from 'react-icons/lib/md/add-circle-outline'
 
 class PublicSource extends React.Component {
   static propTypes = {
@@ -21,27 +23,32 @@ class PublicSource extends React.Component {
         verticalAlign: 'top',
         marginTop: margins[2],
         marginRight: margins[2],
-        borderColor: colors.midgray,
+        backgroundColor: colors.gray,
-        borderStyle: 'solid',
-        borderWidth: 2,
         display: 'inline-block',
         width: 240,
-        height: 120,
+        fontSize: fontSizes[4],
+        color: colors.lowgray,
     }}>
       <div style={{
-        backgroundColor: colors.midgray,
+        padding: margins[2],
-        padding: margins[1],
         display: 'flex',
         flexDirection: 'row',
       }}>
-        <span>{this.props.title}</span>
+        <div>
+          <span style={{fontWeight: 700}}>{this.props.title}</span><br/>
+          <span style={{fontSize: fontSizes[5]}}>{this.props.id}</span>
+        </div>
         <span style={{flexGrow: 1}} />
-        <span>#{this.props.id}</span>
+        <a style={{
-      </div>
+          display: 'table',
-      <div style={{
+          cursor: 'pointer',
-        padding: margins[1],
+          backgroundColor: colors.midgray,
-      }}>
+          color: colors.lowgray,
-        <p>{this.props.description}</p>
+          padding: margins[1],
+          borderRadius: 2,
+        }}>
+          Add
+        </a>
       </div>
     </div>
   }
@@ -54,11 +61,7 @@ class SourceEditor extends React.Component {
   }
 
   render() {
-    const inputProps = {
+    const inputProps = { }
-      style: {
-        backgroundColor: colors.midgray
-      }
-    }
     return <div style={{
     }}>
       <InputBlock label={"Source ID"}>
@@ -103,12 +106,7 @@ class SourcesModal extends React.Component {
       />
     })
 
-    const inputProps = {
+    const inputProps = { }
-      style: {
-        backgroundColor: colors.midgray
-      }
-    }
-
     return <Modal
       isOpen={this.props.isOpen}
       toggleOpen={this.props.toggle}
@@ -122,6 +120,7 @@ class SourcesModal extends React.Component {
         <StringInput {...inputProps} />
       </InputBlock>
       <Heading level={4}>Choose Public Source</Heading>
+      <p style={{color: colors.lowgray, fontSize: fontSizes[5]}}>Add one of the publicly availble sources to your style.</p>
       <div style={{maxwidth: 500}}>
       {tilesetOptions}
       </div>

src/config/tilesets.json

@@ -3,8 +3,7 @@
     "id": "mapbox-streets",
     "type": "vector",
     "url": "mapbox://mapbox.mapbox-streets-v7",
-    "title": "Mapbox Streets",
+    "title": "Mapbox Streets"
-    "description": "Mapbox Streets provides a vector tileset for complex general-purpose maps."
   },
   {
     "id": "tilezen",
@@ -14,21 +13,18 @@
     ],
     "minZoom": 0,
     "maxZoom": 15,
-    "title": "Mapzen",
+    "title": "Mapzen Vector Tile Service"
-    "description": "Mapzen vector tile services"
   },
   {
     "id": "openmaptiles",
     "type": "vector",
     "url": "https://free.tilehosting.com/data/v3.json?key=25ItXg7aI5wurYDtttD",
-    "title": "OpenMapTiles",
+    "title": "OpenMapTiles CDN"
-    "description": "A free vector tile schema for general-purpose maps."
   },
   {
     "id": "swissnames-landscape",
     "type": "geojson",
     "data": "http://swissnames.lukasmartinelli.ch/data/landscape.geojson",
-    "title": "Geographic Names of Switzerland",
+    "title": "Landscape Names GeoJSON"
-    "description": "GeoJSON example from https://github.com/lukasmartinelli/swissnames"
   }
 ]

src/index.css

@@ -5,10 +5,6 @@
   font-style: normal;
 }
 
-html {
-  font-size: 10px
-}
-
 .chrome-picker {
   background-color: #1c1f24 !important;
   font-family: inherit !important;