refactor status-icon component and start rolling out new icons in the sidebar

app/components/status-icon.coffee

@@ -4,47 +4,38 @@ StatusIconComponent = Ember.Component.extend
 
   tagName: 'span'
   classNames: ['status-icon', 'icon']
-  classNameBindings: ['build.last_build.state', 'build.state']
+  classNameBindings: ['status']
 
   hasPassed: (->
-    @get('build.last_build.state') == 'passed' ||
+    @get('status') == 'passed'
-    @get('build.state') == 'passed'
+  ).property('status')
-  ).property('build')
 
   hasFailed: (->
-    @get('build.last_build.state') == 'failed' ||
+    @get('status') == 'failed'
-    @get('build.state') == 'failed'
+  ).property('status')
-  ).property('build')
 
   hasErrored: (->
-    @get('build.last_build.state') == 'errored' ||
+    @get('status') == 'errored'
-    @get('build.state') == 'errored'
+  ).property('status')
-  ).property('build')
 
   wasCanceled: (->
-    @get('build.last_build.state') == 'canceled' ||
+    @get('status') == 'canceled'
-    @get('build.state') == 'canceled'
+  ).property('status')
-  ).property('build')
 
   isRunning: (->
-    @get('build.last_build.state') == 'started' || 
+    @get('status') == 'started' || 
-    @get('build.last_build.state') == 'queued' ||
+    @get('status') == 'queued' ||
-    @get('build.last_build.state') == 'booting' ||
+    @get('status') == 'booting' ||
-    @get('build.last_build.state') == 'received' ||
+    @get('status') == 'received' ||
-    @get('build.last_build.state') == 'created' ||
+    @get('status') == 'created'
-    @get('build.state') == 'started' || 
+  ).property('status')
-    @get('build.state') == 'queued' ||
-    @get('build.state') == 'booting' ||
-    @get('build.state') == 'received' ||
-    @get('build.state') == 'created'
-  ).property('build')
 
   isEmpty: (->
-    if @get('build.@type') == 'branch'
+    if @get('status') == null || @get('status') == ''
-      true if @get('build.last_build.state') == null
+      true
-    else if @get('build.@type') == 'build'
+    else
-      false if @get('build.state') != ''
+      false
 
-  ).property('build')
+  ).property('status')
 
 `export default StatusIconComponent`

app/styles/app/layouts/branches.sass

@@ -206,6 +206,9 @@
   .dropup-item
     display: inline-block
     vertical-align: middle
+  .no-link
+    padding: .4em 0
+    cursor: default
 
 .dropup--status
   @extend %dropup

app/styles/app/layouts/buildheader.sass

@@ -60,9 +60,6 @@
     font-weight: 400
     & span:hover + .tooltip
       display: block
-  ul
-    padding: 0
-    margin: 0
 
 .repo-main-commit
   position: relative

app/styles/app/layouts/sidebar.sass

@@ -51,13 +51,13 @@ $sb-font-size: 14px
       width: 22%
   a:hover
     text-decoration: underline
-  .icon:not(.icon--hash)
+  .icon
-    width: 0.9em
+    width: 1.3em
-    height: 1.1em
+    height: 1.4em
-    margin-right: .3em
+    margin-right: .1em
-  .icon--hash
+  // .icon--hash
-    width: 1.1em
+  //   width: 1.1em
-    height: 1.3em
+  //   height: 1.3em
 
 
 .tabnav--sidebar

app/styles/app/modules/tiles.sass

@@ -1,12 +1,19 @@
-@mixin colorTiles($color)
+@mixin colorStatusIcons($color, $status)
-  .tile-status
+  .status-icon.#{$status}
-    background-color: $color
+    svg g > *
-  .repo-header-title a,
+      fill: $color
-  .repo-build-status a,
+
-  .build-status a,
+@mixin colorTiles($color, $status)
-  .tile-header,
+  &.#{$status}
-  .tile-header a
+    .tile-status
-    color: $color
+      background-color: $color
+    .repo-header-title a,
+    .repo-build-status a,
+    .build-status a,
+    .tile-header,
+    .tile-header a
+      color: $color
+    @include colorStatusIcons($color, $status)
 
 .tile
   @extend %border-radius-4px
@@ -23,21 +30,20 @@
     height: 0.9em
 
   &:not(.tile--jobs)
