Fix layout at RealtimeNotification

browser/components/RealtimeNotification.js

@@ -37,7 +37,7 @@ class RealtimeNotification extends React.Component {
   render () {
     const { notifications } = this.state
     const link = notifications.length > 0
-      ? <a href={notifications[0].linkUrl}
+      ? <a styleName='notification-link' href={notifications[0].linkUrl}
         onClick={(e) => this.handleLinkClick(e)}
       >
         {notifications[0].text}
@@ -45,7 +45,7 @@ class RealtimeNotification extends React.Component {
     : ''
 
     return (
-      <div>{link}</div>
+      <div styleName='notification-area'>{link}</div>
     )
   }
 }

browser/components/RealtimeNotification.styl

@@ -1,2 +1,20 @@
-.realtime-notification
+.notification-area
-  font-size 1em
+  z-index 1000
+  font-size 12px
+  position absolute
+  bottom 0px
+  background-color #1E2124
+  width 100vw
+  height 30px
+  text-align center
+
+.notification-link
+  text-decoration none
+  color #fff
+  border 1px solid #5CB85C
+  background-color alpha(#5CB85C, 0.3)
+  padding 3px 9px
+  border-radius 2px
+  position absolute
+  bottom 4px
+  margin-left -10%

browser/main/Main.js

@@ -14,6 +14,7 @@ import InitModal from 'browser/main/modals/InitModal'
 import mixpanel from 'browser/main/lib/mixpanel'
 import mobileAnalytics from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import eventEmitter from 'browser/main/lib/eventEmitter'
+import RealtimeNotification from 'browser/components/RealtimeNotification'
 
 function focused () {
   mixpanel.track('MAIN_FOCUSED')
@@ -255,6 +256,7 @@ class Main extends React.Component {
             ignorePreviewPointerEvents={this.state.isRightSliderFocused}
           />
         </div>
+        <RealtimeNotification/>
       </div>
     )
   }

browser/main/StatusBar/index.js

@@ -2,7 +2,6 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StatusBar.styl'
 import ZoomManager from 'browser/main/lib/ZoomManager'
-import RealtimeNotification from 'browser/components/RealtimeNotification'
 
 const electron = require('electron')
 const { remote, ipcRenderer } = electron
@@ -60,10 +59,6 @@ class StatusBar extends React.Component {
           {Math.floor(config.zoom * 100)}%
         </button>
 
-        <RealtimeNotification
-          styleName='realtime-notification'
-        />
-
         {status.updateReady
           ? <button onClick={this.updateApp} styleName='update'>
             <i styleName='update-icon' className='fa fa-cloud-download' /> Ready to Update!