Studio: resolves layout issues with icons in system feedback UI

cms/static/sass/elements/_system-feedback.scss

@@ -18,7 +18,7 @@
   background: $yellow-d1;
   color: $white;
 
-  [class^="icon-"] {
+  .feedback-symbol {
     @extend %t-icon5;
     position: relative;
     top: 1px;
@@ -246,7 +246,7 @@
   // types of prompts - error
   .prompt.error {
 
-    [class^="icon"] {
+    .feedback-symbol {
       color: $red-l1;
     }
 
@@ -258,7 +258,7 @@
   // types of prompts - confirmation
   .prompt.confirmation {
 
-    [class^="icon"] {
+    .feedback-symbol {
       color: $green;
     }
 
@@ -270,7 +270,7 @@
   // types of prompts - error
   .prompt.warning {
 
-    [class^="icon"] {
+    .feedback-symbol {
       color: $orange;
     }
 
@@ -295,7 +295,7 @@
   &.wrapper-notification-warning {
     box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $orange;
 
-    [class^="icon"] {
+    .feedback-symbol {
       color: $orange;
     }
   }
@@ -303,7 +303,7 @@
   &.wrapper-notification-error {
     box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $red-l1;
 
-    [class^="icon"] {
+    .feedback-symbol {
       color: $red-l1;
     }
   }
@@ -311,7 +311,7 @@
   &.wrapper-notification-confirmation {
     box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $green;
 
-    [class^="icon"] {
+    .feedback-symbol {
       color: $green;
     }
   }
@@ -336,13 +336,13 @@
       max-width: none;
       min-width: none;
 
-      [class^="icon"], .copy {
+      .feedback-symbol, .copy {
         float: none;
         display: inline-block;
         vertical-align: middle;
       }
 
-      [class^="icon"] {
+      .feedback-symbol {
         width: $baseline;
         height: ($baseline*1.25);
         margin-right: ($baseline/4);
@@ -371,7 +371,7 @@
       max-width: none;
       min-width: none;
 
-      [class^="icon"] {
+      .feedback-symbol {
         width: $baseline;
         margin-right: ($baseline*0.75);
       }
@@ -399,13 +399,13 @@
     @extend %t-strong;
   }
 
-  [class^="icon"], .copy {
+  .feedback-symbol, .copy {
     float: left;
     display: inline-block;
     vertical-align: middle;
   }
 
-  [class^="icon"] {
+  .feedback-symbol {
     @include transition (color 0.50s ease-in-out 0s);
     @extend %t-icon3;
     width: flex-grid(1, 12);
@@ -431,7 +431,7 @@
   // with actions
   &.has-actions {
 
-    [class^="icon"] {
+    .feedback-symbol {
       width: flex-grid(1, 12);
     }
 
@@ -481,7 +481,7 @@
     max-width: none;
     min-width: 0;
 
-    [class^="icon"] {
+    .feedback-symbol {
       @include animation(rotateCW $tmg-s3 linear infinite);
       width: 25px;
       margin: -4px 10px 0 0;
@@ -527,7 +527,7 @@
   &.wrapper-alert-warning {
     box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $orange;
 
-    .alert-symbol {
+    .feedback-symbol {
       color: $orange;
     }
   }
@@ -535,7 +535,7 @@
   &.wrapper-alert-error {
     box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $red-l1;
 
-    .alert-symbol {
+    .feedback-symbol {
       color: $red-l1;
     }
   }
@@ -543,7 +543,7 @@
   &.wrapper-alert-confirmation {
     box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $green;
 
-    .alert-symbol {
+    .feedback-symbol {
       color: $green;
     }
   }
@@ -551,7 +551,7 @@
   &.wrapper-alert-announcement {
     box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue;
 
-    .alert-symbol {
+    .feedback-symbol {
       color: $blue;
     }
   }
@@ -559,7 +559,7 @@
   &.wrapper-alert-step-required {
     box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $pink;
 
-    .alert-symbol {
+    .feedback-symbol {
       color: $pink;
     }
   }
@@ -579,11 +579,11 @@
     @extend %t-strong;
   }
 
-  .alert-symbol, .copy {
+  .feedback-symbol, .copy {
     float: left;
   }
 
-  .alert-symbol {
+  .feedback-symbol {
     @include transition (color 0.50s ease-in-out 0s);
     @extend %t-icon3;
     width: flex-grid(1, 12);
@@ -593,6 +593,7 @@
 
   .copy {
     width: flex-grid(10, 12);
+    margin-top: ($baseline/2);
     color: $gray-l2;
 
     .title {
@@ -605,7 +606,7 @@
   // with actions
   &.has-actions {
 
-    .alert-symbol {
+    .feedback-symbol {
       width: flex-grid(1, 12);
     }
 

cms/templates/js/system-feedback.underscore

@@ -10,7 +10,7 @@
   <div class="<%= type %> <%= intent %> <% if(obj.actions) { %>has-actions<% } %>">
     <% if(obj.icon) { %>
       <% var iconClass = {"warning": "warning-sign", "confirmation": "ok", "error": "warning-sign", "announcement": "bullhorn", "step-required": "exclamation-sign", "help": "question-sign", "mini": "cog"} %>
-      <i class="icon-<%= iconClass[intent] %>"></i>
+      <i class="feedback-symbol icon-<%= iconClass[intent] %>"></i>
     <% } %>
 
     <div class="copy">