-    &.started,
+    @include colorTiles($green-dark, 'passed')
-    &.created,
+    @include colorTiles($red-dark, 'failed')
-    &.received,
+    @include colorTiles($red-dark, 'errored')
-    &.queued
+    @include colorTiles($grey-medium, 'canceled')
-      @include colorTiles($start-color)
+    @include colorTiles(#bfb502, 'started')
-    &.failed
+    @include colorTiles(#bfb502, 'queued')
-      @include colorTiles($fail-color)
+    @include colorTiles(#bfb502, 'booting')
-    &.errored
+    @include colorTiles(#bfb502, 'received')
-      @include colorTiles($error-color)
+    @include colorTiles(#bfb502, 'created')
-    &.canceled
+
-      @include colorTiles($cancel-color)
+    .status-icon .is-rotating
-    &.passed
+      width: 17px;
-      @include colorTiles($pass-color)
+      height: 17px;
-    &.inactive
+      line-height: 1;
-      @include colorTiles($cancel-color)
 
   @media #{$medium-up}
     height: 145px

app/templates/components/branch-row.hbs

@@ -1,6 +1,6 @@
 <div class="two-line">
   <div class="branch-name"> 
-    <h2 class="row-item">{{status-icon build=build}}{{build.name}}</h2>
+    <h2 class="row-item">{{status-icon status=build.last_build.state}}{{build.name}}</h2>
   </div>
   <div class="branch-builds">
     <div class="row-item">
@@ -138,7 +138,16 @@
       <ul>
         <li>
           {{#if hasTriggered}}
-            <span class="dropup-item">build was triggered</span>
+            <span class="icon">
+              <svg version="1.1" id="Layer_1"  x="0px" y="0px"
+                 viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+                <g id="Passed">
+                  <path fill="#A7AEAE" d="M9.6,14.4c-0.1,0-0.3-0.1-0.4-0.1l-4-3.3c-0.3-0.2-0.3-0.6-0.1-0.9S5.8,9.8,6.1,10l3.4,2.8l4.9-7.5
+                    C14.6,5,15,4.9,15.3,5.1c0.3,0.2,0.4,0.6,0.2,0.9l-5.3,8.1C10.1,14.3,9.9,14.4,9.6,14.4C9.7,14.4,9.7,14.4,9.6,14.4z"/>
+                </g>
+              </svg>
+            </span>
+            <span class="dropup-item no-link">Build triggered</span>
           {{else}}
             {{#if isTriggering}}
               {{loading-indicator}}

app/templates/components/build-tile.hbs

@@ -1,6 +1,8 @@
 {{#if build.number}}
   {{#link-to "build" build.repository.slug build.id class="dropup-trigger"}}
-    {{status-icon build=build}}
+    {{status-icon status=build.state}}
+
+    {{build.last_build.state}}
     <div class="dropup--status">
       {{request-icon build=build}} #{{build.number}}
     </div>

app/templates/components/repos-list-item.hbs

@@ -1,7 +1,7 @@
 <div class="tile tile--sidebar {{repo.lastBuildState}}">
   <h2 class="tile-title">
     {{#if repo.slug}}
-      <span class="icon icon--job {{repo.lastBuildState}}"></span>
+      {{status-icon status=repo.lastBuildState}}
       {{#link-to "repo" repo class="slug"}}{{repo.slug}}{{/link-to}}
     {{/if}}
   </h2>
@@ -26,7 +26,22 @@
   </p>
 
   <p>
-    <span class="icon icon--cal"></span>
+    <span class="icon">
+      <svg viewBox="2 2 17 17">
+        <g id="Cal">
+          <path fill="#A7AEAE" d="M16.7,2.5H3.3C3,2.5,2.8,2.7,2.8,3V17c0,0.3,0.2,0.5,0.5,0.5h13.4c0.3,0,0.5-0.2,0.5-0.5V3
+            C17.2,2.7,17,2.5,16.7,2.5z M16.2,3.4v3.1H3.8V3.4H16.2z M3.8,16.6v-9h12.5v9H3.8z"/>
+          <path fill="#A7AEAE" d="M8.7,13.4c-0.1,0-0.3,0-0.4,0c0.2-0.2,0.4-0.4,0.5-0.6c0.2-0.2,0.3-0.4,0.5-0.6c0.1-0.2,0.2-0.4,0.3-0.6
+            c0.1-0.2,0.1-0.4,0.1-0.6c0-0.2,0-0.4-0.1-0.6c-0.1-0.2-0.2-0.3-0.3-0.4C9.2,10,9.1,9.9,8.9,9.8C8.7,9.7,8.5,9.7,8.3,9.7
+            C8,9.7,7.7,9.8,7.5,9.9C7.2,10,7,10.2,6.8,10.4L7.3,11c0.1-0.1,0.2-0.2,0.4-0.3c0.1-0.1,0.3-0.1,0.4-0.1c0.2,0,0.4,0.1,0.5,0.2
+            c0.1,0.1,0.2,0.3,0.2,0.5c0,0.2,0,0.3-0.1,0.5c-0.1,0.2-0.2,0.4-0.4,0.6c-0.2,0.2-0.4,0.4-0.6,0.7c-0.2,0.2-0.5,0.5-0.8,0.8v0.6
+            H10v-0.9H9.1C9,13.4,8.8,13.4,8.7,13.4z"/>
+          <path fill="#A7AEAE" d="M10.6,10.7h2c-0.2,0.3-0.4,0.6-0.5,0.8c-0.1,0.3-0.3,0.6-0.4,0.8c-0.1,0.3-0.2,0.6-0.2,0.9
+            c0,0.3-0.1,0.7-0.1,1h1c0-0.4,0-0.8,0.1-1.2c0-0.3,0.1-0.7,0.2-0.9c0.1-0.3,0.2-0.6,0.4-0.9c0.2-0.3,0.4-0.6,0.6-0.9V9.8h-3.1
+            V10.7z"/>
+        </g>
+      </svg>
+    </span>
     Finished: 
     <abbr class="finished_at timeago" title={{lastBuildFinishedAt}}>
       {{format-time repo.lastBuildFinishedAt}}