From 5a8eca13bed063a11a64151c746d8b3a63c460a9 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Fri, 16 Feb 2018 08:52:43 +1300
Subject: [PATCH] More icons; Cleaner tooltips

---
 src/assets/icons/blank.svg         |  5 ---
 src/assets/icons/broadcast.svg     |  7 +---
 src/assets/icons/chevron-left.svg  |  5 +--
 src/assets/icons/chevron-right.svg |  5 +--
 src/assets/icons/close.svg         |  8 ++---
 src/assets/icons/consume.svg       | 52 +++++++++++++++++++++++++++
 src/assets/icons/filter.svg        |  5 ++-
 src/assets/icons/folder.svg        |  3 +-
 src/assets/icons/grid.svg          |  3 +-
 src/assets/icons/leaf.svg          |  5 ++-
 src/assets/icons/list.svg          |  8 ++---
 src/assets/icons/local.svg         |  8 ++---
 src/assets/icons/mic.svg           |  5 ++-
 src/assets/icons/music.svg         |  5 ++-
 src/assets/icons/pause.svg         |  3 +-
 src/assets/icons/play-alt.svg      | 48 +++++++++++++++++++++++++
 src/assets/icons/play.svg          |  5 ++-
 src/assets/icons/playlist.svg      |  5 ++-
 src/assets/icons/repeat.svg        | 49 +++++++++++++++++++++++++
 src/assets/icons/search.svg        |  5 ++-
 src/assets/icons/sections.svg      |  2 --
 src/assets/icons/shuffle.svg       | 58 ++++++++++++++++++++++++++++++
 src/assets/icons/soundcloud.svg    |  2 --
 src/assets/icons/spotify.svg       |  2 --
 src/assets/icons/stop.svg          |  2 +-
 src/js/components/Icon.js          |  6 ++--
 src/js/components/Sidebar.js       |  4 +--
 src/scss/components/_modal.scss    |  8 ++---
 src/scss/components/_tooltip.scss  | 38 ++++++++++++--------
 src/scss/global/_forms.scss        |  6 ++++
 30 files changed, 272 insertions(+), 95 deletions(-)
 delete mode 100755 src/assets/icons/blank.svg
 create mode 100755 src/assets/icons/consume.svg
 create mode 100755 src/assets/icons/play-alt.svg
 create mode 100755 src/assets/icons/repeat.svg
 create mode 100755 src/assets/icons/shuffle.svg

diff --git a/src/assets/icons/blank.svg b/src/assets/icons/blank.svg
deleted file mode 100755
index 52d35689..00000000
--- a/src/assets/icons/blank.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<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"
-	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
-</svg>
diff --git a/src/assets/icons/broadcast.svg b/src/assets/icons/broadcast.svg
index e4aeb6e2..a5d09664 100755
--- a/src/assets/icons/broadcast.svg
+++ b/src/assets/icons/broadcast.svg
@@ -2,12 +2,7 @@
 <!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <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"
 	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#231F20;}
-</style>
-<path class="st0" d="M8,9.3C7.3,9.3,6.7,8.7,6.7,8S7.3,6.7,8,6.7S9.3,7.3,9.3,8S8.7,9.3,8,9.3z"/>
-<image style="overflow:visible;" width="626" height="626" xlink:href="2EE886BE.jpg"  transform="matrix(1 0 0 1 -8050 -7978.8032)">
-</image>
+<path d="M8,9.3C7.3,9.3,6.7,8.7,6.7,8S7.3,6.7,8,6.7S9.3,7.3,9.3,8S8.7,9.3,8,9.3z"/>
 <g>
 	<path class="st0" d="M9.6,11.3c-0.2,0-0.5-0.1-0.6-0.3c-0.2-0.3-0.1-0.8,0.2-1c0.7-0.4,1.1-1.2,1.1-2c0-0.8-0.4-1.6-1.1-2
 		C8.9,5.8,8.8,5.4,9,5c0.2-0.3,0.6-0.4,1-0.2c1.1,0.7,1.8,1.9,1.8,3.2c0,1.3-0.7,2.5-1.8,3.2C9.9,11.2,9.7,11.3,9.6,11.3z"/>
diff --git a/src/assets/icons/chevron-left.svg b/src/assets/icons/chevron-left.svg
index eb24896d..f42422e4 100755
--- a/src/assets/icons/chevron-left.svg
+++ b/src/assets/icons/chevron-left.svg
@@ -2,9 +2,6 @@
 <!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <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"
 	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#010101;}
