From 80c13f7c4f90c597ecf236c1cd632940d0996214 Mon Sep 17 00:00:00 2001
From: Cristian Beskid <schizosfera@gmail.com>
Date: Mon, 25 Sep 2017 17:17:34 +0200
Subject: [PATCH 1/5] Align notification bar with the navigation bar

---
 browser/components/RealtimeNotification.js |  2 +-
 browser/main/Main.js                       | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/browser/components/RealtimeNotification.js b/browser/components/RealtimeNotification.js
index dcd04586..3a6bcc27 100644
--- a/browser/components/RealtimeNotification.js
+++ b/browser/components/RealtimeNotification.js
@@ -45,7 +45,7 @@ class RealtimeNotification extends React.Component {
     : ''
 
     return (
-      <div styleName='notification-area'>{link}</div>
+      <div styleName='notification-area' style={this.props.style}>{link}</div>
     )
   }
 }
diff --git a/browser/main/Main.js b/browser/main/Main.js
index ed5904d5..e08e1488 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -20,7 +20,11 @@ function focused () {
   mixpanel.track('MAIN_FOCUSED')
 }
 
+// the width of the navigation bar when it is folded/collapsed
+const foldedNavigationWidth = 44;
+
 class Main extends React.Component {
+
   constructor (props) {
     super(props)
 
@@ -217,7 +221,7 @@ class Main extends React.Component {
         <div styleName={config.isSideNavFolded ? 'body--expanded' : 'body'}
           id='main-body'
           ref='body'
-          style={{left: config.isSideNavFolded ? 44 : this.state.navWidth}}
+          style={{left: config.isSideNavFolded ? foldedNavigationWidth : this.state.navWidth}}
         >
           <TopBar style={{width: this.state.listWidth}}
             {..._.pick(this.props, [
@@ -256,7 +260,9 @@ class Main extends React.Component {
             ignorePreviewPointerEvents={this.state.isRightSliderFocused}
           />
         </div>
-        <RealtimeNotification />
+        <RealtimeNotification
+          style={{left: config.isSideNavFolded ? foldedNavigationWidth : this.state.navWidth}}
+        />
       </div>
     )
   }

From a0c8ec3171ab9c0f0eb256a522c3b62633b211fa Mon Sep 17 00:00:00 2001
From: Cristian Beskid <schizosfera@gmail.com>
Date: Mon, 25 Sep 2017 17:26:08 +0200
Subject: [PATCH 2/5] Remove redundant semicolon

---
 browser/main/Main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/browser/main/Main.js b/browser/main/Main.js
index e08e1488..d2e5e630 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -21,7 +21,7 @@ function focused () {
 }
 
 // the width of the navigation bar when it is folded/collapsed
-const foldedNavigationWidth = 44;
+const foldedNavigationWidth = 44
 
 class Main extends React.Component {
 

From dc13b919b397da45e818f442fa7f0582d2fbd64b Mon Sep 17 00:00:00 2001
From: Cristian Beskid <schizosfera@gmail.com>
Date: Mon, 25 Sep 2017 17:34:40 +0200
Subject: [PATCH 3/5] Fix incorrect notification bar width

---
 browser/components/RealtimeNotification.styl | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/browser/components/RealtimeNotification.styl b/browser/components/RealtimeNotification.styl
index 9b1643ba..5ca9b03a 100644
--- a/browser/components/RealtimeNotification.styl
+++ b/browser/components/RealtimeNotification.styl
@@ -3,8 +3,8 @@
   font-size 12px
   position absolute
   bottom 0px
+  right:0px;
   background-color #EBEBEB
-  width 100vw
   height 30px
   text-align center
 
@@ -32,4 +32,4 @@ body[data-theme="dark"]
     background-color alpha(#5CB85C, 0.2)
     transition 0.2s
     &:hover
-      color #5CB85C
\ No newline at end of file
+      color #5CB85C

From 000cf2a86444d72b0c4f785bf0876d24947c7a1e Mon Sep 17 00:00:00 2001
From: Cristian Beskid <schizosfera@gmail.com>
Date: Mon, 25 Sep 2017 18:44:22 +0200
Subject: [PATCH 4/5] Center notification in the notification bar

---
 browser/components/RealtimeNotification.styl | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/browser/components/RealtimeNotification.styl b/browser/components/RealtimeNotification.styl
index 5ca9b03a..ebbbed93 100644
--- a/browser/components/RealtimeNotification.styl
+++ b/browser/components/RealtimeNotification.styl
@@ -3,21 +3,21 @@
   font-size 12px
   position absolute
   bottom 0px
-  right:0px;
+  right 0px
   background-color #EBEBEB
   height 30px
+  line-height 30px
   text-align center
 
 .notification-link
+  display inline-block
+  line-height normal
   text-decoration none
   color #282A36
   border 1px solid #6FA8E6
   background-color alpha(#6FA8E6, 0.2)
   padding 3px 9px
   border-radius 2px
-  position absolute
-  bottom 4px
-  margin-left -10%
   transition 0.2s
   &:hover
     color #1378BD

From ea81b0d414e34780eb74dbcfa0498465d0859a36 Mon Sep 17 00:00:00 2001
From: Cristian Beskid <schizosfera@gmail.com>
Date: Mon, 25 Sep 2017 23:08:12 +0200
Subject: [PATCH 5/5] Fix notification bar offset in full screen mode

---
 browser/main/Main.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/browser/main/Main.js b/browser/main/Main.js
index d2e5e630..2868e6a8 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -20,9 +20,6 @@ function focused () {
   mixpanel.track('MAIN_FOCUSED')
 }
 
-// the width of the navigation bar when it is folded/collapsed
-const foldedNavigationWidth = 44
-
 class Main extends React.Component {
 
   constructor (props) {
@@ -193,6 +190,17 @@ class Main extends React.Component {
   render () {
     let { config } = this.props
 
+    // 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
         className='Main'
@@ -261,7 +269,7 @@ class Main extends React.Component {
           />
         </div>
         <RealtimeNotification
-          style={{left: config.isSideNavFolded ? foldedNavigationWidth : this.state.navWidth}}
+          style={{left: notificationBarOffsetLeft}}
         />
       </div>
     )