Move the notification area from main window to preference modal

browser/components/RealtimeNotification.js

@@ -40,7 +40,7 @@ class RealtimeNotification extends React.Component {
       ? <a styleName='notification-link' href={notifications[0].linkUrl}
         onClick={(e) => this.handleLinkClick(e)}
       >
-        {notifications[0].text}
+        Info: {notifications[0].text}
       </a>
     : ''
 

browser/components/RealtimeNotification.styl

@@ -2,20 +2,20 @@
   z-index 1000
   font-size 12px
   position absolute
-  bottom 0px
-  right 0px
-  background-color #EBEBEB
+  bottom 20px
+  width 100%
+  float left
   height 30px
+  background-color none
 
 .notification-link
   position absolute
-  right 5px
-  top 5px
   text-decoration none
   color #282A36
+  font-size 14px
   border 1px solid #6FA8E6
   background-color alpha(#6FA8E6, 0.2)
-  padding 3px 9px
+  padding 5px 12px
   border-radius 2px
   transition 0.2s
   &:hover
@@ -23,7 +23,7 @@
 
 body[data-theme="dark"]
   .notification-area
-    background-color #1E2124
+    background-color none
 
   .notification-link
     color #fff

browser/main/Detail/MarkdownNoteDetail.styl

@@ -3,9 +3,7 @@
 
 .root
   absolute top right bottom
-  border-width 0 0 1px
-  border-style solid
-  border-color $ui-borderColor
+  border-width 0
   background-color $ui-noteDetail-backgroundColor
   box-shadow $note-detail-box-shadow
 
@@ -44,7 +42,6 @@
 
 body[data-theme="dark"]
   .root
-    border-color $ui-dark-borderColor
     background-color $ui-dark-noteDetail-backgroundColor
     box-shadow none
 

browser/main/Detail/SnippetNoteDetail.styl

@@ -3,9 +3,7 @@
 
 .root
   absolute top bottom right
-  border-width 0 0 1px
-  border-style solid
-  border-color $ui-borderColor
+  border-width 0
   background-color $ui-noteDetail-backgroundColor
   box-shadow $note-detail-box-shadow
 
@@ -57,7 +55,7 @@
 
 .override
   absolute bottom left
-  bottom 30px
+  bottom 2px
   left 60px
   height 23px
   z-index 101

browser/main/Main.js

@@ -14,7 +14,6 @@ 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')
@@ -192,14 +191,6 @@ class Main extends React.Component {
 
     // the width of the navigation bar when it is folded/collapsed
     const foldedNavigationWidth = 44
-    let notificationBarOffsetLeft
-    if (this.state.fullScreen) {
-      notificationBarOffsetLeft = 0
-    } else if (config.isSideNavFolded) {
-      notificationBarOffsetLeft = foldedNavigationWidth
-    } else {
-      notificationBarOffsetLeft = this.state.navWidth
-    }
 
     return (
       <div
@@ -268,9 +259,6 @@ class Main extends React.Component {
             ignorePreviewPointerEvents={this.state.isRightSliderFocused}
           />
         </div>
-        <RealtimeNotification
-          style={{left: notificationBarOffsetLeft}}
-        />
       </div>
     )
   }

browser/main/NoteList/NoteList.styl

@@ -2,7 +2,6 @@ $control-height = 30px
 
 .root
   absolute left bottom
-  bottom 30px
   top $topBar-height - 1
   background-color $ui-noteList-backgroundColor
 

browser/main/StatusBar/StatusBar.styl

@@ -2,8 +2,6 @@
 
 .root
   absolute bottom left right
-  height $statusBar-height
-  bottom 16px
   z-index 100
   background-color $ui-noteDetail-backgroundColor
   display flex

browser/main/modals/PreferencesModal/index.js

@@ -9,6 +9,7 @@ import StoragesTab from './StoragesTab'
 import ModalEscButton from 'browser/components/ModalEscButton'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './PreferencesModal.styl'
+import RealtimeNotification from 'browser/components/RealtimeNotification'
 
 class Preferences extends React.Component {
   constructor (props) {
@@ -136,6 +137,7 @@ class Preferences extends React.Component {
         <div ref='content' styleName='content'>
           {content}
         </div>
+        <RealtimeNotification/>
       </div>
     )
   }

browser/styles/index.styl

@@ -5,7 +5,7 @@ $danger-color = #c9302c
 $danger-lighten-color = lighten(#c9302c, 5%)
 
 // Layouts
-$statusBar-height = 36px
+$statusBar-height = 0px
 $sideNav-width = 200px
 $sideNav--folded-width = 44px
 $topBar-height = 60px