-</style>
-<path class="st0" d="M6.2,6.9l5.7-5.7c0.4-0.4,0.4-0.9,0-1.3c-0.4-0.4-1-0.4-1.3,0L4.2,6.3C4,6.5,3.9,6.7,3.9,6.9
+<path d="M6.2,6.9l5.7-5.7c0.4-0.4,0.4-0.9,0-1.3c-0.4-0.4-1-0.4-1.3,0L4.2,6.3C4,6.5,3.9,6.7,3.9,6.9
 	c0,0.2,0.1,0.5,0.3,0.7l6.4,6.4c0.2,0.2,0.4,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-0.9,0-1.3L6.2,6.9z"/>
 </svg>
diff --git a/src/assets/icons/chevron-right.svg b/src/assets/icons/chevron-right.svg
index 699160d2..9f4ef05a 100755
--- a/src/assets/icons/chevron-right.svg
+++ b/src/assets/icons/chevron-right.svg
@@ -2,9 +2,6 @@
 <!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <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"
 	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#010101;}
-</style>
-<path class="st0" d="M11.9,7.3L5.5,0.9c-0.4-0.4-0.9-0.4-1.3,0c-0.4,0.4-0.4,0.9,0,1.3l5.7,5.7l-5.7,5.7c-0.4,0.4-0.4,0.9,0,1.3
+<path d="M11.9,7.3L5.5,0.9c-0.4-0.4-0.9-0.4-1.3,0c-0.4,0.4-0.4,0.9,0,1.3l5.7,5.7l-5.7,5.7c-0.4,0.4-0.4,0.9,0,1.3
 	c0.2,0.2,0.4,0.3,0.7,0.3s0.5-0.1,0.7-0.3l6.4-6.4c0.2-0.2,0.3-0.4,0.3-0.7S12,7.5,11.9,7.3z"/>
 </svg>
diff --git a/src/assets/icons/close.svg b/src/assets/icons/close.svg
index 56d9c29d..3147533d 100755
--- a/src/assets/icons/close.svg
+++ b/src/assets/icons/close.svg
@@ -1,8 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, 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">
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <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="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
-<line fill="none" stroke="#000000" stroke-width="2.8346" stroke-miterlimit="10" x1="6" y1="6" x2="44" y2="44"/>
-<line fill="none" stroke="#000000" stroke-width="2.8346" stroke-miterlimit="10" x1="6" y1="44" x2="44" y2="6"/>
+	 viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
+<polygon points="45,7 43,5 25,23 7,5 5,7 23,25 5,43 7,45 25,27 43,45 45,43 27,25 "/>
 </svg>
