add state colors

app/styles/app/layouts/sidebar.sass

@@ -1,15 +1,40 @@
 $sb-grey: #f2f2f2
 $sb-font-size: 14px
 
+@mixin colorSidebarTiles($color)
+  border-color: $color
+  a
+    color: $color
+
 .tile--sidebar
-  padding: 0
-  // border-left: 8px solid #
+  height: auto
+  padding: 0.6em 0.5em
+  margin-bottom: .46rem
   background-color: $white
-  border-bottom: 6px solid #FAF9F7
+  border-radius: 0
+  border-left: 8px solid
+
+
+  &.failed,
+  &.errored
+    @include colorSidebarTiles($fail-color)
+  &.passed
+    @include colorSidebarTiles($pass-color)
+  &.started,
+  &.created,
+  &.received
+    @include colorSidebarTiles($created-color)
+
 
   h2, p
+    margin: 0
     font-size: $sb-font-size
     font-weight: 400
+  h2
+    display: inline-block
+  a:hover
+    text-decoration: underline
+
 
 .tabnav--sidebar
   font-size: $sb-font-size
@@ -25,8 +50,9 @@ $sb-font-size: 14px
       color: $teal1
 
 .sidebar-list
-  margin-top: 1rem
+  margin-top: 1.4rem
   ul
     @include resetul
+    background-color: #FAF9F7 
 
 

app/templates/repos.hbs

@@ -12,7 +12,7 @@
   {{#if isLoaded}}
     {{#collection 'repos-list' content=this}}
       {{#with view.repo as repo}}
-        <div class="tile tile--sidebar">
+        <div {{bind-attr class=":tile :tile--sidebar repo.lastBuildState"}}>
           <h2 class="tile-title">
             {{#if repo.slug}}
               <span {{bind-attr class=":icon :icon--job repo.lastBuildState"}}></span>