From 9861fbf7c806036e9ddcefe426c447812a217fb9 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Fri, 22 Sep 2017 22:56:32 +0900
Subject: [PATCH] Fix layout at RealtimeNotification

---
 browser/components/RealtimeNotification.js   |  4 ++--
 browser/components/RealtimeNotification.styl | 22 ++++++++++++++++++--
 browser/main/Main.js                         |  2 ++
 browser/main/StatusBar/index.js              |  5 -----
 4 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/browser/components/RealtimeNotification.js b/browser/components/RealtimeNotification.js
index 90316be5..dcd04586 100644
--- a/browser/components/RealtimeNotification.js
+++ b/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>
     )
   }
 }
diff --git a/browser/components/RealtimeNotification.styl b/browser/components/RealtimeNotification.styl
index c6942f67..3e4c120b 100644
--- a/browser/components/RealtimeNotification.styl
+++ b/browser/components/RealtimeNotification.styl
@@ -1,2 +1,20 @@
-.realtime-notification
-  font-size 1em
+.notification-area
+  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%
\ No newline at end of file
diff --git a/browser/main/Main.js b/browser/main/Main.js
index c5a86135..a404873d 100644
--- a/browser/main/Main.js
+++ b/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>
     )
   }
diff --git a/browser/main/StatusBar/index.js b/browser/main/StatusBar/index.js
index fe074353..c1ec0e71 100644
--- a/browser/main/StatusBar/index.js
+++ b/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!