From a9c39ceab6c5d9cfe73e64356f6036c57c5e4648 Mon Sep 17 00:00:00 2001
From: Lisa P <mail@lislis.de>
Date: Wed, 7 Oct 2015 15:28:06 +0200
Subject: [PATCH] update icons for running builds in sidebar

---
 app/styles/app/layouts/sidebar.sass       |  1 -
 app/templates/components/queued-jobs.hbs  | 30 +++++++++++++---
 app/templates/components/running-jobs.hbs | 43 ++++++++++++++++++-----
 3 files changed, 60 insertions(+), 14 deletions(-)

diff --git a/app/styles/app/layouts/sidebar.sass b/app/styles/app/layouts/sidebar.sass
index 1b77a76e..1e133d45 100644
--- a/app/styles/app/layouts/sidebar.sass
+++ b/app/styles/app/layouts/sidebar.sass
@@ -38,7 +38,6 @@ $sb-font-size: 14px
   .icon
     width: 1.3em
     height: 1.4em
-    margin-right: .1em
 
 .tabnav--sidebar
   font-size: $sb-font-size
diff --git a/app/templates/components/queued-jobs.hbs b/app/templates/components/queued-jobs.hbs
index 27b545e3..b4d4bf10 100644
--- a/app/templates/components/queued-jobs.hbs
+++ b/app/templates/components/queued-jobs.hbs
@@ -3,19 +3,41 @@
     {{#each jobs as |job|}}
       <div class="tile tile--sidebar {{job.state}}">
         {{#if job.repo.slug}}
-          <span class="icon icon--job {{job.state}}"></span>
+          {{status-icon status=job.state}}
           {{#link-to "job" job.repo job}}{{job.repo.slug}}{{/link-to}}
         {{/if}}
 
         <p class="tile-title float-right">
-          <span class="icon icon--hash"></span>
+          <span class="icon">
+            <svg version="1.1" id="Layer_1" x="0px" y="0px"
+               viewBox="-289 191 20 20" style="enable-background:new -289 191 20 20;" xml:space="preserve">
+            <path fill="#A5ACAD" class="st0" d="M-272.4,198.4C-272.4,198.4-272.4,198.4-272.4,198.4l-3.4,0l0.3-3.3c0-0.3-0.2-0.6-0.5-0.6
+              c-0.3,0-0.6,0.2-0.6,0.5l-0.3,3.4l-3.2,0l0.3-3.6c0-0.3-0.2-0.6-0.5-0.6c-0.3,0-0.6,0.2-0.6,0.5l-0.3,3.7l-3.2,0
+              c-0.3,0-0.5,0.2-0.5,0.6c0,0.3,0.2,0.5,0.5,0.5c0,0,0,0,0,0l3.1,0l-0.2,2.9l-3.5,0c-0.3,0-0.5,0.2-0.5,0.6c0,0.3,0.2,0.5,0.5,0.5
+              c0,0,0,0,0,0l3.4,0l-0.3,3.3c0,0.3,0.2,0.6,0.5,0.6c0,0,0,0,0,0c0.3,0,0.5-0.2,0.5-0.5l0.3-3.4l3.2,0l-0.3,3.6
+              c0,0.3,0.2,0.6,0.5,0.6c0,0,0,0,0,0c0.3,0,0.5-0.2,0.5-0.5l0.3-3.7l3.2,0c0.3,0,0.5-0.2,0.5-0.6c0-0.3-0.2-0.5-0.5-0.5c0,0,0,0,0,0
+              l-3.1,0l0.2-2.9l3.5,0c0.3,0,0.5-0.2,0.5-0.6C-271.8,198.7-272.1,198.4-272.4,198.4z M-277.2,202.4l-3.2,0l0.2-2.9l3.2,0
+              L-277.2,202.4z"/>
+            </svg>
+          </span>
           {{#if job.repo.slug}}
-            {{#link-to "job" job.repo job}}{{job.number}}{{/link-to}}
+            {{#link-to "job" job.repo job}}<span class="label-align">{{job.number}}</span>{{/link-to}}
           {{/if}}
         </p>
 
         <p>
-          <span class="icon icon--clock"></span> Queued
+          <span class="icon">
+            <svg version="1.1" id="Layer_1" x="0px" y="0px"
+               viewBox="-289 191 20 20" style="enable-background:new -289 191 20 20;" xml:space="preserve">
+              <g>
+                <path fill="#A5ACAD" class="st0" d="M-278.9,207.7c-3.7,0-6.7-3-6.7-6.7s3-6.7,6.7-6.7s6.7,3,6.7,6.7S-275.2,207.7-278.9,207.7z M-278.9,195.4
+                  c-3.1,0-5.6,2.5-5.6,5.6s2.5,5.6,5.6,5.6c3.1,0,5.6-2.5,5.6-5.6S-275.8,195.4-278.9,195.4z"/>
+                <path fill="#A5ACAD" class="st0" d="M-276.7,203.1c-0.1,0-0.2,0-0.3-0.1l-2.4-1.5c-0.2-0.1-0.2-0.3-0.2-0.4v-3.8c0-0.3,0.2-0.5,0.5-0.5
+                  s0.5,0.2,0.5,0.5v3.5l2.1,1.4c0.2,0.2,0.3,0.5,0.2,0.7C-276.4,203-276.5,203.1-276.7,203.1z"/>
+              </g>
+            </svg>
+          </span>
+          <span class="label-align">Queued</span>
         </p>
 
       </div>
diff --git a/app/templates/components/running-jobs.hbs b/app/templates/components/running-jobs.hbs
index a1a45fc2..96f7feaf 100644
--- a/app/templates/components/running-jobs.hbs
+++ b/app/templates/components/running-jobs.hbs
@@ -3,23 +3,48 @@
     {{#each jobs as |job| }}
       <div class="tile tile--sidebar {{job.state}}">
         {{#if job.repo.slug}}
-          <span class="icon icon--job {{job.state}}"></span>
-          {{#link-to "job" job.repo job}}{{job.repo.slug}}{{/link-to}}
+          {{status-icon status=job.state}}
+          {{#link-to "job" job.repo job}}
+            <span class="label-align">{{job.repo.slug}}</span>
+          {{/link-to}}
         {{/if}}
 
         <p class="tile-title float-right">
-          <span class="icon icon--hash"></span>
+          <span class="icon">
+            <svg version="1.1" id="Layer_1" x="0px" y="0px"
+               viewBox="-289 191 20 20" style="enable-background:new -289 191 20 20;" xml:space="preserve">
+            <path fill="#A5ACAD" class="st0" d="M-272.4,198.4C-272.4,198.4-272.4,198.4-272.4,198.4l-3.4,0l0.3-3.3c0-0.3-0.2-0.6-0.5-0.6
+              c-0.3,0-0.6,0.2-0.6,0.5l-0.3,3.4l-3.2,0l0.3-3.6c0-0.3-0.2-0.6-0.5-0.6c-0.3,0-0.6,0.2-0.6,0.5l-0.3,3.7l-3.2,0
+              c-0.3,0-0.5,0.2-0.5,0.6c0,0.3,0.2,0.5,0.5,0.5c0,0,0,0,0,0l3.1,0l-0.2,2.9l-3.5,0c-0.3,0-0.5,0.2-0.5,0.6c0,0.3,0.2,0.5,0.5,0.5
+              c0,0,0,0,0,0l3.4,0l-0.3,3.3c0,0.3,0.2,0.6,0.5,0.6c0,0,0,0,0,0c0.3,0,0.5-0.2,0.5-0.5l0.3-3.4l3.2,0l-0.3,3.6
+              c0,0.3,0.2,0.6,0.5,0.6c0,0,0,0,0,0c0.3,0,0.5-0.2,0.5-0.5l0.3-3.7l3.2,0c0.3,0,0.5-0.2,0.5-0.6c0-0.3-0.2-0.5-0.5-0.5c0,0,0,0,0,0
+              l-3.1,0l0.2-2.9l3.5,0c0.3,0,0.5-0.2,0.5-0.6C-271.8,198.7-272.1,198.4-272.4,198.4z M-277.2,202.4l-3.2,0l0.2-2.9l3.2,0
+              L-277.2,202.4z"/>
+            </svg>
+          </span>
           {{#if job.repo.slug}}
-            {{#link-to "job" job.repo job}}{{job.number}}{{/link-to}}
+            {{#link-to "job" job.repo job}}<span class="label-align">{{job.number}}</span>{{/link-to}}
           {{/if}}
         </p>
 
         <p>
-          <span class="icon icon--clock"></span>
-          Duration:
-          <abbr class="duration" title={{job.startedAt}}>
-            {{format-duration job.duration}}
-          </abbr>
+          <span class="icon">
+            <svg version="1.1" id="Layer_1" x="0px" y="0px"
+               viewBox="-289 191 20 20" style="enable-background:new -289 191 20 20;" xml:space="preserve">
+              <g>
+                <path fill="#A5ACAD" class="st0" d="M-278.9,207.7c-3.7,0-6.7-3-6.7-6.7s3-6.7,6.7-6.7s6.7,3,6.7,6.7S-275.2,207.7-278.9,207.7z M-278.9,195.4
+                  c-3.1,0-5.6,2.5-5.6,5.6s2.5,5.6,5.6,5.6c3.1,0,5.6-2.5,5.6-5.6S-275.8,195.4-278.9,195.4z"/>
+                <path fill="#A5ACAD" class="st0" d="M-276.7,203.1c-0.1,0-0.2,0-0.3-0.1l-2.4-1.5c-0.2-0.1-0.2-0.3-0.2-0.4v-3.8c0-0.3,0.2-0.5,0.5-0.5
+                  s0.5,0.2,0.5,0.5v3.5l2.1,1.4c0.2,0.2,0.3,0.5,0.2,0.7C-276.4,203-276.5,203.1-276.7,203.1z"/>
+              </g>
+            </svg>
+          </span>
+          <span class="label-align">
+            Duration:
+            <abbr class="duration" title={{job.startedAt}}>
+              {{format-duration job.duration}}
+            </abbr>
+          </span>
         </p>
 
       </div>