ui: Adds warning flash messages (yellow with warning icon) (#5033)

ui-v2/app/styles/components/flash-message/skin.scss

@@ -5,12 +5,18 @@
 %flash-message p.success strong {
   @extend %with-passing;
 }
+%flash-message p.warning strong {
+  @extend %with-warning;
+}
 %flash-message p.error strong {
   @extend %with-critical;
 }
 %flash-message p.success {
   @extend %frame-green-500;
 }
+%flash-message p.warning {
+  @extend %frame-yellow-500;
+}
 %flash-message p.error {
   @extend %frame-red-500;
 }

ui-v2/app/templates/components/app-view.hbs

@@ -5,7 +5,12 @@
     {{#flash-message flash=flash as |component flash|}}
         {{! flashes automatically ucfirst the type }}
 
-        <p data-notification class="{{if (eq component.flashType 'Success') 'success' 'error'}} notification-{{lowercase flash.action}}"><strong>{{if (eq component.flashType 'Success') 'Success!' 'Error!'}}</strong> {{#yield-slot 'notification' (block-params (lowercase component.flashType) (lowercase flash.action) flash.item )}}{{yield}}{{/yield-slot}}</p>
+        <p data-notification class="{{lowercase component.flashType}} notification-{{lowercase flash.action}}">
+          <strong>
+            {{component.flashType}}!
+          </strong>
+          {{#yield-slot 'notification' (block-params (lowercase component.flashType) (lowercase flash.action) flash.item )}}{{yield}}{{/yield-slot}}
+        </p>
     {{/flash-message}}
 {{/each}}
     <div>