From 3cea407ae691a9dad2882a9485759d06f1e53627 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 17 Dec 2015 13:06:42 +0100
Subject: [PATCH 1/2] Use left alignment for global notification messages

---
 sass/ascribe_global_notification.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sass/ascribe_global_notification.scss b/sass/ascribe_global_notification.scss
index 5286a32c..f07ce217 100644
--- a/sass/ascribe_global_notification.scss
+++ b/sass/ascribe_global_notification.scss
@@ -22,7 +22,7 @@
     display: table-cell;
     font-size: 1.25em;
     padding-right: 3em;
-    text-align: right;
+    text-align: left;
     vertical-align: middle;
 }
 

From f8193a5e16ab535ab9d26f63ba334f835c5bcd4d Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 19 Jan 2016 18:07:04 +0100
Subject: [PATCH 2/2] Change alignment of global notifications
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Use left text alignment for desktop  and center alignment for mobile
notifications.

Also adds a slight transition delay before showing the notification
because react can sometimes be slow at rendering the notification’s
message, making it initially appear invisible.
---
 sass/ascribe_global_notification.scss | 56 ++++++++++++++++-----------
 1 file changed, 34 insertions(+), 22 deletions(-)

diff --git a/sass/ascribe_global_notification.scss b/sass/ascribe_global_notification.scss
index f07ce217..9f31883c 100644
--- a/sass/ascribe_global_notification.scss
+++ b/sass/ascribe_global_notification.scss
@@ -7,23 +7,23 @@
     position: fixed;
     transition: .2s bottom cubic-bezier(.77, 0, .175, 1);
     width: 100%;
-}
 
-.ascribe-global-notification-off {
-    bottom: -3.5em;
-}
+    > div {
+        padding: .5em 1em;
+        text-align: center;
+    }
 
-.ascribe-global-notification-on {
-    bottom: 0;
-}
+    &.ascribe-global-notification-off {
+        bottom: -5em;
+    }
 
-.ascribe-global-notification > div,
-.ascribe-global-notification-bubble > div {
-    display: table-cell;
-    font-size: 1.25em;
-    padding-right: 3em;
-    text-align: left;
-    vertical-align: middle;
+    &.ascribe-global-notification-on {
+        bottom: 0;
+
+        // React can sometimes take some time to load the notification message,
+        // so add a small delay before showing the notification
+        transition-delay: 0.2s;
+    }
 }
 
 .ascribe-global-notification-bubble {
@@ -33,21 +33,33 @@
     color: white;
     display: table;
     height: 3.5em;
+    max-width: 75%;
     position: fixed;
-    right: -50em;
-    transition: 1s right ease;
+    transition: 0.5s right ease;
 
     > div {
         padding: .75em 1.5em;
+        text-align: left;
+    }
+
+    &.ascribe-global-notification-bubble-off {
+        right: -100em;
+    }
+
+    &.ascribe-global-notification-bubble-on {
+        right: 3.5em;
+
+        // React can sometimes take some time to load the notification message,
+        // so add a small delay before showing the notification
+        transition-delay: 0.5s;
     }
 }
 
-.ascribe-global-notification-bubble-off {
-    right: -100em;
-}
-
-.ascribe-global-notification-bubble-on {
-    right: 3.5em;
+.ascribe-global-notification > div,
+.ascribe-global-notification-bubble > div {
+    display: table-cell;
+    font-size: 1.25em;
+    vertical-align: middle;
 }
 
 .ascribe-global-notification-danger {