From 02c854284844aefe9d4309c74ec1c5af1b87792b Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 31 Jan 2018 21:04:49 +0000
Subject: [PATCH] Added version number to the UI. Fixes #232

---
 src/components/Toolbar.jsx |  5 ++++-
 src/styles/_modal.scss     |  1 +
 src/styles/_toolbar.scss   | 13 ++++++++++++-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index 6b30fb5..5dfadf5 100644
--- a/src/components/Toolbar.jsx
+++ b/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')}>
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 6ec5109..6bd315c 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -76,6 +76,7 @@
   position: fixed;
   align-items: center;
   justify-content: center;
+  z-index: 9;
 
   @include flex-row;
 }
diff --git a/src/styles/_toolbar.scss b/src/styles/_toolbar.scss
index 3e4ed2c..ab6bc9f 100644
--- a/src/styles/_toolbar.scss
+++ b/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 {