From 4e532118ea881ad800c93e7148abd7ed3ea96de9 Mon Sep 17 00:00:00 2001
From: Lisa Passing <mail@lislis.de>
Date: Mon, 16 Mar 2015 12:31:10 +0100
Subject: [PATCH] implement design feedbacdk and new icons

---
 app/styles/app/_mixins/vars.sass       |  1 +
 app/styles/app/modules/buttons.sass    |  1 +
 app/styles/app/modules/icons.sass      | 19 ++++++-----------
 app/styles/app/modules/tabs.sass       | 16 +++++++-------
 app/styles/app/modules/tiles.sass      | 16 +++++---------
 public/images/svg/icon-help.svg        | 17 +++++++++++++++
 public/images/svg/icon-job-errored.svg | 12 +++++++++++
 public/images/svg/icon-job-started.svg | 11 ++++++++++
 public/images/svg/icon-tab-arrow.svg   |  8 +++++++
 public/images/svg/question.svg         | 29 --------------------------
 10 files changed, 70 insertions(+), 60 deletions(-)
 create mode 100644 public/images/svg/icon-help.svg
 create mode 100644 public/images/svg/icon-job-errored.svg
 create mode 100644 public/images/svg/icon-job-started.svg
 create mode 100644 public/images/svg/icon-tab-arrow.svg
 delete mode 100644 public/images/svg/question.svg

diff --git a/app/styles/app/_mixins/vars.sass b/app/styles/app/_mixins/vars.sass
index e32c847c..ec945b9a 100644
--- a/app/styles/app/_mixins/vars.sass
+++ b/app/styles/app/_mixins/vars.sass
@@ -35,6 +35,7 @@ $start-color: #D2C93B
 $start-bg-color: #D2CA24
 $cancel-color: #A1A0A0
 $dropdown-color: $teal1
+$created-color: #CDBC2C
 
 $dashboard-text-color: #9d9fa1
 
diff --git a/app/styles/app/modules/buttons.sass b/app/styles/app/modules/buttons.sass
index bd91bf68..cc60c1fb 100644
--- a/app/styles/app/modules/buttons.sass
+++ b/app/styles/app/modules/buttons.sass
@@ -146,5 +146,6 @@ $button-border-color: #d4d4d4
   .icon--question
     @extend %absolute-center
     width: 0.9em
+    transform: translateX(.1em)
     background-size: 80% auto
 
diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass
index 8b1aefac..f77bd026 100644
--- a/app/styles/app/modules/icons.sass
+++ b/app/styles/app/modules/icons.sass
@@ -93,21 +93,11 @@
   background-image: inline-image('svg/icon-job-passed.svg')
 .icon--error-grey,
 .icon--job.errored
-  &:after
-    content: "!"
-    display: block
-    width: 0.4em
-    height: 1em
-    font-size: 24px
+  background-image: inline-image('svg/icon-job-errored.svg')
 .icon--job.started,
 .icon--job.created,
 .icon--started-yellow
-  &:after
-    content: "..."
-    display: block
-    width: 0.4em
-    height: 1em
-    font-size: 24px
+  background-image: inline-image('svg/icon-job-started.svg')
 
 .icon--lang
   background-image: inline-image('svg/icon-language.svg')
@@ -120,7 +110,10 @@
 .icon--eye
   background-image: inline-image('svg/icon-showmore.svg')
 .icon--question
-  background-image: inline-image('svg/question.svg')
+  background-image: inline-image('svg/icon-help.svg')
+
+.icon-tab-arrow
+  background-image: inline-image('svg/icon-tab-arrow.svg')
 
 
 .icon-arrow-down
diff --git a/app/styles/app/modules/tabs.sass b/app/styles/app/modules/tabs.sass
index 49b95878..c0a02746 100644
--- a/app/styles/app/modules/tabs.sass
+++ b/app/styles/app/modules/tabs.sass
@@ -44,16 +44,18 @@
   position: relative
   padding-left: 1em
   &:before
-    content: "\003E"
+    content: ""
     display: block
     position: absolute
     color: $grey4
-    left: -0.5em
-    width: .6em
-    height:  1em
-    font-size: 29px
-    line-height: 1
-    transform: scale(0.6, 1.6)
+    top: 0.4em
+    left: -0.7em
+    width: .7em
+    height:  1.3em
+    background:
+      size: 100%
+      repeat: no-repeat
+    @extend .icon-tab-arrow
 
 
 .tabbody
diff --git a/app/styles/app/modules/tiles.sass b/app/styles/app/modules/tiles.sass
index ec88f287..b5a4d4cc 100644
--- a/app/styles/app/modules/tiles.sass
+++ b/app/styles/app/modules/tiles.sass
@@ -44,12 +44,13 @@
     &.failed
       @include colorJobs($fail-color)
     &.errored
