diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx index dc425afd..bf5f61c9 100644 --- a/src/components/Layout.jsx +++ b/src/components/Layout.jsx @@ -18,7 +18,7 @@ export default class Layout extends React.Component { getChildContext() { return { - reactIconBase: { size: 20 } + reactIconBase: { size: 14 } } } diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index 74e02074..f2645ed0 100644 --- a/src/components/Toolbar.jsx +++ b/src/components/Toolbar.jsx @@ -19,14 +19,21 @@ import SettingsModal from './modals/SettingsModal' import TilesetsModal from './modals/TilesetsModal' import style from '../libs/style' -import colors from '../config/colors'; +import colors from '../config/colors' +import { margins, fontSizes } from '../config/scales' -const InlineBlock = props =>
+const IconText = props => {props.children} -
+ const ToolbarAction = props => + style={{ + display: "inline-block", + padding: margins[1], + fontSize: fontSizes[4], + cursor: "pointer", + ...props.style, + }}> {props.children} @@ -64,23 +71,19 @@ export default class Toolbar extends React.Component { saveButton() { if(this.props.mapStyle.layers.length > 0) { - return - - - Save - - + return + + Save + } return null } downloadButton() { - return - - - Download - - + return + + Download + } toggleSettings() { @@ -113,50 +116,38 @@ export default class Toolbar extends React.Component { open={this.state.openTilesetsModal} toggle={() => this.toggleSettings.bind(this)} /> - - - Maputnik - Maputnik - - - + + Maputnik + Maputnik + + - - - Open - + + Open - + {this.downloadButton()} {this.saveButton()} - - - - Tilesets - - - - - - Style Settings - - - - - - Inspect - - - - - - Help - - + + + Tilesets + + + + Style Settings + + + + Inspect + + + + Help + } }