Modify layout

package.json

@@ -8,7 +8,7 @@
     "build": "webpack --config webpack.production.config.js --progress --profile --colors",
     "test": "karma start --single-run",
     "test-watch": "karma start",
-    "start": "webpack-dev-server --progress --profile --colors",
+    "start": "webpack-dev-server --progress --profile --colors --watch-poll",
     "lint": "eslint --ext js --ext jsx {src,test}"
   },
   "repository": {

src/layers/list.jsx

@@ -44,19 +44,12 @@ export class LayerList extends React.Component {
     }).toIndexedSeq()
 
     return <div>
-			<Toolbar style={{marginRight: 20}}>
-				<NavItem>
-					<Heading>Layers</Heading>
-				</NavItem>
-				<Space auto x={1} />
-			</Toolbar>
-
       <div className={scrollbars.darkScrollbar} style={{
         overflowY: "scroll",
         bottom:0,
         left:0,
         right:0,
-				top:40,
+        top:1,
         position: "absolute",
       }}>
       {layerPanels}

src/scrollbars.scss

@@ -1,12 +1,12 @@
 .darkScrollbar::-webkit-scrollbar {
-	background-color: #313131;
+    background-color: #26282e;
     width: 10px;
 }
 
 .darkScrollbar::-webkit-scrollbar-thumb {
     border-radius: 6px;
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
-	background-color: #555;
+    background-color: #40444e;
     padding-left: 2px;
     padding-right: 2px;
 }

src/theme.js

@@ -11,10 +11,10 @@ export const fullHeight = {
 }
 
 const baseColors = {
-	black: '#242424',
-	gray: '#313131',
-	midgray: '#778',
-	lowgray: '#dcdcdc',
+  black: '#1c1f24',
+  gray: '#26282e',
+  midgray: '#36383e',
+  lowgray: '#8e8e8e',
   white: '#fff',
   blue: '#00d9f7',
   green: '#B4C7AD',

src/toolbar.jsx

@@ -12,16 +12,26 @@ import Fixed from 'rebass/dist/Fixed'
 
 import MdFileDownload from 'react-icons/lib/md/file-download'
 import MdFileUpload from 'react-icons/lib/md/file-upload'
+import MdOpenInBrowser from 'react-icons/lib/md/open-in-browser'
 import MdSettings from 'react-icons/lib/md/settings'
 import MdInfo from 'react-icons/lib/md/info'
 import MdLayers from 'react-icons/lib/md/layers'
 import MdSave from 'react-icons/lib/md/save'
+import MdStyle from 'react-icons/lib/md/style'
 import MdMap from 'react-icons/lib/md/map'
+import MdInsertEmoticon from 'react-icons/lib/md/insert-emoticon'
+import MdFontDownload from 'react-icons/lib/md/font-download'
+import MdHelpOutline from 'react-icons/lib/md/help-outline'
+import MdFindInPage from 'react-icons/lib/md/find-in-page'
 
 import style from './style.js'
 import { fullHeight } from './theme.js'
 import theme from './theme.js';
 
+const InlineBlock = props => <div style={{display: "inline-block", ...props.style}}>
+  {props.children}
+</div>
+
 export class Toolbar extends React.Component {
   static propTypes = {
     // A new style has been uploaded
@@ -57,77 +67,85 @@ export class Toolbar extends React.Component {
 
   saveButton() {
     if(this.props.styleAvailable) {
-			return <Block>
+      return <InlineBlock>
         <Button onClick={this.props.onStyleSave} big={true}>
-					<Tooltip inverted rounded title="Save style">
           <MdSave />
-					</Tooltip>
+          Save
         </Button>
-			</Block>
+      </InlineBlock>
     }
     return null
   }
 
   downloadButton() {
     if(this.props.styleAvailable) {
-			return <Block>
+      return <InlineBlock>
         <Button onClick={this.props.onStyleDownload} big={true}>
-					<Tooltip inverted rounded title="Download style">
           <MdFileDownload />
-					</Tooltip>
+          Download
         </Button>
-			</Block>
+      </InlineBlock>
     }
     return null
   }
 
   render() {
-		return <Container style={{
-			...fullHeight,
+
+    return <div style={{
+      position: "fixed",
+      height: 50,
+      width: '100%',
       zIndex: 100,
       left: 0,
       top: 0,
-			backgroundColor: theme.colors.black }
-		}>
-			<Block>
+      backgroundColor: theme.colors.black
+    }}>
+      <InlineBlock>
+          <Button style={{width: 300, 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>
+      </InlineBlock>
+      <InlineBlock>
         <FileReaderInput onChange={this.onUpload.bind(this)}>
           <Button big={true} theme={this.props.styleAvailable ? "default" : "success"}>
-						<Tooltip inverted rounded title="Upload style">
-							<MdFileUpload />
-						</Tooltip>
+            <MdOpenInBrowser />
+            Open
           </Button>
         </FileReaderInput>
-			</Block>
+      </InlineBlock>
       {this.downloadButton()}
       {this.saveButton()}
-			<Block>
-				<Button big={true} onClick={this.props.onOpenLayers}>
-					<Tooltip inverted rounded title="Layers">
-						<MdLayers />
-					</Tooltip>
-				</Button>
-			</Block>
-			<Block>
-				<Button big={true} onClick={this.props.onOpenSources}>
-					<Tooltip inverted rounded title="Sources">
-						<MdMap />
-					</Tooltip>
-				</Button>
-			</Block>
-			<Block>
+      <InlineBlock>
         <Button big={true} onClick={this.props.onOpenSettings}>
-					<Tooltip inverted rounded title="Settings">
-						<MdSettings />
-					</Tooltip>
+          <MdLayers />
+          Tilesets
         </Button>
-			</Block>
-			<Block>
+      </InlineBlock>
+      <InlineBlock>
+        <Button big={true} onClick={this.props.onOpenSettings}>
+          <MdFontDownload />
+          Fonts
+        </Button>
+      </InlineBlock>
+      <InlineBlock>
+        <Button big={true} onClick={this.props.onOpenSettings}>
+          <MdInsertEmoticon/>
+          Icons
+        </Button>
+      </InlineBlock>
+      <InlineBlock>
+        <Button big={true} onClick={this.props.onOpenSettings}>
+          <MdFindInPage />
+          Inspect
+        </Button>
+      </InlineBlock>
+      <InlineBlock>
         <Button big={true} onClick={this.props.onOpenAbout}>
-					<Tooltip inverted rounded title="About">
-						<MdInfo />
-					</Tooltip>
+          <MdHelpOutline />
+          Help
         </Button>
-			</Block>
-		</Container>
+      </InlineBlock>
+    </div>
   }
 }

src/workspace.jsx

@@ -60,8 +60,9 @@ export class WorkspaceDrawer extends React.Component {
 
     return <div style={{
       ...fullHeight,
+      top: 50,
+      left: 0,
       zIndex: 100,
-			left: 60,
       width: 300,
       overflow: "hidden",
       backgroundColor: colors.gray}