Added version number to the UI. Fixes #232

src/components/Toolbar.jsx

@@ -22,6 +22,7 @@ import SettingsModal from './modals/SettingsModal'
 import ExportModal from './modals/ExportModal'
 import SourcesModal from './modals/SourcesModal'
 import OpenModal from './modals/OpenModal'
+import pkgJson from '../../package.json'
 
 import style from '../libs/style'
 
@@ -136,7 +137,9 @@ export default class Toolbar extends React.Component {
           className="maputnik-toolbar-logo"
         >
           <img src={logoImage} alt="Maputnik" />
-          <h1>Maputnik</h1>
+          <h1>Maputnik
+            <span className="maputnik-toolbar-version">v{pkgJson.version}</span>
+          </h1>
         </ToolbarLink>
         <div className="maputnik-toolbar__actions">
           <ToolbarAction onClick={this.toggleModal.bind(this, 'open')}>

src/styles/_modal.scss

@@ -76,6 +76,7 @@
   position: fixed;
   align-items: center;
   justify-content: center;
+  z-index: 9;
 
   @include flex-row;
 }

src/styles/_toolbar.scss

@@ -37,11 +37,22 @@
   color: $color-white;
   text-decoration: none;
 
+  h1 {
+    position: relative;
+  }
+
   &:hover {
     background-color: $color-midgray;
   }
 }
 
+.maputnik-toolbar-version {
+  position: absolute;
+  font-size: 10px;
+  bottom: 0;
+  margin-left: 4px;
+}
+
 .maputnik-toolbar-action {
   @extend .maputnik-toolbar-link;
 }
@@ -56,7 +67,7 @@
 }
 
 .maputnik-toolbar-logo {
-  flex: 0 0 140px;
+  flex: 0 0 170px;
 }
 
 .maputnik-toolbar__inner {