#57 notifications ui position tweak

src/com/ui/Notifications.js

@@ -1,10 +1,10 @@
-import anime from 'animejs/lib/anime.es.js';
-const notifcation = document.getElementById('notifications');
-const notify = document.getElementById('notifyMessage');
-const messageText = document.getElementById('message-text');
-const iconGood = document.getElementById('notify-good');
-const iconLame = document.getElementById('notify-lame');
-const iconWorking = document.getElementById('notify-working');
+import anime from "animejs/lib/anime.es.js";
+const notifcation = document.getElementById("notifications");
+const notify = document.getElementById("notifyMessage");
+const messageText = document.getElementById("message-text");
+const iconGood = document.getElementById("notify-good");
+const iconLame = document.getElementById("notify-lame");
+const iconWorking = document.getElementById("notify-working");
 
 export default class Notfications {
   //--------------------------
@@ -16,57 +16,57 @@ export default class Notfications {
   //--------------------------
 
   alert(text, status) {
-		iconWorking.style.display = 'none';
-		iconGood.style.display = 'none';
-		iconLame.style.display = 'none';
+    iconWorking.style.display = "none";
+    iconGood.style.display = "none";
+    iconLame.style.display = "none";
 
-		var color = '';
+    var color = "";
     if (status !== null) {
       if (status) {
-				color = '#32cd32';
-				iconWorking.style.display = 'none';
-				iconGood.style.display = 'block';
+        color = "#32cd32";
+        iconWorking.style.display = "none";
+        iconGood.style.display = "block";
       } else {
-				color = '#F64747';
-				iconWorking.style.display = 'none';
-				iconLame.style.display = 'block';
+        color = "#F64747";
+        iconWorking.style.display = "none";
+        iconLame.style.display = "block";
       }
     } else {
-			color = '#200317';
-			iconWorking.style.display = 'block';
+      color = "#200317";
+      iconWorking.style.display = "block";
     }
     messageText.innerHTML = text;
 
     anime({
       targets: notifcation,
-			marginTop: '0',
-			easing: 'easeInOutQuint',
+      marginTop: "-10",
+      easing: "easeInOutQuint",
       duration: 10,
       complete: () => {
         anime({
           targets: notify,
-					rotateX: '0',
-					easing: 'easeInOutQuint',
+          rotateX: "0",
+          easing: "easeInOutQuint",
           duration: 700
         });
         anime({
           targets: messageText,
           backgroundColor: color,
-					easing: 'easeInOutQuint',
+          easing: "easeInOutQuint",
           duration: 700,
           complete: () => {
             setTimeout(() => {
               if (status !== null) {
                 anime({
                   targets: notify,
-									rotateX: '-120',
-									easing: 'easeInOutQuint',
+                  rotateX: "-120",
+                  easing: "easeInOutQuint",
                   duration: 700,
                   complete: () => {
                     anime({
                       targets: notifcation,
-											marginTop: '-55',
-											easing: 'easeInOutQuint',
+                      marginTop: "-55",
+                      easing: "easeInOutQuint",
                       delay: 700,
                       duration: 50
                     });