From ce52d5cf4297c2d4d046f79ea5f9fe23929caac2 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sat, 14 May 2016 19:03:05 +0900
Subject: [PATCH] improve style of StatusBar & display pathname from StatusBar

---
 browser/main/StatusBar/StatusBar.styl | 17 ++++++++++++++++-
 browser/main/StatusBar/index.js       |  6 ++++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/browser/main/StatusBar/StatusBar.styl b/browser/main/StatusBar/StatusBar.styl
index 6865b23b..bdbc431d 100644
--- a/browser/main/StatusBar/StatusBar.styl
+++ b/browser/main/StatusBar/StatusBar.styl
@@ -1,9 +1,19 @@
 .root
   absolute bottom left right
-  height 24px
+  height $statusBar-height
   border-top $ui-border
   background-color $ui-backgroundColor
 
+.pathname
+  absolute left
+  height 24px
+  overflow ellipsis
+  width 350px
+  line-height 24px
+  font-size 12px
+  padding 0 15px
+  color $ui-inactive-text-color
+
 .zoom
   navButtonColor()
   absolute right
@@ -21,3 +31,8 @@
   border-width 0 0 0 1px
   border-style solid
   border-color $ui-borderColor
+  &:active .update-icon
+    color white
+
+.update-icon
+  color $brand-color
diff --git a/browser/main/StatusBar/index.js b/browser/main/StatusBar/index.js
index 9985fd77..f7fc5e85 100644
--- a/browser/main/StatusBar/index.js
+++ b/browser/main/StatusBar/index.js
@@ -49,14 +49,16 @@ class StatusBar extends React.Component {
   }
 
   render () {
-    let { config } = this.props
+    let { config, location } = this.props
+
     return (
       <div className='StatusBar'
         styleName='root'
       >
+        <div styleName='pathname'>{location.pathname}</div>
         {this.state.updateAvailable
           ? <button onClick={this.updateApp} styleName='update'>
-            <i className='fa fa-cloud-download'/> Update is available!
+            <i styleName='update-icon' className='fa fa-cloud-download'/> Update is available!
           </button>
           : null
         }