try to refactor coloring mixins

app/styles/app/_mixins/mixins.sass

@@ -64,3 +64,47 @@
   font-size: $font-size-sm
   color: $grey-medium
   font-weight: 400
+
+
+
+// @todo simplyfiy coloring mixins
+
+@mixin colorStatusIcons($color, $status)
+  .status-icon.#{$status}
+    svg g > *
+      fill: $color
+
+@mixin colorTiles($color, $status, $extra-bg: $color)
+  &.#{$status}
+    border-color: $extra-bg
+    .tile-status
+      background-color: $color
+    .repo-header-title a,
+    .repo-build-status a,
+    .build-status a,
+    .tile-header,
+    .tile-header a,
+    .tile-title a
+      color: $color
+    @include colorStatusIcons($color, $status)
+
+@mixin statusColors($color, $status, $color2: $color)
+  &.#{$status}
+    background: linear-gradient(to right, $color2 0%, $color2 9px, white 10px, white 100%) no-repeat
+    .branch-name,
+    .branch-request a
+      color: $color
+      &:hover
+        border-color: $color
+    .branch-name .status-icon g > *,
+    .branch-request .icon-request g > *
+      fill: $color
+      
+    .build a,
+    .repo-title a
+      color: $color
+      &:hover
+        border-color: $color
+    .build-status
+      color: $color
+    @include colorStatusIcons($color, $status)

app/styles/app/components/build-tile.sass

@@ -6,7 +6,7 @@
       fill: $color
     &:hover
       background-color: $extra-hover
-      .status-icon g > *
+      .status-icon.#{$status} g > *
         fill: $white
       .status-icon .circle
         border-color: $white

app/styles/app/layouts/branches.sass

@@ -1,14 +1,3 @@
-@mixin statusColors($color, $status, $color2: $color)
-  &.#{$status}
-    background: linear-gradient(to right, $color2 0%, $color2 9px, white 10px, white 100%) no-repeat
-    .branch-name,
-    .branch-request a
-      color: $color
-      &:hover
-        border-color: $color
-    .branch-name .status-icon g > *,
-    .branch-request .icon-request g > *
-      fill: $color
 
 .branches
   .small-title

app/styles/app/layouts/owner.sass

@@ -97,18 +97,6 @@
     padding: 0
     line-height: 1
 
-@mixin statusColors($color, $status)
-  &.#{$status}
-    background: linear-gradient(to right, $color 0%, $color 9px, transparent 10px, transparent 100%) no-repeat;
-    .build a,
-    .repo-title a
-      color: $color
-      &:hover
-        border-color: $color
-    .build-status
-      color: $color
-
-
 .owner-tile
   padding: .8em 0 .8em 2em
   margin-bottom: .5em
@@ -122,6 +110,10 @@
   .repo-title a:hover
     text-decoration: underline
 
+  .status-icon
+    width: 1.3em
+    height: 1.1em
+
   .icon--job,
   .icon-push,
   .icon-pull_request,

app/styles/app/modules/tiles.sass

@@ -1,22 +1,3 @@
-@mixin colorStatusIcons($color, $status)
-  .status-icon.#{$status}
-    svg g > *
-      fill: $color
-
-@mixin colorTiles($color, $status, $extra-bg: $color)
-  &.#{$status}
-    border-color: $extra-bg
-    .tile-status
-      background-color: $color
-    .repo-header-title a,
-    .repo-build-status a,
-    .build-status a,
-    .tile-header,
-    .tile-header a,
-    .tile-title a
-      color: $color
-
-    @include colorStatusIcons($color, $status)
 
 .tile
   @extend %border-radius-4px

app/templates/components/owner-repo-tile.hbs

@@ -2,11 +2,7 @@
   <div class="tile-lock"><span class="icon icon-lock"></span></div>
 {{/if}} --}}
 <div class="repo">
-  {{#if isAnimating}}
-    <span class="icon-owner-receiving"><i></i><i></i><i></i></span>
-  {{else}}
-    <span class="icon--job {{repo.default_branch.last_build.state}}"></span>
-  {{/if}}
+  {{status-icon status=repo.default_branch.last_build.state}}
   <h2 class="repo-title">{{#link-to "repo" ownerName repoName }}{{repoName}}{{/link-to}}</h2>
 </div>
 {{#if repo.default_branch.last_build}}