-      @include colorJobs($cancel-color)
+      @include colorJobs(#939292)
     &.passed
       @include colorJobs($pass-color)
     &.started,
-    &.created
-      @include colorJobs($start-color)
+    &.created,
+    &.received
+      @include colorJobs($created-color)
 
   @media #{$medium-up}
     height: 145px
@@ -167,15 +168,8 @@
   margin-bottom: 0.3em
   @media #{$medium-up}
     height: 64px
-  .icon.errored
-    width: .5em
-  .icon.started,
-  .icon.created
-    &:after
-      width: .8em
-      color: $start-color
-      margin-top: -0.3em
   .tile-main
+    color: #7d8282
     .icon
       margin-right: .3em
     .icon.mac
diff --git a/public/images/svg/icon-help.svg b/public/images/svg/icon-help.svg
new file mode 100644
index 00000000..a0c81ce9
--- /dev/null
+++ b/public/images/svg/icon-help.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="5px" height="9px" viewBox="0 0 5 9" enable-background="new 0 0 5 9" xml:space="preserve">
+<path fill="#FFFFFF" d="M2.187,6.817c-0.304,0-0.578,0.096-0.78,0.294C1.199,7.31,1.096,7.592,1.098,7.902
+	C1.096,8.216,1.199,8.498,1.405,8.7C1.605,8.902,1.877,9,2.18,9c0.002,0,0.004,0,0.007,0c0.318,0.002,0.6-0.094,0.805-0.3
+	c0.204-0.202,0.306-0.484,0.305-0.798C3.297,7.592,3.195,7.31,2.989,7.111C2.783,6.911,2.502,6.817,2.187,6.817z"/>
+<path fill="#FFFFFF" d="M2.568,0C2.029,0,1.562,0.068,1.167,0.208C0.782,0.347,0.439,0.521,0.139,0.734L0,0.833L0.738,2.31
+	l0.178-0.127c0.09-0.066,0.193-0.128,0.311-0.192c0.115-0.062,0.237-0.117,0.364-0.166c0.125-0.044,0.25-0.081,0.375-0.106
+	c0.124-0.025,0.238-0.038,0.345-0.038c0.35,0,0.554,0.083,0.638,0.181C3.056,1.985,3.115,2.142,3.116,2.38
+	c-0.001,0.176-0.04,0.314-0.115,0.432c-0.086,0.136-0.198,0.27-0.334,0.4C2.523,3.351,2.368,3.495,2.201,3.646
+	C2.019,3.81,1.858,4.003,1.718,4.223C1.574,4.45,1.464,4.714,1.385,5.014C1.329,5.225,1.304,5.458,1.304,5.713
+	c0,0.13,0.006,0.265,0.018,0.404L1.34,6.299h0.175h1.434v-0.2c0-0.305,0.05-0.542,0.136-0.713c0.096-0.192,0.211-0.361,0.347-0.509
+	C3.575,4.729,3.731,4.584,3.904,4.45c0.19-0.149,0.364-0.319,0.524-0.513c0.163-0.202,0.298-0.442,0.406-0.719
+	C4.948,2.925,5,2.572,5,2.159c0.003-0.645-0.222-1.191-0.661-1.581C3.899,0.185,3.297,0,2.568,0z"/>
+</svg>
diff --git a/public/images/svg/icon-job-errored.svg b/public/images/svg/icon-job-errored.svg
new file mode 100644
index 00000000..914b14a8
--- /dev/null
+++ b/public/images/svg/icon-job-errored.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="15.188px" height="15.229px" viewBox="0 0 15.188 15.229" enable-background="new 0 0 15.188 15.229" xml:space="preserve">
+<g>
+	<path fill="#A0A09F" d="M6.345,9.028c0.049,0.598,0.58,1.086,1.179,1.086h0.307c0.6,0,1.13-0.488,1.18-1.086l0.654-7.941
+		C9.715,0.489,9.265,0,8.665,0H6.692c-0.6,0-1.05,0.489-1,1.086L6.345,9.028z"/>
+	<path fill="#A0A09F" d="M7.68,11.785c-0.896,0-1.609,0.713-1.609,1.609C6.071,14.289,6.783,15,7.68,15
+		c0.895,0,1.606-0.71,1.606-1.605C9.286,12.498,8.574,11.785,7.68,11.785z"/>
+</g>
+</svg>
diff --git a/public/images/svg/icon-job-started.svg b/public/images/svg/icon-job-started.svg
new file mode 100644
index 00000000..88a2827b
--- /dev/null
+++ b/public/images/svg/icon-job-started.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="15.188px" height="15.229px" viewBox="0 0 15.188 15.229" enable-background="new 0 0 15.188 15.229" xml:space="preserve">
+<g>
+	<circle fill="#CDBC2C" cx="7.686" cy="7.369" r="2.044"/>
+	<circle fill="#D6C826" cx="13.143" cy="7.369" r="2.044"/>
+	<circle fill="#D6C826" cx="2.232" cy="7.369" r="2.044"/>
+</g>
+</svg>
diff --git a/public/images/svg/icon-tab-arrow.svg b/public/images/svg/icon-tab-arrow.svg
new file mode 100644
index 00000000..4fcd0df5
--- /dev/null
+++ b/public/images/svg/icon-tab-arrow.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="8.024px" height="14.307px" viewBox="0 0 8.024 14.307" enable-background="new 0 0 8.024 14.307" xml:space="preserve">
+<polyline fill="none" stroke="#E1E1E0" stroke-width="1.9341" stroke-miterlimit="10" points="0.713,0.653 6.713,7.201 
+	0.801,13.653 "/>
+</svg>
diff --git a/public/images/svg/question.svg b/public/images/svg/question.svg
deleted file mode 100644
index 2638265e..00000000
--- a/public/images/svg/question.svg
+++ /dev/null
@@ -1,29 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="83px" height="105.6px" viewBox="36.5 22.5 83 105.6" enable-background="new 36.5 22.5 83 105.6" xml:space="preserve">
-<g>
-	<path fill="none" d="M95.8,29.8c-5.533-2.733-11.2-4.1-17-4.1c-16.2,0-28.566,7.1-37.1,21.3c-1,1.6-0.733,3,0.8,4.2l13.2,10
-		c0.466,0.4,1.1,0.6,1.9,0.6c1.066,0,1.9-0.4,2.5-1.2c3.533-4.533,6.4-7.6,8.6-9.2c2.267-1.6,5.133-2.4,8.6-2.4
-		c3.2,0,6.05,0.867,8.55,2.6s3.75,3.7,3.75,5.9c0,2.533-0.666,4.567-2,6.1c-1.333,1.533-3.6,3.033-6.8,4.5
-		c-4.2,1.867-8.05,4.75-11.55,8.65C65.75,80.65,64,84.834,64,89.3V92.9c0,0.934,0.3,1.699,0.9,2.3c0.6,0.6,1.367,0.899,2.3,0.899
-		h19.2c0.934,0,1.699-0.3,2.3-0.899c0.6-0.601,0.899-1.366,0.899-2.3c0-1.268,0.717-2.917,2.15-4.95
-		C93.184,85.916,95,84.267,97.2,83c2.134-1.2,3.767-2.15,4.899-2.85c1.134-0.7,2.667-1.867,4.601-3.5
-		c1.933-1.633,3.417-3.233,4.45-4.8c1.033-1.567,1.967-3.583,2.8-6.05c0.833-2.466,1.25-5.167,1.25-8.1
-		c0-5.867-1.851-11.3-5.55-16.3C105.95,36.4,101.334,32.533,95.8,29.8z"/>
-	<path fill="none" d="M86.4,102.5H67.2c-0.934,0-1.7,0.3-2.3,0.9c-0.6,0.6-0.9,1.366-0.9,2.3v19.2c0,0.934,0.3,1.699,0.9,2.3
-		c0.6,0.6,1.367,0.899,2.3,0.899h19.2c0.934,0,1.699-0.3,2.3-0.899c0.6-0.601,0.899-1.366,0.899-2.3v-19.2
-		c0-0.934-0.3-1.7-0.899-2.3C88.1,102.8,87.334,102.5,86.4,102.5z"/>
-	<path fill="#FFFFFF" d="M89.6,124.9c0,0.934-0.3,1.699-0.899,2.3c-0.601,0.6-1.366,0.899-2.3,0.899H67.2
-		c-0.934,0-1.7-0.3-2.3-0.899c-0.6-0.601-0.9-1.366-0.9-2.3v-19.2c0-0.934,0.3-1.7,0.9-2.3c0.6-0.601,1.367-0.9,2.3-0.9h19.2
-		c0.934,0,1.699,0.3,2.3,0.9c0.6,0.6,0.899,1.366,0.899,2.3V124.9z M113.95,65.8c-0.833,2.467-1.767,4.483-2.8,6.05
-		c-1.033,1.566-2.518,3.167-4.45,4.8c-1.934,1.633-3.467,2.8-4.601,3.5C100.967,80.85,99.334,81.8,97.2,83
-		c-2.2,1.267-4.017,2.916-5.45,4.95c-1.434,2.033-2.15,3.683-2.15,4.95c0,0.934-0.3,1.699-0.899,2.3
-		C88.1,95.8,87.334,96.1,86.4,96.1H67.2c-0.934,0-1.7-0.3-2.3-0.899C64.3,94.6,64,93.834,64,92.9V89.3
-		c0-4.466,1.75-8.649,5.25-12.55c3.5-3.9,7.35-6.783,11.55-8.65c3.2-1.467,5.467-2.967,6.8-4.5c1.334-1.533,2-3.567,2-6.1
-		c0-2.2-1.25-4.167-3.75-5.9S80.5,49,77.3,49c-3.466,0-6.333,0.8-8.6,2.4c-2.2,1.6-5.067,4.667-8.6,9.2c-0.6,0.8-1.434,1.2-2.5,1.2
-		c-0.8,0-1.434-0.2-1.9-0.6l-13.2-10c-1.533-1.2-1.8-2.6-0.8-4.2c8.533-14.2,20.9-21.3,37.1-21.3c5.8,0,11.467,1.367,17,4.1
-		c5.534,2.733,10.15,6.6,13.851,11.6c3.699,5,5.55,10.434,5.55,16.3C115.2,60.633,114.783,63.333,113.95,65.8z"/>
-</g>
-</svg>