diff --git a/src/assets/icons/consume.svg b/src/assets/icons/consume.svg
new file mode 100755
index 00000000..ad6072aa
--- /dev/null
+++ b/src/assets/icons/consume.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, 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="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 489.773 489.773" style="enable-background:new 0 0 489.773 489.773;" xml:space="preserve">
+<g id="XMLID_95_">
+	<path id="XMLID_98_" d="M155.183,305.646c-2.081,0.175-4.157,0.265-6.238,0.265c-5.693,0-11.23-0.826-16.652-2.081L6.834,429.293
+		c-6.158,6.149-6.158,16.137,0,22.287l32.47,32.478c6.158,6.15,16.135,6.15,22.276,0l150.785-150.757l-27.944-30.15L155.183,305.646
+		z"/>
+	<path id="XMLID_97_" d="M485.345,104.649c-5.888-5.885-15.417-5.885-21.304,0l-81.303,81.301c-7.693,7.685-20.154,7.685-27.847,0
+		c-7.659-7.679-7.659-20.13,0-27.807l80.901-80.884c6.112-6.118,6.112-16.036,0-22.168c-6.141-6.11-16.055-6.11-22.167,0
+		l-80.868,80.876c-7.693,7.693-20.14,7.693-27.833,0c-7.677-7.676-7.677-20.136,0-27.806l81.286-81.293
+		c5.904-5.894,5.904-15.441,0-21.343c-5.888-5.895-15.434-5.895-21.338,0l-91.458,91.463
+		c-21.989,22.003-28.935,52.888-21.816,80.991l61.31,61.314c28.101,7.093,59.001,0.144,80.965-21.841l91.471-91.458
+		C491.249,120.1,491.249,110.543,485.345,104.649z"/>
+	<path id="XMLID_96_" d="M41.093,13.791c-3.134-3.135-7.372-4.854-11.724-4.854c-0.926,0-1.857,0.079-2.766,0.231
+		c-5.295,0.896-9.838,4.295-12.172,9.133c-26.79,55.373-15.594,121.631,27.894,165.121l77.801,77.791
+		c7.676,7.685,18.055,11.939,28.819,11.939c1.151,0,2.305-0.048,3.456-0.143l45.171-3.855l196.971,212.489
+		c3.058,3.303,7.342,5.221,11.855,5.31c0.093,0,0.19,0,0.288,0c4.412,0,8.636-1.743,11.771-4.855l33.734-33.741
+		c3.117-3.11,4.859-7.331,4.859-11.73c0-4.398-1.742-8.622-4.846-11.732L41.093,13.791z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/src/assets/icons/filter.svg b/src/assets/icons/filter.svg
index 22237674..6cafbfef 100755
--- a/src/assets/icons/filter.svg
+++ b/src/assets/icons/filter.svg
@@ -1,8 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 16.0.0, 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="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
 <path d="M13.954,2.139c-0.085-0.163-0.253-0.264-0.437-0.264H2.48c-0.183,0-0.352,0.102-0.437,0.264s-0.074,0.359,0.03,0.51
 	L6.86,9.604c0,1.3,0,4.013,0,4.32c1.021-0.254,1.258,1.165,2.278,0.429c0-0.426,0-3.384,0-4.748l4.785-6.957
 	C14.028,2.498,14.04,2.302,13.954,2.139z M8,8.604L5.351,4.754h5.297L8,8.604z"/>
diff --git a/src/assets/icons/folder.svg b/src/assets/icons/folder.svg
index 00c2df3e..ac0cc7c9 100755
--- a/src/assets/icons/folder.svg
+++ b/src/assets/icons/folder.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<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"
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
 <path d="M13.4,4.2H8.3V2.8c0-0.7-0.5-1.2-1.2-1.2H3.2C2.5,1.6,2,2.1,2,2.8v1.6c-0.4,0.2-0.6,0.6-0.6,1v7.7c0,0.7,0.5,1.2,1.2,1.2
 	h10.8c0.7,0,1.2-0.5,1.2-1.2V5.4C14.6,4.7,14.1,4.2,13.4,4.2z"/>
diff --git a/src/assets/icons/grid.svg b/src/assets/icons/grid.svg
index 04b66de7..f0208362 100755
--- a/src/assets/icons/grid.svg
+++ b/src/assets/icons/grid.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<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"
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
 <g>
 	<rect x="2" y="1.9" width="5" height="5"/>
diff --git a/src/assets/icons/leaf.svg b/src/assets/icons/leaf.svg
index 6dd1c1fd..c1433042 100755
--- a/src/assets/icons/leaf.svg
+++ b/src/assets/icons/leaf.svg
@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<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"
-	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" xml:space="preserve">
 <path d="M1.5,4.1c0,0,4.3-3.9,8.4-1.4c4.1,2.4,5.4,5.6,3.6,7.9C11.4,7.4,10.3,5.8,6,4.5c0,0,6.8,4.3,8,9.3c-0.2,1.1-1.2,0.3-1.2,0.3
 	l-1.1-1.8c0,0-2.1,1.6-4.6-0.5C2.9,8.1,6.2,4,1.5,4.1z"/>
 </svg>
diff --git a/src/assets/icons/list.svg b/src/assets/icons/list.svg
index 9fb2b325..0c1c501e 100755
--- a/src/assets/icons/list.svg
+++ b/src/assets/icons/list.svg
@@ -1,10 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<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"
-	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#010101;}
-</style>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" xml:space="preserve">
 <g>
 	<rect x="1.7" y="2.4" class="st0" width="12.6" height="1.9"/>
 	<rect x="1.7" y="7" class="st0" width="12.6" height="1.9"/>
diff --git a/src/assets/icons/local.svg b/src/assets/icons/local.svg
index 3c71770c..e2340d2e 100755
--- a/src/assets/icons/local.svg
+++ b/src/assets/icons/local.svg
@@ -1,8 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, 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="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
-<path id="local" d="M14.268,4.293H9.65L8.11,2.754H3.494v1.539H1.955v9.234h10.773v-1.538h1.539V4.293L14.268,4.293z M13.499,11.219
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
+<path d="M14.268,4.293H9.65L8.11,2.754H3.494v1.539H1.955v9.234h10.773v-1.538h1.539V4.293L14.268,4.293z M13.499,11.219
 	h-0.771V5.832H8.11l-1.538-1.54H4.264V3.523h3.529l1.539,1.539h4.167V11.219z"/>
 </svg>
