From 8828adfc9c04d4bdcbc7442b09ef58a9b79882d1 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sun, 18 Mar 2018 11:58:45 +0000
Subject: [PATCH] Fixed up notification styling a little

---
 resources/assets/js/components/notification.js | 2 +-
 resources/assets/sass/_components.scss         | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/resources/assets/js/components/notification.js b/resources/assets/js/components/notification.js
index daef5bd6f..c352a9c85 100644
--- a/resources/assets/js/components/notification.js
+++ b/resources/assets/js/components/notification.js
@@ -18,7 +18,7 @@ class Notification {
     show(textToShow = '') {
         this.elem.removeEventListener('transitionend', this.hideCleanup);
         this.textElem.textContent = textToShow;
-        this.elem.style.display = 'block';
+        this.elem.style.display = 'grid';
         setTimeout(() => {
             this.elem.classList.add('showing');
         }, 1);
diff --git a/resources/assets/sass/_components.scss b/resources/assets/sass/_components.scss
index 70cfaf2b4..f15528167 100644
--- a/resources/assets/sass/_components.scss
+++ b/resources/assets/sass/_components.scss
@@ -10,8 +10,8 @@
   box-shadow: $bs-med;
   z-index: 999999;
   cursor: pointer;
-  max-width: 480px;
-  transition: transform ease-in-out 360ms;
+  max-width: 360px;
+  transition: transform ease-in-out 280ms;
   transform: translate3d(580px, 0, 0);
   display: grid;
   grid-template-columns: 64px 1fr;
@@ -27,6 +27,7 @@
   }
   span {
     vertical-align: middle;
+    line-height: 1.3;
   }
   &.pos {
     background-color: $positive;
@@ -43,6 +44,9 @@
   &.showing {
     transform: translate3d(0, 0, 0);
   }
+  &.showing:hover {
+    transform: translate3d(0, -2px, 0);
+  }
 }
 
 [chapter-toggle] {