Hidden/shown eye icon

app/coffee/modules/kanban/main.coffee

@@ -322,7 +322,7 @@ KanbanArchivedStatusHeaderDirective = ($rootscope, $translate) ->
         status = $scope.$eval($attrs.tgKanbanArchivedStatusHeader)
         hidden = true
 
-        $scope.class = "icon icon-open-eye"
+        $scope.class = "icon-open-eye"
         $scope.title = showArchivedText
 
         $el.on "click", (event) ->
@@ -330,12 +330,12 @@ KanbanArchivedStatusHeaderDirective = ($rootscope, $translate) ->
 
             $scope.$apply ->
                 if hidden
-                    $scope.class = "icon icon-open-eye"
+                    $scope.class = "icon-open-eye"
                     $scope.title = showArchivedText
                     $rootscope.$broadcast("kanban:hide-userstories-for-status", status.id)
 
                 else
-                    $scope.class = "icon icon-closed-eye"
+                    $scope.class = "icon-closed-eye"
                     $scope.title = hideArchivedText
                     $rootscope.$broadcast("kanban:show-userstories-for-status", status.id)
 

app/partials/includes/modules/kanban-table.jade

@@ -31,11 +31,13 @@ div.kanban-table(tg-kanban-squish-column)
                                      tg-check-permission="add_us",
                                      ng-hide="s.is_archived")
 
-                    a(href="",
+                    a(
-                                    ng-attr-title="{{title}}",
+                        href=""
+                        ng-attr-title="{{title}}"
                         ng-class="class"
-                                    ng-if="s.is_archived",
+                        ng-if="s.is_archived"
                         tg-kanban-archived-status-header="s")
+                        include ../../../svg/eye.svg
 
     div.kanban-table-body
         div.kanban-table-inner

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

@@ -86,9 +86,6 @@ $column-margin: 0 10px 0 0;
             color: $gray-light;
             margin-right: .3rem;
             transition: color .2s linear;
-            &:hover {
-                color: $primary;
-            }
             &.hfold,
             &.hunfold {
                 display: inline-block;
@@ -96,6 +93,39 @@ $column-margin: 0 10px 0 0;
             }
         }
     }
+    .icon-open-eye,
+    .icon-closed-eye {
+        display: inline-block;
+        svg {
+            fill: $gray-light;
+            height: 1.1rem;
+            margin-top: .25rem;
+            width: 1.1rem;
+
+        }
+        &:hover {
+            svg {
+                fill: $primary;
+
+            }
+        }
+    }
+    .icon-open-eye {
+        .svg-eye-closed {
+            display: none;
+        }
+        .svg-eye-open {
+            display: block;
+        }
+    }
+    .icon-closed-eye {
+        .svg-eye-closed {
+            display: block;
+        }
+        .svg-eye-open {
+            display: none;
+        }
+    }
 }
 
 .kanban-table-body {

app/svg/eye.svg

@@ -0,0 +1,8 @@
+<svg viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+    <g class="svg-eye-open" transform="matrix(23.23754 0 0 23.23754 -45.7 -45.7)">
+        <path d="M24 9C14 9 5.46 15.22 2 24c3.46 8.78 12 15 22 15s18.54-6.22 22-15C42.54 15.22 34.01 9 24 9zm0 25c-5.52 0-10-4.48-10-10s4.48-10 10-10 10 4.48 10 10-4.48 10-10 10zm0-16c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6z"/>
+        <path d="M24 9C14 9 5.46 15.22 2 24c3.46 8.78 12 15 22 15s18.54-6.22 22-15C42.54 15.22 34.01 9 24 9zm0 25c-5.52 0-10-4.48-10-10s4.48-10 10-10 10 4.48 10 10-4.48 10-10 10zm0-16c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6z"/>
+    </g>
+    <path class="svg-eye-closed"
+        d="M868.85-1.186L678.848 188.818c-52.86-16.963-109.225-26.135-167.776-26.135-232.374 0-430.823 144.537-511.225 348.563 31.983 81.16 82.664 152.884 146.713 209.86L7.345 860.32l92.728 92.726L961.58 91.54 868.85-1.185zM511.07 278.87c23.543 0 46.266 3.52 67.683 10.042l-83.85 83.85c-64.01 7.416-114.9 58.304-122.316 122.316l-83.85 83.85c-6.522-21.418-10.04-44.14-10.04-67.682 0-128.272 104.103-232.375 232.374-232.375zm348.86 9.03L725.707 422.12c11.42 27.452 17.738 57.554 17.738 89.126 0 128.27-104.103 232.375-232.375 232.375-31.57 0-61.67-6.317-89.122-17.738l-100.3 100.3C380.686 847.92 444.48 859.81 511.07 859.81c232.377 0 430.826-144.537 511.228-348.562-34.56-87.697-90.9-164.385-162.37-223.346zM649.86 497.968l-152.068 152.07c4.372.413 8.8.633 13.277.633 76.918 0 139.427-62.508 139.427-139.424 0-4.48-.22-8.907-.635-13.278z"/>
+</svg>