diff --git a/src/assets/icons/mic.svg b/src/assets/icons/mic.svg
index d98773f1..dc330f99 100755
--- a/src/assets/icons/mic.svg
+++ b/src/assets/icons/mic.svg
@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<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"
-	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" xml:space="preserve">
 <g>
 	<path d="M7.4,6.2C7.2,6,6.8,6,6.6,6.2l-5.3,6.2c-0.1,0.1-0.2,0.2-0.2,0.4c0,0.2,0.1,0.3,0.2,0.4l1.5,1.5c0.1,0.1,0.2,0.2,0.4,0.2
 		c0.1,0,0.3-0.1,0.4-0.1l6.2-5.3C9.9,9.3,10,9.2,10,9c0-0.2-0.1-0.3-0.2-0.4L7.4,6.2z"/>
diff --git a/src/assets/icons/music.svg b/src/assets/icons/music.svg
index 11f5ff3f..291be573 100755
--- a/src/assets/icons/music.svg
+++ b/src/assets/icons/music.svg
@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<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"
-	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" xml:space="preserve">
 <path d="M15.1,0.5c-0.2-0.1-0.4-0.2-0.6-0.1L6,2.4C5.7,2.5,5.5,2.8,5.5,3.1v6.6C5,9.4,4.4,9.2,3.8,9.2c-1.7,0-3.1,1.4-3.1,3.1
 	s1.4,3.1,3.1,3.1c1.7,0,3.1-1.4,3.1-3.1V3.7L14,2v5.7c-0.5-0.3-1.1-0.5-1.7-0.5c-1.7,0-3.1,1.4-3.1,3.1s1.4,3.1,3.1,3.1
 	s3.1-1.4,3.1-3.1V1.1C15.4,0.9,15.3,0.7,15.1,0.5z"/>
diff --git a/src/assets/icons/pause.svg b/src/assets/icons/pause.svg
index 0d1e068f..404dd3c4 100755
--- a/src/assets/icons/pause.svg
+++ b/src/assets/icons/pause.svg
@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <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"
-	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+	 viewBox="0 0 16 16" xml:space="preserve">
 <g>
 	<path d="M6.2,13.8c0,0.1-0.1,0.2-0.2,0.2H3.6c-0.1,0-0.2-0.1-0.2-0.2V2.2C3.4,2.1,3.5,2,3.6,2h2.4c0.1,0,0.2,0.1,0.2,0.2V13.8z"/>
 </g>
diff --git a/src/assets/icons/play-alt.svg b/src/assets/icons/play-alt.svg
new file mode 100755
index 00000000..4fb719e9
--- /dev/null
+++ b/src/assets/icons/play-alt.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<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"
+	 viewBox="0 0 305 305" style="enable-background:new 0 0 305 305;" xml:space="preserve">
+<g id="XMLID_462_">
+	<path id="XMLID_463_" d="M109.588,230c1.059,0,2.135-0.066,3.201-0.198c14.049-1.754,24.607-14.558,23.571-28.561
+		c-0.001-0.024-0.002-0.047-0.003-0.071c0.025-0.144,0.039-0.292,0.039-0.443v-76.194l54.993-10.237v56.219
+		c-2.942-0.722-6.067-0.897-9.167-0.508c-14.084,1.741-24.666,14.585-23.59,28.628c0.976,12.947,11.5,22.71,24.481,22.71
+		c1.067,0,2.152-0.068,3.224-0.202c14.062-1.753,24.643-14.596,23.587-28.623c-0.002-0.024-0.004-0.048-0.006-0.072
+		c0.02-0.124,0.029-0.251,0.029-0.381V77.994l0.023-0.288c0.075-0.905-0.363-1.771-1.119-2.276
+		c-0.571-0.382-1.274-0.501-1.934-0.357c-0.012,0.002-0.024,0.005-0.036,0.007l-86.983,14.849c-1.201,0.205-2.079,1.246-2.079,2.464
+		v86.793c-2.95-0.729-6.074-0.908-9.164-0.521c-14.09,1.738-24.665,14.583-23.574,28.631C86.072,220.24,96.607,230.001,109.588,230z
+		"/>
+	<path id="XMLID_464_" d="M152.5,305c84.089,0,152.5-68.411,152.5-152.5S236.589,0,152.5,0S0,68.411,0,152.5S68.411,305,152.5,305z
+		 M152.5,34.997c64.791,0,117.503,52.711,117.503,117.503c0,64.792-52.712,117.504-117.503,117.504S34.997,217.292,34.997,152.5
+		C34.997,87.709,87.709,34.997,152.5,34.997z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/src/assets/icons/play.svg b/src/assets/icons/play.svg
index 28958742..acf44f17 100755
--- a/src/assets/icons/play.svg
+++ b/src/assets/icons/play.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<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"
-	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" xml:space="preserve">
 <path d="M13.2,7.8L3.6,1.5c-0.1-0.1-0.2,0-0.2,0.1v12.6c0,0.1,0.1,0.2,0.2,0.1L13.2,8C13.3,8,13.3,7.9,13.2,7.8z"/>
 </svg>
