Fixes: notifications

css/main.css

@@ -511,7 +511,7 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 .dr-notification-container.right {
-  right: 20px;
+  right: 0;
 }
 
 .dr-notification-container.left {
@@ -528,20 +528,15 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 .dr-notification-wrapper {
-  width: 380px;
+  width: 360px;
   position: relative;
   margin: 10px 0;
 }
 
 .dr-notification {
-  width: 380px;
+  width: 360px;
   clear: both;
-  min-height: 80px;
-  max-height: 90px;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  -ms-border-radius: 5px;
-  border-radius: 5px;
+  height: 90px;
   overflow: hidden;
 }
 
@@ -551,20 +546,14 @@ input[type=number]::-webkit-outer-spin-button {
   -ms-border-radius: 20px;
   border-radius: 20px;
   display: inline-block;
-  padding: 3px;
+  padding: 5px;
   font-size: 12px;
   position: absolute;
-  right: -8px;
+  right: 350px;
   top: -8px;
-  -webkit-transition: all 0.35s cubic-bezier(0.31, 0.39, 0.21, 1.65);
-  -moz-transition: all 0.35s cubic-bezier(0.31, 0.39, 0.21, 1.65);
-  transition: all 0.35s cubic-bezier(0.31, 0.39, 0.21, 1.65);
   cursor: pointer;
   z-index: 10;
 }
-.dr-notification-close-btn i {
-  padding-left: 3px;
-}
 
 .dr-notification-close-btn:hover {
   -webkit-transform: scale3d(1.25, 1.25, 1);
@@ -575,13 +564,13 @@ input[type=number]::-webkit-outer-spin-button {
 
 .dr-notification-image {
   width: 80px;
-  height: 80px;
-  border-right: 1px solid rgba(4, 94, 123, 0.85);
+  height: 90px;
   float: left;
   display: block;
   font-size: 40px;
   color: white;
   text-align: center;
+  border-right: 1px dashed #415970;
 }
 .dr-notification-image i {
   display: block;
@@ -603,19 +592,21 @@ input[type=number]::-webkit-outer-spin-button {
 .dr-notification-title {
   color: white;
   padding: 0px;
-  font-size: 16px;
+  font-size: 18px;
+  margin-top: 0;
 }
 
 .dr-notification {
-  background-color: #2C3E50;
-  color: #bfe2de;
-  border: 1px solid rgba(4, 94, 123, 0.85);
+  background-color: #34495E;
+  color: #eee;
+  border: 1px solid #2C3E50;
   opacity: 0.9;
+
 }
 .dr-notification-close-btn {
-  background-color: #2C3E50;
+  background-color: #34495E;
   color: #fff;
-  border: 1px solid rgba(4, 94, 123, 0.85);
+  border: 1px solid #3C5269;
 }
 
 .dr-notification-image.dr-notification-type-info {
@@ -640,9 +631,9 @@ input[type=number]::-webkit-outer-spin-button {
 
 .success {background-color: #1ABC9C !important;}
 
-p.dr-notification-text {
-  margin-top: -5px;
+.dr-notification-text {
   font-size: 12px;
+  line-height: 120%;
 }
 
 .ellipsis {

index.html

@@ -36,7 +36,7 @@
           <div ng-include="'views/includes/sidebar-mobile.html'"></div>
         </aside>
 
-        <div notifications="middle right"></div>
+        <div notifications="right top"></div>
 
         <div 
           ng-class="{'sidebar' : $root.wallet && $root.wallet.isReady()}"

js/services/notifications.js

@@ -25,11 +25,11 @@ factory('notification', ['$timeout',
         enabled: true
       },
       error: {
-        duration: 5000,
+        duration: 50000000,
         enabled: true
       },
       success: {
-        duration: 5000,
+        duration: 50000000,
         enabled: true
       },
       progress: {
@@ -237,24 +237,6 @@ directive('notifications', function(notification, $compile) {
    * Finally, the directive should have its own controller for
    * handling all of the notifications from the notification service
    */
-  var html =
-    '<div class="dr-notification-wrapper" ng-repeat="noti in queue">' +
-    '<div class="dr-notification-close-btn" ng-click="removeNotification(noti)">' +
-    '<i class="fi-x"></i>' +
-    '</div>' +
-    '<div class="dr-notification">' +
-    '<div class="dr-notification-image dr-notification-type-{{noti.type}}" ng-switch on="noti.image">' +
-    '<i class="fi-{{noti.icon}}" ng-switch-when="false"></i>' +
-    '<img ng-src="{{noti.image}}" ng-switch-default />' +
-    '</div>' +
-    '<div class="dr-notification-content">' +
-    '<h3 class="dr-notification-title">{{noti.title}}</h3>' +
-    '<p class="dr-notification-text">{{noti.content}}</p>' +
-    '</div>' +
-    '</div>' +
-    '</div>';
-
-
   function link(scope, element, attrs) {
     var position = attrs.notifications;
     position = position.split(' ');
@@ -264,11 +246,10 @@ directive('notifications', function(notification, $compile) {
     }
   }
 
-
   return {
     restrict: 'A',
     scope: {},
-    template: html,
+    template: '<div ng-include="\'views/includes/notifications.html\'"></div>',
     link: link,
     controller: ['$scope',
       function NotificationsCtrl($scope) {

views/includes/notifications.html

@@ -0,0 +1,16 @@
+<div class="dr-notification-wrapper" ng-repeat="noti in queue">
+  <div class="dr-notification-close-btn" ng-click="removeNotification(noti)">
+    <i class="fi-x"></i>
+  </div>
+  <div class="dr-notification">
+    <div class="dr-notification-image dr-notification-type-{{noti.type}}" ng-switch on="noti.image">
+      <i class="fi-{{noti.icon}}" ng-switch-when="false"></i>
+      <img ng-src="{{noti.image}}" ng-switch-default />
+    </div>
+    <div class="dr-notification-content">
+      <h3 class="dr-notification-title">{{noti.title}}</h3>
+      <div class="dr-notification-text">{{noti.content}}</div>
+    </div>
+  </div>
+</div>
+