Update styling of feedback bar to use the alert styles and string builder

static/css/directives/ui/feedback-bar.css

@@ -34,19 +34,26 @@
   text-align: center;
   display: inline-block;
 
-  background: #eee;
-  padding: 10px;
-  border: 1px solid #eee;
-  border-top: 0px;
-
   animation-name: flow-down-up;
   animation-duration: 5s;
 }
 
-.feedback-bar .feedback-bar-element.info {
-  background-color: #F0FAFF;
+.feedback-bar-element .co-alert {
+  margin: 0px;
+
+  border-top: 0px;
+  padding-top: 10px;
+  padding-right: 10px;
+  padding-bottom: 10px;
 }
 
-.feedback-bar .feedback-bar-element.warning {
-  background-color: #FFFBF0;
+.feedback-bar-element .co-alert:before {
+  top: 5px !important;
+}
+
+.feedback-bar-element .co-alert .feedback-text i {
+  display: inline-block;
+  margin-left: 6px;
+  margin-right: 4px;
+  vertical-align: middle;
 }

static/directives/feedback-bar.html

@@ -1,3 +1,5 @@
 <div class="feedback-bar-element" ng-class="feedback.kind" ng-show="viewCounter">
-  {{ feedback.message }}
+  <div class="co-alert" ng-class="'co-alert-' + feedback.kind">
+    <span class="feedback-text" ng-bind-html="formattedMessage"></span>
+  </div>
 </div>

static/js/directives/ui/feedback-bar.js

@@ -11,11 +11,13 @@ angular.module('quay').directive('feedbackBar', function () {
     scope: {
       'feedback': '=feedback'
     },
-    controller: function($scope, $element, AvatarService, Config, UIService, $timeout) {
+    controller: function($scope, $element, AvatarService, Config, UIService, $timeout, StringBuilderService) {
       $scope.viewCounter = 0;
+      $scope.formattedMessage = '';
 
       $scope.$watch('feedback', function(feedback) {
         if (feedback) {
+          $scope.formattedMessage = StringBuilderService.buildString(feedback.message, feedback.data || {}, 'span');
           $scope.viewCounter++;
         } else {
           $scope.viewCounter = 0;

static/js/directives/ui/robots-manager.js

@@ -119,8 +119,11 @@ angular.module('quay').directive('robotsManager', function () {
             created.repositories = [];
             $scope.robots.push(created);
             $scope.feedback = {
-              'kind': 'info',
-              'message': 'Robot account ' + name + ' was created'
+              'kind': 'success',
+              'message': 'Robot account {robot} was created',
+              'data': {
+                'robot': name
+              }
             };
           });
       };
@@ -132,8 +135,11 @@ angular.module('quay').directive('robotsManager', function () {
           if (index >= 0) {
             $scope.robots.splice(index, 1);
             $scope.feedback = {
-              'kind': 'info',
-              'message': 'Robot account ' + info.name + ' was deleted'
+              'kind': 'success',
+              'message': 'Robot account {robot} was deleted',
+              'data': {
+                'robot': info.name
+              }
             };
           }
         }, ApiService.errorDisplay('Cannot delete robot account'));

static/js/services/string-builder-service.js

@@ -39,7 +39,7 @@ angular.module('quay').factory('StringBuilderService', ['$sce', 'UtilService', f
     return url;
   };
 
-  stringBuilderService.buildString = function(value_or_func, metadata) {
+  stringBuilderService.buildString = function(value_or_func, metadata, opt_codetag) {
      var fieldIcons = {
       'inviter': 'user',
       'username': 'user',
@@ -108,7 +108,9 @@ angular.module('quay').factory('StringBuilderService', ['$sce', 'UtilService', f
           markedDown = '<i class="fa ' + icon + '"></i>' + markedDown;
         }
 
-        description = description.replace('{' + key + '}', '<code title="' + safe  + '">' + markedDown + '</code>');
+        var codeTag = opt_codetag || 'code';
+        description = description.replace('{' + key + '}',
+          '<' + codeTag + ' title="' + safe  + '">' + markedDown + '</' + codeTag + '>');
       }
     }
     return $sce.trustAsHtml(description.replace('\n', '<br>'));