diff --git a/src/assets/icons/playlist.svg b/src/assets/icons/playlist.svg
index 71d2e031..01aff694 100755
--- a/src/assets/icons/playlist.svg
+++ b/src/assets/icons/playlist.svg
@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<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"
-	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" xml:space="preserve">
 <g>
 	<path d="M11,1.1c-0.2-0.2-0.5-0.3-0.8-0.2C10,1.1,9.8,1.3,9.8,1.6v7.6C9.3,8.9,8.7,8.7,8.1,8.7C6.4,8.7,5,10.1,5,11.8
 		s1.4,3.1,3.1,3.1c1.7,0,3.1-1.4,3.1-3.1V3.3L14,6.2l1-1L11,1.1z"/>
diff --git a/src/assets/icons/repeat.svg b/src/assets/icons/repeat.svg
new file mode 100755
index 00000000..57214dd4
--- /dev/null
+++ b/src/assets/icons/repeat.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512.013 512.013" style="enable-background:new 0 0 512.013 512.013;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M510.502,297.222c-2.656-5.632-8.288-9.216-14.496-9.216h-48v-128c0-35.296-28.704-64-64-64H145.158l53.344,64h185.504
+			v128h-48c-6.208,0-11.84,3.584-14.496,9.216c-2.624,5.632-1.792,12.256,2.208,17.024l80,96c3.04,3.68,7.552,5.76,12.288,5.76
+			c4.736,0,9.248-2.08,12.288-5.76l80-96C512.294,309.478,513.126,302.854,510.502,297.222z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M313.51,352.006H128.006v-128h48c6.208,0,11.84-3.584,14.496-9.216c2.624-5.632,1.792-12.256-2.208-17.024l-80-96
+			c-3.04-3.68-7.52-5.76-12.288-5.76s-9.248,2.08-12.288,5.76l-80,96c-4,4.768-4.832,11.392-2.208,17.024
+			c2.656,5.632,8.288,9.216,14.496,9.216h48v128c0,35.296,28.704,64,64,64h238.848L313.51,352.006z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/src/assets/icons/search.svg b/src/assets/icons/search.svg
index b525cf5c..920fffed 100755
--- a/src/assets/icons/search.svg
+++ b/src/assets/icons/search.svg
@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<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"
-	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" xml:space="preserve">
 <path d="M15.3,13.4l-3.5-3.5C12.2,9,12.5,8,12.5,7c0-3.1-2.5-5.6-5.6-5.6C3.8,1.4,1.3,3.9,1.3,7c0,3.1,2.5,5.6,5.6,5.6
 	c1.2,0,2.4-0.4,3.3-1.1l3.5,3.5c0.2,0.2,0.5,0.3,0.8,0.3s0.6-0.1,0.8-0.3C15.7,14.6,15.7,13.8,15.3,13.4z M3.5,7
 	c0-1.9,1.5-3.4,3.4-3.4c1.9,0,3.4,1.5,3.4,3.4c0,0.7-0.2,1.4-0.6,1.9C9.6,9,9.5,9,9.4,9.1C9.3,9.2,9.2,9.3,9.1,9.5
diff --git a/src/assets/icons/sections.svg b/src/assets/icons/sections.svg
index 3b351b7d..dc4d483c 100755
--- a/src/assets/icons/sections.svg
+++ b/src/assets/icons/sections.svg
@@ -1,6 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, 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="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
 <rect x="2.018" y="2.128" fill="#010101" width="4.289" height="4.289"/>
