Improved tags styles

app/coffee/modules/base/tags.coffee

@@ -55,7 +55,7 @@ ColorizeTagDirective = ->
     link = ($scope, $el, $attrs, $ctrl) ->
         text = $scope.$eval($attrs.tgColorizeTag)
         color = textToColor(text)
-        $el.css("background", color)
+        $el.css("border-left", "5px solid " + color)
 
     return {link: link}
 

app/coffee/modules/common.coffee

@@ -42,7 +42,7 @@ TagLineDirective = ($log) ->
     # Tags template (rendered manually using lodash)
     templateTags = _.template("""
     <% _.each(tags, function(tag) { %>
-        <div class="tag" style="background: <%- tag.color %>;">
+        <div class="tag" style="border-left: 5px solid <%- tag.color %>;">
             <span class="tag-name"><%- tag.name %></span>
             <% if (editable) { %>
             <a href="" title="delete tag" class="icon icon-delete"></a>

app/styles/components/tag.scss

@@ -1,12 +1,12 @@
 .tag {
-    background: $grayer; // Fallback
-    color: $white;
+    background: $whitish; // Fallback
+    color: $grayer;
     display: inline-block;
-    margin: 0 0 .5rem;
+    margin-right: .5rem;
     padding: .2rem .5rem;
     text-align: center;
     .icon-delete {
-        color: $white;
+        color: $gray-light;
         margin-left: 1rem;
         &:hover {
             color: $red;

app/styles/modules/backlog/backlog-table.scss

@@ -146,10 +146,10 @@
     }
     .user-story-tags {
         display: none;
-        margin-top: .3rem;
+        margin-bottom: .3rem;
         .tag {
             @extend %small;
-            margin-right: .1rem;
+            margin-right: .5rem;
             padding: .2rem .5rem;
         }
     }