From 1ae5594d9a8860f61755a70edb5316ea0af528d0 Mon Sep 17 00:00:00 2001 From: lukasmartinelli Date: Fri, 9 Sep 2016 11:29:18 +0200 Subject: [PATCH] Improve layer colors --- .babelrc | 3 -- package.json | 14 +++++++ src/app.jsx | 2 +- src/layers.jsx | 13 +++--- src/map.jsx | 5 ++- src/theme.js | 105 +++++++++++++++++++++++++++---------------------- 6 files changed, 81 insertions(+), 61 deletions(-) delete mode 100644 .babelrc diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 86c445f5..00000000 --- a/.babelrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": ["es2015", "react"] -} diff --git a/package.json b/package.json index f27cce6b..419fe649 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,15 @@ "rebass": "^0.3.1", "sass-loader": "^4.0.1" }, + "babel": { + "presets": [ + "es2015", + "react" + ], + "plugins": [ + "transform-object-rest-spread" + ] + }, "jshintConfig": { "esversion": 6 }, @@ -49,6 +58,8 @@ "ecmaVersion": 6, "sourceType": "module", "ecmaFeatures": { + "impliedStrict": true, + "experimentalObjectRestSpread": true, "jsx": true } }, @@ -61,11 +72,14 @@ "babel-loader": "6.2.4", "babel-plugin-transform-class-properties": "^6.11.5", "babel-plugin-transform-decorators-legacy": "^1.3.4", + "babel-plugin-transform-object-rest-spread": "^6.8.0", "babel-plugin-transform-runtime": "^6.15.0", "babel-preset-es2015": "6.14.0", "babel-preset-react": "6.11.1", "babel-runtime": "^6.11.6", "css-loader": "0.25.0", + "eslint": "^3.4.0", + "eslint-plugin-react": "^6.2.0", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "0.9.0", "html-webpack-plugin": "^2.22.0", diff --git a/src/app.jsx b/src/app.jsx index 98c56992..2ea730d6 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -60,7 +60,7 @@ export default class App extends React.Component { render() { console.log(this.state.mapStyle) - return
+ return
diff --git a/src/layers.jsx b/src/layers.jsx index aac2964b..2b54af9f 100644 --- a/src/layers.jsx +++ b/src/layers.jsx @@ -1,7 +1,6 @@ import React from 'react' -import ScrollArea from 'react-scrollbar' -import { Checkbox, Slider, Switch, Input, Panel, PanelHeader, Toolbar, NavItem, Tooltip, Container, Space} from 'rebass' +import { Heading, Checkbox, Slider, Switch, Input, Panel, PanelHeader, Toolbar, NavItem, Tooltip, Container, Space} from 'rebass' import { Button, Text } from 'rebass' import Collapse from 'react-collapse' @@ -50,7 +49,9 @@ export class LayerPanel extends React.Component { } return - {this.props.layer.id} + + #{this.props.layer.id} + {layer} @@ -64,10 +65,8 @@ export class LayerEditor extends React.Component { return }); return
- - Toolbar - - {layerPanels} + Layers + {layerPanels}
} } diff --git a/src/map.jsx b/src/map.jsx index 8891885a..24ca3eb2 100644 --- a/src/map.jsx +++ b/src/map.jsx @@ -1,5 +1,6 @@ import React from 'react' import ReactMapboxGl from "react-mapbox-gl" +import theme from './theme.js' export class Map extends React.Component { constructor(props) { @@ -11,8 +12,8 @@ export class Map extends React.Component { return - } - return
+ } + return
} } diff --git a/src/theme.js b/src/theme.js index 692c4842..bd09a88a 100644 --- a/src/theme.js +++ b/src/theme.js @@ -3,54 +3,66 @@ const caps = { letterSpacing: '.2em' } +const baseColors = { + black: '#242424', + gray: '#313131', + midgray: '#778', + white: '#fff', + blue: '#00d9f7', + green: '#0f8', + orange: '#fb3', + red: '#f04', +} + +const themeColors = { + primary: baseColors.gray, + secondary: baseColors.midgray, + default: baseColors.gray, + info: baseColors.blue, + success: baseColors.green, + warning: baseColors.orange, + error: baseColors.red +} + +const colors = { + ...baseColors, + ...themeColors +} + +const scale = [3, 5, 10, 20, 40] +const fontSizes = [28, 24, 20, 16, 14, 12, 10] + +const border = { + borderColor: colors.black, + borderRadius: 0, +} + const dark = { name: 'Dark', - color: '#eee', - fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif', - backgroundColor: '#111', - borderRadius: 5, - borderColor: `rgba(255, 255, 255, ${1/16})`, + color: colors.white, + fontFamily: 'Roboto, sans-serif', + scale, + fontSizes, + colors, + inverted: colors.midGray, + ...border, - colors: { - black: '#242424', - gray: '#313131', - white: '#fff', - blue: '#00d9f7', - info: '#00d9f7', - green: '#0f8', - success: '#0f8', - orange: '#fb3', - warning: '#fb3', - primary: '#778', - midgray: '#778', - gray: '#333339', - secondary: '#333339', - red: '#f04', - error: '#f04' - }, - inverted: '#222', - - scale: [ - 3, 5, 10, 20, 40 - ], - - Card: { - backgroundColor: '#222', - border: 0, - }, - Heading: caps, + Panel: { + backgroundColor: colors.gray, + ...border, + borderLeft: 0, + borderRight: 0, + marginBottom: 0, + }, + PanelHeader: { + marginRight: -10, + fontSize: fontSizes[4], + fontWeight: 400, + color: colors.white, + }, Button: { color: '#00d9f7', }, - ButtonOutline: { - color: '#00d9f7', - }, - Toolbar: { - minHeight: 64, - color: '#00d9f7', - backgroundColor: "rgba(0, 0, 0, 0.8)" - }, - Label: { opacity: 5/8 }, Menu: { color: '#00d9f7', backgroundColor: '#000' @@ -59,12 +71,9 @@ const dark = { color: '#111', opacity: 15/16 }, - Text: { - opacity: 7/8 - }, - Footer: { - opacity: 1/2 - } + Header: { + fontWeight: 400, + }, } export default dark