TT#12782 Csc change notification styling

What was done:
 - 1. Changed background color to grey
 - 2. Increased font size, and added some padding
 - 3. Added icons based on message type (success or not)
 - 4. Repositioned it to be top right instead of top center this was
      done for these reasons:
      a. Andreas was pointing out the messages didn't look centered
         in the previous iteration, but the fact is they were centered
         in relation to the whole browser window, and not in relation
         to main container wrapper. This solves this issue
      b. Users are more likely to notice the messages overlaying top
         right, as it does not compete with green background of panel
         title
      c. Users are more likely to be used to notifications on top
         right in their OSes, browser notifications, and other apps
 - 5. Increased time before close of notification box (3 to 5 secs)
 - 6. Set the notification box max and min width to 365px, and
      verified that text wrap is working

Change-Id: I3065ee208b01ccd48604a47da1c94e4c7b88659b

app/utils/icons.js

@@ -19,6 +19,7 @@ Ext.define('Ngcp.csc.icons', {
         calendar2x: "x-fa fa-calendar fa-2x",
         chevronleft: "x-fa fa-chevron-left",
         chevronight: "x-fa fa-chevron-right",
+        check: "x-fa fa-check",
         circle: "x-fa fa-circle",
         cog: "x-fa fa-cog",
         comment: "x-fa fa-comment",
@@ -32,6 +33,7 @@ Ext.define('Ngcp.csc.icons', {
         envelope: "x-fa fa-envelope",
         envelope2x: "x-fa fa-envelope fa-2x",
         envelope_transparent: "x-fa fa-envelope-o",
+        exclamation: "x-fa fa-exclamation",
         fax: "x-fa fa-fax",
         fax2x: "x-fa fa-fax fa-2x",
         faxpaper: "x-fa fa-file-text",

classic/sass/src/view/main/Main.scss

@@ -187,16 +187,36 @@
 
 @include extjs-window-ui(
     $ui: 'toast-red',
-    $ui-border-color: #FF0000
+    $ui-border-color: #FF0000,
 );
 
 @include extjs-window-ui(
     $ui: 'toast-green',
-    $ui-border-color: #66A648
+    $ui-border-color: $base-color,
 );
 
 // custom classes & overrides
 
+.x-window-toast-green .x-autocontainer-innerCt,
+.x-window-toast-red .x-autocontainer-innerCt {
+    background: #F6F6F6;
+    font-size: 15px;
+    .x-fa {
+        color: #9E9F9F !important;
+        margin-right: 10px;
+    }
+}
+
+.x-window-toast-green,
+.x-window-toast-red {
+    background: #F6F6F6;
+    border-width: 1px;
+    border-radius: 2px;
+    padding: 15px;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+
+}
+
 .main-container {
     .x-panel-body {
         background-color: #f6f6f6;

classic/sass/src/view/pages/account/Account.scss

@@ -1,6 +0,0 @@
-// custom rules
-.fa-rotate-left:before,
-.fa-exclamation:before {
-    color:$base-color;
-    padding: 0px 10px 0px 0px;
-}

classic/src/view/main/MainController.js

@@ -273,15 +273,21 @@ Ext.define('NgcpCsc.view.main.MainController', {
     showMessage: function(success, msg) {
         if (success) {
             Ext.toast({
-                html: msg,
-                align: 't',
-                ui: 'toast-green'
+                html: '<i class="' + Ngcp.csc.icons.check + '" aria-hidden="true"></i> ' + msg,
+                align: 'tr',
+                ui: 'toast-green',
+                minWidth: 365,
+                maxWidth: 365,
+                autoCloseDelay: 5000
             });
         } else {
             Ext.toast({
-                html: msg,
-                align: 't',
-                ui: 'toast-red'
+                html: '<i class="' + Ngcp.csc.icons.exclamation + '" aria-hidden="true"></i> ' + msg,
+                align: 'tr',
+                ui: 'toast-red',
+                minWidth: 365,
+                maxWidth: 365,
+                autoCloseDelay: 5000
             });
         };
     },

sass/var/all.scss

@@ -66,6 +66,7 @@ $building: "\f1ad";
 $calendar: '\f073';
 $chevron-left: "\f053";
 $chevron-right: "\f054";
+$check: "\f00c";
 $circle: "\f111";
 $cog: "\f013";
 $comment: "\f075";
@@ -75,6 +76,7 @@ $download: "\f019";
 $edit: "\f044";
 $envelope: "\f0e0";
 $envelope_transparent: "\f003";
+$exclamation: "\f12a";
 $fax:"\f1ac";
 $fax-paper:"\f15c";
 $fax-paper-transparent:"\f0f6";