[Frontend] Sanding/positioning and Cancel button added to Messasges dialog

open #159
open #170
Added Cancel button to Messages dialog in DialogService.js;
Important tweaks to layout of messages to allow
bottom-bar to align to bottom in singleton dialog view;
Revised status colors in theme's constants files;

platform/commonUI/general/res/sass/_constants.scss

@@ -46,7 +46,7 @@ $ueBrowseLeftPaneW: 25%;
 $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
 // Overlay
-$ovrTopBarH: 60px;
+$ovrTopBarH: 45px;
 $ovrFooterH: 24px;
 $overlayMargin: 25px;
 // Items

platform/commonUI/general/res/sass/controls/_messages.scss

@@ -167,8 +167,8 @@
         &:before { content:"\e608"; }
         color: $colorStatusDefault;
         font-size: $iconW;
-        padding-left: 1px;
-        width: $iconW;
+        padding: 1px;
+        width: $iconW + 2;
     }
 
     .message-severity-info .type-icon.message-type {
@@ -201,6 +201,7 @@
 .l-message {
     @include display-flex;
     @include flex-direction(row);
+    @include align-items(stretch);
     .type-icon.message-type {
         //@include test(red);
         @include flex(0 1 auto);
@@ -223,22 +224,41 @@
 // Message as singleton
 .t-message-single {
     @include messageBlock(80px);
+
+    @include desktop {
+        .l-message,
+        .bottom-bar {
+            @include absPosDefault();
+        }
+
+        .bottom-bar {
+            top: auto;
+            height: $ovrFooterH;
+        }
+    }
 }
 
 // Messages in list
 .t-message-list {
     @include messageBlock(32px);
+
     .message-contents {
         .l-message {
             //border-bottom: 1px solid pullForward($colorOvrBg, 20%);
             @include border-radius($controlCr);
             background: rgba($colorOvrFg, 0.1);
             margin-bottom: $interiorMargin;
-            margin-right: $interiorMarginLg;
             padding: $interiorMarginLg;
 
+            .message-contents,
+            .bottom-bar {
+                //@include test(green);
+                position: relative;
+            }
+
             .message-contents {
                 font-size: 0.9em;
+                margin-left: $interiorMarginLg;
                 .message-action { color: pushBack($colorOvrFg, 20%); }
                 .bottom-bar { text-align: left; }
             }
@@ -249,4 +269,8 @@
             }
         }
     }
+
+    @include desktop {
+        .message-contents .l-message { margin-right: $interiorMarginLg; }
+    }
 }

platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss

@@ -54,9 +54,10 @@
         }
         
         .contents {
-            .top-bar,
-            .editor,
-            .bottom-bar {
+            .abs.top-bar,
+            .abs.editor,
+            .abs.message-body,
+            .abs.bottom-bar {
                 //@include test(orange);
                 top: auto; right: auto; bottom: auto; left: auto;
                 height: auto; width: auto;

platform/commonUI/general/res/sass/overlay/_overlay.scss

@@ -83,8 +83,8 @@
 
     .abs.editor,
     .abs.message-body {
-        top: $ovrTopBarH + ($interiorMargin * 2);
-        bottom: $ovrFooterH + $interiorMargin * 2;
+        top: $ovrTopBarH + $interiorMarginLg;
+        bottom: $ovrFooterH + $interiorMarginLg;
         left: 0;
         right: 0;
         overflow: auto;
@@ -137,6 +137,7 @@
 .t-dialog-sm .overlay > .holder {
     // Used for blocker and in-progress dialogs, modal alerts, etc.
     //@include test(red);
-    min-height: 275px;
-    height: 275px;
+    $h: 225px;
+    min-height: $h;
+    height: $h;
 }