Fix legacy messages (#2323)

* Fix legacy message styling

- Code cleanup;
- Enable constants-mobile;
- Add _legacy-messages.scss;
- Add status color fg colors to theme constants;

* CSS refactoring, significant migration for messages classes

- Many messages classes migrated;
- c-click-icon > c-icon-button;
- c-click-icon rewritten;
- __close-btn refined in dialogs;

* About and splash screen styling

- Fixed splash in About screen;

* Update _mixins.scss

* Convert c-overlay__close-button to button

- <a> -> <button>;
- Set color of button;
- Normalized naming from close-btn to close-button;

* Fixed brightness filter issue on elements in overlays in VISTA;

* Fix dismiss button

platform/commonUI/dialog/res/templates/message.html

@@ -1,10 +1,10 @@
-<div class="l-message"
+<div class="c-message"
      ng-class="'message-severity-' + ngModel.severity">
     <div class="w-message-contents">
-        <div class="top-bar">
-            <div class="title">{{ngModel.title}}</div>
+        <div class="c-message__top-bar">
+            <div class="c-message__title">{{ngModel.title}}</div>
         </div>
-        <div class="hint" ng-hide="ngModel.hint === undefined">
+        <div class="c-message__hint" ng-hide="ngModel.hint === undefined">
             {{ngModel.hint}}
             <span ng-if="ngModel.timestamp !== undefined">[{{ngModel.timestamp}}]</span>
         </div>
@@ -16,17 +16,17 @@
                          ng-model="ngModel"
                          ng-show="ngModel.progress !== undefined || ngModel.unknownProgress"></mct-include>
         </div>
-        <div class="bottom-bar">
-            <a ng-repeat="dialogOption in ngModel.options"
-               class="s-button"
+        <div class="c-overlay__button-bar">
+            <button ng-repeat="dialogOption in ngModel.options"
+               class="c-button"
                ng-click="dialogOption.callback()">
                 {{dialogOption.label}}
-            </a>
-            <a class="s-button major"
+            </button>
+            <button class="c-button c-button--major"
                ng-if="ngModel.primaryOption"
                ng-click="ngModel.primaryOption.callback()">
                 {{ngModel.primaryOption.label}}
-            </a>
+            </button>
         </div>
     </div>
 </div>

platform/commonUI/dialog/res/templates/notification-message.html

@@ -1,25 +1,25 @@
-<div class="l-message"
+<div class="c-message"
      ng-class="'message-severity-' + ngModel.severity">
     <div class="w-message-contents">
-        <div class="top-bar">
-            <div class="title">{{ngModel.message}}</div>
+        <div class="c-message__top-bar">
+            <div class="c-message__title">{{ngModel.message}}</div>
         </div>
         <div class="message-body">
             <mct-include key="'progress-bar'"
                          ng-model="ngModel"
                          ng-show="ngModel.progressPerc !== undefined"></mct-include>
         </div>
-        <div class="bottom-bar">
-            <a ng-repeat="dialogOption in ngModel.options"
-                class="s-button"
+        <div class="c-overlay__button-bar">
+            <button ng-repeat="dialogOption in ngModel.options"
+                class="c-button"
                 ng-click="dialogOption.callback()">
                     {{dialogOption.label}}
-            </a>
-            <a class="s-button major"
+            </button>
+            <button class="c-button c-button--major"
                 ng-if="ngModel.primaryOption"
                 ng-click="ngModel.primaryOption.callback()">
                     {{ngModel.primaryOption.label}}
-            </a>
+            </button>
         </div>
     </div>
 </div>

platform/commonUI/dialog/res/templates/overlay-message-list.html

@@ -1,22 +1,23 @@
 <mct-container key="overlay">
-    <div class="t-message-list">
-        <div class="top-bar">
-            <div class="dialog-title">{{ngModel.dialog.title}}</div>
-            <div class="hint">Displaying {{ngModel.dialog.messages.length}} message<span ng-show="ngModel.dialog.messages.length > 1 ||
-                                                                                                  ngModel.dialog.messages.length == 0">s</span>
+    <div class="t-message-list c-overlay__contents">
+        <div class="c-overlay__top-bar">
+            <div class="c-overlay__dialog-title">{{ngModel.dialog.title}}</div>
+            <div class="c-overlay__dialog-hint">Displaying {{ngModel.dialog.messages.length}} message<span
+                    ng-show="ngModel.dialog.messages.length > 1 ||
+                            ngModel.dialog.messages.length == 0">s</span>
             </div>
         </div>
-        <div class="w-messages">
+        <div class="w-messages c-overlay__messages">
             <mct-include
                 ng-repeat="msg in ngModel.dialog.messages | orderBy: '-'"
                 key="'notification-message'" ng-model="msg.model"></mct-include>
         </div>
-        <div class="bottom-bar">
-            <a ng-repeat="dialogAction in ngModel.dialog.actions"
-               class="s-button major"
+        <div class="c-overlay__bottom-bar">
+            <button ng-repeat="dialogAction in ngModel.dialog.actions"
+               class="c-button c-button--major"
                ng-click="dialogAction.action()">
                 {{dialogAction.label}}
-            </a>
+            </button>
         </div>
     </div>
 </mct-container>

platform/commonUI/dialog/res/templates/overlay.html

@@ -22,9 +22,9 @@
 <div class="c-overlay l-overlay-small" ng-class="{'delayEntry100ms' : ngModel.delay}">
     <div class="c-overlay__blocker"></div>
     <div class="c-overlay__outer">
-        <a ng-click="ngModel.cancel()"
+        <button ng-click="ngModel.cancel()"
            ng-if="ngModel.cancel"
-           class="c-click-icon c-overlay__close-button icon-x-in-circle"></a>
+           class="c-click-icon c-overlay__close-button icon-x-in-circle"></button>
         <div class="c-overlay__contents" ng-transclude></div>
     </div>
 </div>