diff --git a/src/assets/icons/shuffle.svg b/src/assets/icons/shuffle.svg
new file mode 100755
index 00000000..8b7b1247
--- /dev/null
+++ b/src/assets/icons/shuffle.svg
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M506.24,371.7l-96-80c-4.768-4-11.424-4.8-17.024-2.208c-5.632,2.656-9.216,8.288-9.216,14.496v48h-26.784
+			c-22.208,0-42.496-11.264-54.272-30.08l-103.616-165.76c-23.52-37.664-64.096-60.16-108.544-60.16H0v64h90.784
+			c22.208,0,42.496,11.264,54.272,30.08l103.616,165.76c23.552,37.664,64.128,60.16,108.544,60.16H384v48
+			c0,6.208,3.584,11.84,9.216,14.496c2.144,0.992,4.48,1.504,6.784,1.504c3.68,0,7.328-1.248,10.24-3.712l96-80
+			c3.68-3.04,5.76-7.552,5.76-12.288C512,379.252,509.92,374.74,506.24,371.7z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M506.24,115.7l-96-80c-4.768-3.968-11.424-4.8-17.024-2.176C387.584,36.116,384,41.78,384,47.988v48h-26.784
+			c-44.448,0-85.024,22.496-108.544,60.16l-5.792,9.28l37.728,60.384l22.336-35.744c11.776-18.816,32.064-30.08,54.272-30.08H384v48
+			c0,6.208,3.584,11.872,9.216,14.496c2.144,0.992,4.48,1.504,6.784,1.504c3.68,0,7.328-1.28,10.24-3.712l96-80
+			c3.68-3.04,5.76-7.552,5.76-12.288C512,123.252,509.92,118.74,506.24,115.7z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M167.392,286.164l-22.304,35.744c-11.776,18.816-32.096,30.08-54.304,30.08H0v64h90.784
+			c44.416,0,84.992-22.496,108.544-60.16l5.792-9.28L167.392,286.164z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/src/assets/icons/soundcloud.svg b/src/assets/icons/soundcloud.svg
index 7afae0e3..2f31d65e 100755
--- a/src/assets/icons/soundcloud.svg
+++ b/src/assets/icons/soundcloud.svg
@@ -1,6 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, 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="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
 <path id="soundcloud" d="M0.027,10.945c0,0.197,0.072,0.347,0.215,0.447c0.145,0.104,0.298,0.139,0.462,0.108
diff --git a/src/assets/icons/spotify.svg b/src/assets/icons/spotify.svg
index 5bf9a996..1f8de75e 100755
--- a/src/assets/icons/spotify.svg
+++ b/src/assets/icons/spotify.svg
@@ -1,6 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, 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="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
 <path id="spotify" d="M7.94,1.887c-3.389,0-6.16,2.772-6.16,6.162c0,3.391,2.771,6.161,6.16,6.161c3.388,0,6.16-2.771,6.16-6.161
diff --git a/src/assets/icons/stop.svg b/src/assets/icons/stop.svg
index 8d6d03f5..d0986522 100755
--- a/src/assets/icons/stop.svg
+++ b/src/assets/icons/stop.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <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"
 	 viewBox="0 0 16 16" xml:space="preserve">
-<path class="st0" d="M13.8,2H2.2C2.1,2,2,2.1,2,2.2v11.6C2,13.9,2.1,14,2.2,14h11.6c0.1,0,0.2-0.1,0.2-0.2V2.2C14,2.1,13.9,2,13.8,2
+<path d="M13.8,2H2.2C2.1,2,2,2.1,2,2.2v11.6C2,13.9,2.1,14,2.2,14h11.6c0.1,0,0.2-0.1,0.2-0.2V2.2C14,2.1,13.9,2,13.8,2
 	z"/>
 </svg>
diff --git a/src/js/components/Icon.js b/src/js/components/Icon.js
index 3b9804e5..80e86f90 100755
--- a/src/js/components/Icon.js
+++ b/src/js/components/Icon.js
@@ -17,13 +17,13 @@ export default class Icon extends React.Component{
 
 	componentWillReceiveProps(newProps){
 		if (this.props.name !== newProps.name){
-			this.load();
+			this.load(newProps.name);
 		}
 	}
 
-	load(){		
+	load(name = this.props.name){		
 		var self = this;
-		var url = 'assets/icons/'+this.props.name+'.svg';
+		var url = 'assets/icons/'+name+'.svg';
 		var xmlHttp = new XMLHttpRequest();
 
 		xmlHttp.onreadystatechange = function(){ 
diff --git a/src/js/components/Sidebar.js b/src/js/components/Sidebar.js
index a03df7d2..ef6d687b 100755
--- a/src/js/components/Sidebar.js
+++ b/src/js/components/Sidebar.js
@@ -91,8 +91,8 @@ class Sidebar extends React.Component{
 							<Link className={this.linkClassName('settings')} to={global.baseURL+"settings"}>
 								<Icon name="cog" />
 								Settings
-								{ this.props.test_mode ? <FontAwesome name="info-circle" className="orange-text pull-right" />: null}
-								{ !this.props.mopidy_connected || (!this.props.spotify_connected && this.props.spotify_enabled) || !this.props.pusher_connected ? <FontAwesome name="exclamation-triangle" className="red-text pull-right" /> : null }
+								{this.props.test_mode ? <span className="has-tooltip right-tooltip pull-right"><FontAwesome name="info-circle" className="orange-text" /><span className="tooltip">Test mode active</span></span>: null}
+								{!this.props.mopidy_connected || (!this.props.spotify_connected && this.props.spotify_enabled) || !this.props.pusher_connected ? <FontAwesome name="exclamation-triangle" className="red-text pull-right" /> : null}
 							</Link>
 						</section>
 
diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss
index 94624eec..a77beb67 100755
--- a/src/scss/components/_modal.scss
+++ b/src/scss/components/_modal.scss
@@ -29,16 +29,12 @@
 			cursor: pointer;
 			padding: 20px;
 
-			img {
-				width: 30px;
-			}
-
 			&:hover {
 				opacity: 1;
 			}
 
-			.fa {
-				font-size: 24px;
+			.icon svg {
+				height: 35px;
 			}
 		}
 	}
diff --git a/src/scss/components/_tooltip.scss b/src/scss/components/_tooltip.scss
index bb25afe9..c3748231 100755
--- a/src/scss/components/_tooltip.scss
+++ b/src/scss/components/_tooltip.scss
@@ -4,21 +4,21 @@
 
 	.tooltip {
 		@include animate();
-		opacity: 0;
+		display: inline-block;
 		position: absolute;
-		pointer-events: none;
-		background: $overlay_dark;
-		display: block;
-		max-width: 200px;
-		padding: 5px 8px;
-		color: $white;
-		font-size: 11px;
-		line-height: 12px;
 		bottom: 37px;
 		left: 1px;
-		z-index: 97;
+		right: auto;
+		opacity: 0;
+		padding: 8px 10px 6px;
 		border-radius: 3px;
-		white-space: wrap;
+		pointer-events: none;
+		background: $white;
+		color: $black;
+		font-size: 11px;
+		z-index: 97;
+		white-space: nowrap;
+		text-align: left;
 
 		&:first-letter {
 			text-transform: uppercase;
@@ -29,7 +29,7 @@
 			display: block;
 			width: 6px;
 			height: 6px;
-			background: $overlay_dark;
+			background: $white;
 			-ms-transform: rotate(45deg);
 			-webkit-transform: rotate(45deg);
 			transform: rotate(45deg);
@@ -46,9 +46,15 @@
 		}
 	}
 
-	&.info {
-		.fa {
-			opacity: 0.3;
+	&.right-tooltip {
+		.tooltip {
+			left: auto;
+			right: -5px;
+
+			&:after {
+				right: 9px;
+				left: auto;
+			}
 		}
 	}
 
@@ -58,6 +64,8 @@
 			font-size: 12px;
 			line-height: 14px;
 			bottom: 50px;
+			white-space: wrap;
+			max-width: 200px;
 		}
 	}
 }
diff --git a/src/scss/global/_forms.scss b/src/scss/global/_forms.scss
index 5dad37c8..0115a94e 100755
--- a/src/scss/global/_forms.scss
+++ b/src/scss/global/_forms.scss
@@ -223,6 +223,12 @@ input[type="submit"] {
 		display: inline-block;
 	}
 
+	.label {
+		.tooltip {
+			left: -4px;
+		}
+	}
+
 	.input {
 		width: 80%;
 		float: left;