diff --git a/data/images/back-pressed.svg b/data/images/back-pressed.svg
index bf50660cd..5ed9fdb96 100644
--- a/data/images/back-pressed.svg
+++ b/data/images/back-pressed.svg
@@ -1,17 +1,17 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="102px" height="102px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<svg width="122px" height="122px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
     <title>back-pressed</title>
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs>
         <linearGradient x1="50%" y1="50%" x2="50%" y2="0%" id="linearGradient-1">
-            <stop stop-color="rgb(49,55,59)" offset="0%"></stop>
+            <stop stop-color="rgb(37,41,44)" offset="0%"></stop>
             <stop stop-color="rgb(0,0,0)" stop-opacity="0.5" offset="100%"></stop>
         </linearGradient>
-        <path d="M51,101 C78.6142389,101 101,78.6142389 101,51 C101,23.3857611 78.6142389,1 51,1 C23.3857611,1 1,23.3857611 1,51 C1,78.6142389 23.3857611,101 51,101 Z M51,101" id="path-2"></path>
+        <path d="M61,106 C85.852815,106 106,85.852815 106,61 C106,36.147185 85.852815,16 61,16 C36.147185,16 16,36.147185 16,61 C16,85.852815 36.147185,106 61,106 Z M61,121 C27.8629134,121 1,94.1370866 1,61 C1,27.8629134 27.8629134,1 61,1 C94.1370866,1 121,27.8629134 121,61 C121,94.1370866 94.1370866,121 61,121 Z M72.020667,47.866611 C72.5906846,47.4418988 73.3484729,47.3820274 73.9739682,47.7088251 C74.602506,48.0362617 74.9981666,48.6973776 75,49.4182771 L75,72.5816226 C75,73.3019496 74.603731,73.963029 73.9751875,74.2898267 C73.7063342,74.4307738 73.4155337,74.5 73.1241236,74.5 C72.7357801,74.5 72.3474365,74.3758917 72.0212766,74.1332881 L64.3385355,68.4243067 L64.3385355,72.5816224 C64.3385355,73.3019495 63.9416569,73.9630288 63.3131133,74.2898265 C63.0448697,74.4307736 62.7534596,74.4999998 62.4620495,74.4999998 C62.0737059,74.4999998 61.6853623,74.3758915 61.3598121,74.1332879 L45.773639,62.5513035 C45.2865329,62.1895808 45,61.6126956 45,60.9983907 C45,60.3847096 45.2877523,59.8072007 45.773639,59.4467253 L61.3598121,47.8666109 C61.9298299,47.4418986 62.6870084,47.3820273 63.3125037,47.708825 C63.941657,48.0362464 64.3379259,48.6973257 64.3379259,49.4189 L64.3379259,53.5737213 Z M72.020667,47.866611" id="path-2"></path>
     </defs>
-    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
-        <use id="Oval 1" stroke="rgb(167,167,167)" stroke-width="1" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
-        <use id="Oval 1-1" stroke="none" fill="none" xlink:href="#path-2"></use>
-        <path d="M63.8029629,35.7397622 C63.0732183,35.36455 62.1891321,35.4332912 61.5241115,35.9209238 L52.5609136,42.4735319 L52.5609136,37.7031815 C52.5609136,36.8747073 52.0985998,36.1156903 51.3645877,35.739762 C50.6348431,35.3645498 49.7514682,35.433291 49.0864475,35.9209236 L30.9025788,49.2166106 C30.335711,49.6304897 30,50.2935554 30,50.9981523 C30,51.7034653 30.3342884,52.365815 30.9025788,52.7811262 L49.0864475,66.0789602 C49.466256,66.3575051 49.9193236,66.4999998 50.3723911,66.4999998 C50.7123695,66.4999998 51.052348,66.4205178 51.3652989,66.2586897 C52.0985997,65.8834775 52.5616248,65.1244605 52.5616248,64.2974183 L52.5616248,59.524204 L61.5248227,66.0789604 C61.9053425,66.3575053 62.3584101,66.5 62.8114776,66.5 C63.151456,66.5 63.4907232,66.420518 63.8043854,66.2586899 C64.5376862,65.8834777 65,65.1244607 65,64.2974185 L65,37.7024663 C64.9978611,36.8747668 64.536257,36.1157079 63.8029629,35.7397622 C63.8029629,35.7397622 64.536257,36.1157079 63.8029629,35.7397622 L63.8029629,35.7397622" id="Shape" fill="rgb(213,213,213)"></path>
+    <g id="Page 1" fill="rgb(215,215,215)" fill-rule="evenodd">
+        <path d="M61,121 C94.1370866,121 121,94.1370866 121,61 C121,27.8629134 94.1370866,1 61,1 C27.8629134,1 1,27.8629134 1,61 C1,94.1370866 27.8629134,121 61,121 Z M61,121" id="Oval 18" stroke="rgb(150,150,150)" stroke-width="1" fill-opacity="0.00241268382" fill="rgb(254,255,254)"></path>
+        <use id="Oval 33" stroke="rgb(150,150,150)" stroke-width="1" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
+        <use id="Oval 33-1" stroke="none" fill="none" xlink:href="#path-2"></use>
     </g>
 </svg>
\ No newline at end of file
diff --git a/data/images/back-rest.svg b/data/images/back-rest.svg
index 4f3075f2b..0b19e2b1d 100644
--- a/data/images/back-rest.svg
+++ b/data/images/back-rest.svg
@@ -1,17 +1,17 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="102px" height="102px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<svg width="122px" height="122px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
     <title>back-rest</title>
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs>
         <linearGradient x1="50%" y1="50%" x2="50%" y2="0%" id="linearGradient-1">
-            <stop stop-color="rgb(49,55,59)" offset="0%"></stop>
+            <stop stop-color="rgb(37,41,44)" offset="0%"></stop>
             <stop stop-color="rgb(0,0,0)" stop-opacity="0.5" offset="100%"></stop>
         </linearGradient>
-        <path d="M51,101 C78.6142389,101 101,78.6142389 101,51 C101,23.3857611 78.6142389,1 51,1 C23.3857611,1 1,23.3857611 1,51 C1,78.6142389 23.3857611,101 51,101 Z M51,101" id="path-2"></path>
+        <path d="M61,106 C85.852815,106 106,85.852815 106,61 C106,36.147185 85.852815,16 61,16 C36.147185,16 16,36.147185 16,61 C16,85.852815 36.147185,106 61,106 Z M61,121 C27.8629134,121 1,94.1370866 1,61 C1,27.8629134 27.8629134,1 61,1 C94.1370866,1 121,27.8629134 121,61 C121,94.1370866 94.1370866,121 61,121 Z M72.020667,47.866611 C72.5906846,47.4418988 73.3484729,47.3820274 73.9739682,47.7088251 C74.602506,48.0362617 74.9981666,48.6973776 75,49.4182771 L75,72.5816226 C75,73.3019496 74.603731,73.963029 73.9751875,74.2898267 C73.7063342,74.4307738 73.4155337,74.5 73.1241236,74.5 C72.7357801,74.5 72.3474365,74.3758917 72.0212766,74.1332881 L64.3385355,68.4243067 L64.3385355,72.5816224 C64.3385355,73.3019495 63.9416569,73.9630288 63.3131133,74.2898265 C63.0448697,74.4307736 62.7534596,74.4999998 62.4620495,74.4999998 C62.0737059,74.4999998 61.6853623,74.3758915 61.3598121,74.1332879 L45.773639,62.5513035 C45.2865329,62.1895808 45,61.6126956 45,60.9983907 C45,60.3847096 45.2877523,59.8072007 45.773639,59.4467253 L61.3598121,47.8666109 C61.9298299,47.4418986 62.6870084,47.3820273 63.3125037,47.708825 C63.941657,48.0362464 64.3379259,48.6973257 64.3379259,49.4189 L64.3379259,53.5737213 Z M72.020667,47.866611" id="path-2"></path>
     </defs>
-    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
-        <use id="Oval 1" stroke="rgb(167,167,167)" stroke-width="1" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
-        <use id="Oval 1-1" stroke="none" fill="none" xlink:href="#path-2"></use>
-        <path d="M61.5241115,35.9209238 L52.5609136,42.4735319 L52.5609136,37.7031815 C52.5609136,36.8747073 52.0985998,36.1156903 51.3645877,35.739762 C50.6348431,35.3645498 49.7514682,35.433291 49.0864475,35.9209236 L30.9025788,49.2166106 C30.335711,49.6304897 30,50.2935554 30,50.9981523 C30,51.7034653 30.3342884,52.365815 30.9025788,52.7811262 L49.0864475,66.0789602 C49.466256,66.3575051 49.9193236,66.4999998 50.3723911,66.4999998 C50.7123695,66.4999998 51.052348,66.4205178 51.3652989,66.2586897 C52.0985997,65.8834775 52.5616248,65.1244605 52.5616248,64.2974183 L52.5616248,59.524204 L61.5248227,66.0789604 C61.9053425,66.3575053 62.3584101,66.5 62.8114776,66.5 C63.151456,66.5 63.4907232,66.420518 63.8043854,66.2586899 C64.5376862,65.8834777 65,65.1244607 65,64.2974185 L65,37.7024663 C64.9978611,36.8747668 64.536257,36.1157079 63.8029629,35.7397622 C63.0732183,35.36455 62.1891321,35.4332912 61.5241115,35.9209238 Z M61.5241115,35.9209238" id="Shape" fill="rgb(254,254,254)"></path>
+    <g id="Page 1" fill="rgb(215,215,215)" fill-rule="evenodd">
+        <path d="M61,121 C94.1370866,121 121,94.1370866 121,61 C121,27.8629134 94.1370866,1 61,1 C27.8629134,1 1,27.8629134 1,61 C1,94.1370866 27.8629134,121 61,121 Z M61,121" id="Oval 18" stroke="rgb(150,150,150)" stroke-width="1" fill-opacity="0.5027861" fill="rgb(254,255,254)"></path>
+        <use id="Oval 33" stroke="rgb(150,150,150)" stroke-width="1" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
+        <use id="Oval 33-1" stroke="none" fill="none" xlink:href="#path-2"></use>
     </g>
 </svg>
\ No newline at end of file
diff --git a/data/images/pause-pressed.svg b/data/images/pause-pressed.svg
index f2a70e199..fca4e8970 100644
--- a/data/images/pause-pressed.svg
+++ b/data/images/pause-pressed.svg
@@ -1,20 +1,27 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="102px" height="102px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<svg width="122px" height="122px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
     <title>pause-pressed</title>
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs>
         <linearGradient x1="50%" y1="50%" x2="50%" y2="0%" id="linearGradient-1">
-            <stop stop-color="rgb(49,55,59)" offset="0%"></stop>
+            <stop stop-color="rgb(37,41,44)" offset="0%"></stop>
             <stop stop-color="rgb(0,0,0)" stop-opacity="0.5" offset="100%"></stop>
         </linearGradient>
-        <path d="M51,101 C78.6142389,101 101,78.6142389 101,51 C101,23.3857611 78.6142389,1 51,1 C23.3857611,1 1,23.3857611 1,51 C1,78.6142389 23.3857611,101 51,101 Z M51,101" id="path-2"></path>
+        <path d="M61,121 C27.8629134,121 1,94.1370866 1,61 C1,27.8629134 27.8629134,1 61,1 C94.1370866,1 121,27.8629134 121,61 C121,94.1370866 94.1370866,121 61,121 Z M61,106 C85.852815,106 106,85.852815 106,61 C106,36.147185 85.852815,16 61,16 C36.147185,16 16,36.147185 16,61 C16,85.852815 36.147185,106 61,106 Z M61,106" id="path-2"></path>
+        <path d="M47.8163555,41.1253995 C46.9554464,41.1253995 46.2563556,41.8235813 46.2563556,42.6853995 L46.2563556,78.9744897 C46.2563556,79.8363079 46.9554465,80.5353988 47.8163555,80.5353988 L54.8781738,80.5353988 C55.7390829,80.5353988 56.4390829,79.8363079 56.4390829,78.9744897 L56.4390829,42.6853995 C56.4381769,41.8227539 55.7391025,41.1253995 54.8781738,41.1253995 L47.8163555,41.1253995 Z M47.8163555,41.1253995" id="path-3"></path>
+        <path d="M74.2227117,41.1253995 L67.1618025,41.1253995 C66.2999843,41.1253995 65.6008934,41.8235813 65.6008934,42.6853995 L65.6008934,78.9744897 C65.6008934,79.8363079 66.2999843,80.5353988 67.1618025,80.5353988 L74.2227117,80.5353988 C75.0845299,80.5353988 75.7836208,79.8363079 75.7836208,78.9744897 L75.7836208,42.6853995 C75.7836581,41.8227539 75.0845281,41.1253995 74.2227117,41.1253995 L74.2227117,41.1253995 L74.2227117,41.1253995" id="path-4"></path>
     </defs>
-    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
-        <use id="Oval 1" stroke="rgb(167,167,167)" stroke-width="1" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
-        <use id="Oval 1-1" stroke="none" fill="none" xlink:href="#path-2"></use>
-        <g id="Group" fill="rgb(0,0,0)">
-            <path d="M44.8781738,31.1253995 L37.8163555,31.1253995 C36.9554464,31.1253995 36.2563556,31.8235813 36.2563556,32.6853995 L36.2563556,68.9744897 C36.2563556,69.8363079 36.9554465,70.5353988 37.8163555,70.5353988 L44.8781738,70.5353988 C45.7390829,70.5353988 46.4390829,69.8363079 46.4390829,68.9744897 L46.4390829,32.6853995 C46.4381769,31.8227539 45.7391025,31.1253995 44.8781738,31.1253995 L44.8781738,31.1253995 L44.8781738,31.1253995" id="Shape" fill="rgb(213,213,213)"></path>
-            <path d="M64.2227117,31.1253995 L57.1618025,31.1253995 C56.2999843,31.1253995 55.6008934,31.8235813 55.6008934,32.6853995 L55.6008934,68.9744897 C55.6008934,69.8363079 56.2999843,70.5353988 57.1618025,70.5353988 L64.2227117,70.5353988 C65.0845299,70.5353988 65.7836208,69.8363079 65.7836208,68.9744897 L65.7836208,32.6853995 C65.7836581,31.8227539 65.0845281,31.1253995 64.2227117,31.1253995 L64.2227117,31.1253995 L64.2227117,31.1253995" id="Shape" fill="rgb(213,213,213)"></path>
+    <g id="Page 1" fill="rgb(215,215,215)" fill-rule="evenodd">
+        <path d="M61,121 C94.1370866,121 121,94.1370866 121,61 C121,27.8629134 94.1370866,1 61,1 C27.8629134,1 1,27.8629134 1,61 C1,94.1370866 27.8629134,121 61,121 Z M61,121" id="Oval 18" stroke="rgb(150,150,150)" stroke-width="1" fill-opacity="0.00241268382" fill="rgb(254,255,254)"></path>
+        <g id="Group">
+            <use id="Oval 33" stroke="rgb(150,150,150)" stroke-width="1" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
+            <use id="Oval 33-1" stroke="none" fill="none" xlink:href="#path-2"></use>
+            <g stroke="rgb(150,150,150)" stroke-width="1" fill="url(#linearGradient-1)">
+                <use id="Shape" xlink:href="#path-3"></use>
+                <use id="Shape-1" stroke="none" fill="none" xlink:href="#path-3"></use>
+                <use id="Shape" xlink:href="#path-4"></use>
+                <use id="Shape-1" stroke="none" fill="none" xlink:href="#path-4"></use>
+            </g>
         </g>
     </g>
 </svg>
\ No newline at end of file
diff --git a/data/images/pause-rest.svg b/data/images/pause-rest.svg
index a8a4a7d36..e57457bd2 100644
--- a/data/images/pause-rest.svg
+++ b/data/images/pause-rest.svg
@@ -1,20 +1,27 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="102px" height="102px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<svg width="122px" height="122px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
     <title>pause-rest</title>
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs>
         <linearGradient x1="50%" y1="50%" x2="50%" y2="0%" id="linearGradient-1">
-            <stop stop-color="rgb(49,55,59)" offset="0%"></stop>
+            <stop stop-color="rgb(37,41,44)" offset="0%"></stop>
             <stop stop-color="rgb(0,0,0)" stop-opacity="0.5" offset="100%"></stop>
         </linearGradient>
-        <path d="M51,101 C78.6142389,101 101,78.6142389 101,51 C101,23.3857611 78.6142389,1 51,1 C23.3857611,1 1,23.3857611 1,51 C1,78.6142389 23.3857611,101 51,101 Z M51,101" id="path-2"></path>
+        <path d="M61,121 C27.8629134,121 1,94.1370866 1,61 C1,27.8629134 27.8629134,1 61,1 C94.1370866,1 121,27.8629134 121,61 C121,94.1370866 94.1370866,121 61,121 Z M61,106 C85.852815,106 106,85.852815 106,61 C106,36.147185 85.852815,16 61,16 C36.147185,16 16,36.147185 16,61 C16,85.852815 36.147185,106 61,106 Z M61,106" id="path-2"></path>
+        <path d="M47.8163555,41.1253995 C46.9554464,41.1253995 46.2563556,41.8235813 46.2563556,42.6853995 L46.2563556,78.9744897 C46.2563556,79.8363079 46.9554465,80.5353988 47.8163555,80.5353988 L54.8781738,80.5353988 C55.7390829,80.5353988 56.4390829,79.8363079 56.4390829,78.9744897 L56.4390829,42.6853995 C56.4381769,41.8227539 55.7391025,41.1253995 54.8781738,41.1253995 L47.8163555,41.1253995 Z M47.8163555,41.1253995" id="path-3"></path>
+        <path d="M74.2227117,41.1253995 L67.1618025,41.1253995 C66.2999843,41.1253995 65.6008934,41.8235813 65.6008934,42.6853995 L65.6008934,78.9744897 C65.6008934,79.8363079 66.2999843,80.5353988 67.1618025,80.5353988 L74.2227117,80.5353988 C75.0845299,80.5353988 75.7836208,79.8363079 75.7836208,78.9744897 L75.7836208,42.6853995 C75.7836581,41.8227539 75.0845281,41.1253995 74.2227117,41.1253995 L74.2227117,41.1253995 L74.2227117,41.1253995" id="path-4"></path>
     </defs>
-    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
-        <use id="Oval 1" stroke="rgb(167,167,167)" stroke-width="1" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
-        <use id="Oval 1-1" stroke="none" fill="none" xlink:href="#path-2"></use>
-        <g id="Group" fill="rgb(0,0,0)">
-            <path d="M44.8781738,31.1253995 L37.8163555,31.1253995 C36.9554464,31.1253995 36.2563556,31.8235813 36.2563556,32.6853995 L36.2563556,68.9744897 C36.2563556,69.8363079 36.9554465,70.5353988 37.8163555,70.5353988 L44.8781738,70.5353988 C45.7390829,70.5353988 46.4390829,69.8363079 46.4390829,68.9744897 L46.4390829,32.6853995 C46.4381769,31.8227539 45.7391025,31.1253995 44.8781738,31.1253995 L44.8781738,31.1253995 L44.8781738,31.1253995" id="Shape" fill="rgb(254,254,254)"></path>
-            <path d="M64.2227117,31.1253995 L57.1618025,31.1253995 C56.2999843,31.1253995 55.6008934,31.8235813 55.6008934,32.6853995 L55.6008934,68.9744897 C55.6008934,69.8363079 56.2999843,70.5353988 57.1618025,70.5353988 L64.2227117,70.5353988 C65.0845299,70.5353988 65.7836208,69.8363079 65.7836208,68.9744897 L65.7836208,32.6853995 C65.7836581,31.8227539 65.0845281,31.1253995 64.2227117,31.1253995 L64.2227117,31.1253995 L64.2227117,31.1253995" id="Shape" fill="rgb(254,254,254)"></path>
+    <g id="Page 1" fill="rgb(215,215,215)" fill-rule="evenodd">
+        <path d="M61,121 C94.1370866,121 121,94.1370866 121,61 C121,27.8629134 94.1370866,1 61,1 C27.8629134,1 1,27.8629134 1,61 C1,94.1370866 27.8629134,121 61,121 Z M61,121" id="Oval 18" stroke="rgb(150,150,150)" stroke-width="1" fill-opacity="0.5027861" fill="rgb(254,255,254)"></path>
+        <g id="Group">
+            <use id="Oval 33" stroke="rgb(150,150,150)" stroke-width="1" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
+            <use id="Oval 33-1" stroke="none" fill="none" xlink:href="#path-2"></use>
+            <g stroke="rgb(150,150,150)" stroke-width="1" fill="url(#linearGradient-1)">
+                <use id="Shape" xlink:href="#path-3"></use>
+                <use id="Shape-1" stroke="none" fill="none" xlink:href="#path-3"></use>
+                <use id="Shape" xlink:href="#path-4"></use>
+                <use id="Shape-1" stroke="none" fill="none" xlink:href="#path-4"></use>
+            </g>
         </g>
     </g>
 </svg>
\ No newline at end of file
diff --git a/data/images/play-pressed.svg b/data/images/play-pressed.svg
index 4a09da9fd..b4d719910 100644
--- a/data/images/play-pressed.svg
+++ b/data/images/play-pressed.svg
@@ -1,17 +1,17 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="102px" height="102px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<svg width="122px" height="122px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
     <title>play-pressed</title>
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs>
         <linearGradient x1="50%" y1="50%" x2="50%" y2="0%" id="linearGradient-1">
-            <stop stop-color="rgb(49,55,59)" offset="0%"></stop>
+            <stop stop-color="rgb(37,41,44)" offset="0%"></stop>
             <stop stop-color="rgb(0,0,0)" stop-opacity="0.5" offset="100%"></stop>
         </linearGradient>
-        <path d="M51,101 C78.6142389,101 101,78.6142389 101,51 C101,23.3857611 78.6142389,1 51,1 C23.3857611,1 1,23.3857611 1,51 C1,78.6142389 23.3857611,101 51,101 Z M51,101" id="path-2"></path>
+        <path d="M61,106 C85.852815,106 106,85.852815 106,61 C106,36.147185 85.852815,16 61,16 C36.147185,16 16,36.147185 16,61 C16,85.852815 36.147185,106 61,106 Z M61,121 C27.8629134,121 1,94.1370866 1,61 C1,27.8629134 27.8629134,1 61,1 C94.1370866,1 121,27.8629134 121,61 C121,94.1370866 94.1370866,121 61,121 Z M52.2667596,83.9999894 C51.3047827,84.0027739 50.6146688,83.4551662 50.2900698,82.9381874 C50.1100401,82.6504614 50.0109329,82.3163279 50.0109329,81.9756974 L50.0000207,41.1677891 C50.0000207,41.1677891 49.9963838,40.298114 50.0854894,39.7792788 C50.2909778,38.5801108 51.4211642,38.0037306 52.2803969,38.000018 C52.8750404,37.9972335 53.4078556,38.3183729 53.948854,38.731399 L78.8129561,58.5390173 C78.8675105,58.5844966 78.9193373,58.630904 78.9693455,58.6810241 C79.8422168,59.5618371 80.0104263,60.4760634 79.9995155,61.0849288 C79.9731475,62.3416419 79.1793802,63.1407778 79.020263,63.2864972 C69.7223658,70.6346492 54.7126176,82.7571985 54.7126176,82.7571985 C53.8161061,83.422681 53.095078,83.9953487 52.2667596,83.9999894 Z M52.2667596,83.9999894" id="path-2"></path>
     </defs>
-    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
-        <use id="Oval 1" stroke="rgb(167,167,167)" stroke-width="1" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
-        <use id="Oval 1-1" stroke="none" fill="none" xlink:href="#path-2"></use>
-        <path d="M41.0000207,31.1677891 C41.0000207,31.1677891 40.9963838,30.298114 41.0854894,29.7792788 C41.2909778,28.5801108 42.4211642,28.0037306 43.2803969,28.000018 C43.8750404,27.9972335 44.4078556,28.3183729 44.948854,28.731399 L69.8129561,48.5390173 C69.8675105,48.5844966 69.9193373,48.630904 69.9693455,48.6810241 C70.8422168,49.5618371 71.0104263,50.4760634 70.9995155,51.0849288 C70.9731475,52.3416419 70.1793802,53.1407778 70.020263,53.2864972 C60.7223658,60.6346492 45.7126176,72.7571985 45.7126176,72.7571985 C44.8161061,73.422681 44.095078,73.9953487 43.2667596,73.9999894 L43.2667596,73.9999894 C42.3047827,74.0027739 41.6146688,73.4551662 41.2900698,72.9381874 C41.1100401,72.6504614 41.0109329,72.3163279 41.0109329,71.9756974 L41.0000207,31.1677891 L41.0000207,31.1677891 L41.0000207,31.1677891" id="Shape" fill="rgb(212,212,212)"></path>
+    <g id="Page 1" fill="rgb(215,215,215)" fill-rule="evenodd">
+        <path d="M61,121 C94.1370866,121 121,94.1370866 121,61 C121,27.8629134 94.1370866,1 61,1 C27.8629134,1 1,27.8629134 1,61 C1,94.1370866 27.8629134,121 61,121 Z M61,121" id="Oval 18" stroke="rgb(150,150,150)" stroke-width="1" fill-opacity="0.00241268382" fill="rgb(254,255,254)"></path>
+        <use id="Oval 33" stroke="rgb(150,150,150)" stroke-width="1" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
+        <use id="Oval 33-1" stroke="none" fill="none" xlink:href="#path-2"></use>
     </g>
 </svg>
\ No newline at end of file
diff --git a/data/images/play-rest.svg b/data/images/play-rest.svg
index 23adadbd7..9502d3172 100644
--- a/data/images/play-rest.svg
+++ b/data/images/play-rest.svg
@@ -1,17 +1,17 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="102px" height="102px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<svg width="122px" height="122px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
     <title>play-rest</title>
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs>
         <linearGradient x1="50%" y1="50%" x2="50%" y2="0%" id="linearGradient-1">
-            <stop stop-color="rgb(49,55,59)" offset="0%"></stop>
+            <stop stop-color="rgb(37,41,44)" offset="0%"></stop>
             <stop stop-color="rgb(0,0,0)" stop-opacity="0.5" offset="100%"></stop>
         </linearGradient>
-        <path d="M51,101 C78.6142389,101 101,78.6142389 101,51 C101,23.3857611 78.6142389,1 51,1 C23.3857611,1 1,23.3857611 1,51 C1,78.6142389 23.3857611,101 51,101 Z M51,101" id="path-2"></path>
+        <path d="M61,106 C85.852815,106 106,85.852815 106,61 C106,36.147185 85.852815,16 61,16 C36.147185,16 16,36.147185 16,61 C16,85.852815 36.147185,106 61,106 Z M61,121 C27.8629134,121 1,94.1370866 1,61 C1,27.8629134 27.8629134,1 61,1 C94.1370866,1 121,27.8629134 121,61 C121,94.1370866 94.1370866,121 61,121 Z M52.2667596,83.9999894 C51.3047827,84.0027739 50.6146688,83.4551662 50.2900698,82.9381874 C50.1100401,82.6504614 50.0109329,82.3163279 50.0109329,81.9756974 L50.0000207,41.1677891 C50.0000207,41.1677891 49.9963838,40.298114 50.0854894,39.7792788 C50.2909778,38.5801108 51.4211642,38.0037306 52.2803969,38.000018 C52.8750404,37.9972335 53.4078556,38.3183729 53.948854,38.731399 L78.8129561,58.5390173 C78.8675105,58.5844966 78.9193373,58.630904 78.9693455,58.6810241 C79.8422168,59.5618371 80.0104263,60.4760634 79.9995155,61.0849288 C79.9731475,62.3416419 79.1793802,63.1407778 79.020263,63.2864972 C69.7223658,70.6346492 54.7126176,82.7571985 54.7126176,82.7571985 C53.8161061,83.422681 53.095078,83.9953487 52.2667596,83.9999894 Z M52.2667596,83.9999894" id="path-2"></path>
     </defs>
-    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
-        <use id="Oval 1" stroke="rgb(167,167,167)" stroke-width="1" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
-        <use id="Oval 1-1" stroke="none" fill="none" xlink:href="#path-2"></use>
-        <path d="M41.0000207,31.1677891 C41.0000207,31.1677891 40.9963838,30.298114 41.0854894,29.7792788 C41.2909778,28.5801108 42.4211642,28.0037306 43.2803969,28.000018 C43.8750404,27.9972335 44.4078556,28.3183729 44.948854,28.731399 L69.8129561,48.5390173 C69.8675105,48.5844966 69.9193373,48.630904 69.9693455,48.6810241 C70.8422168,49.5618371 71.0104263,50.4760634 70.9995155,51.0849288 C70.9731475,52.3416419 70.1793802,53.1407778 70.020263,53.2864972 C60.7223658,60.6346492 45.7126176,72.7571985 45.7126176,72.7571985 C44.8161061,73.422681 44.095078,73.9953487 43.2667596,73.9999894 L43.2667596,73.9999894 C42.3047827,74.0027739 41.6146688,73.4551662 41.2900698,72.9381874 C41.1100401,72.6504614 41.0109329,72.3163279 41.0109329,71.9756974 L41.0000207,31.1677891 L41.0000207,31.1677891 L41.0000207,31.1677891" id="Shape" fill="rgb(254,254,254)"></path>
+    <g id="Page 1" fill="rgb(215,215,215)" fill-rule="evenodd">
+        <path d="M61,121 C94.1370866,121 121,94.1370866 121,61 C121,27.8629134 94.1370866,1 61,1 C27.8629134,1 1,27.8629134 1,61 C1,94.1370866 27.8629134,121 61,121 Z M61,121" id="Oval 18" stroke="rgb(150,150,150)" stroke-width="1" fill-opacity="0.5027861" fill="rgb(254,255,254)"></path>
+        <use id="Oval 33" stroke="rgb(150,150,150)" stroke-width="1" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
+        <use id="Oval 33-1" stroke="none" fill="none" xlink:href="#path-2"></use>
     </g>
 </svg>
\ No newline at end of file
diff --git a/data/images/skip-pressed.svg b/data/images/skip-pressed.svg
index 654055dd7..5f99aa83b 100644
--- a/data/images/skip-pressed.svg
+++ b/data/images/skip-pressed.svg
@@ -1,17 +1,17 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="102px" height="102px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<svg width="122px" height="122px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
     <title>skip-pressed</title>
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs>
         <linearGradient x1="50%" y1="50%" x2="50%" y2="0%" id="linearGradient-1">
-            <stop stop-color="rgb(49,55,59)" offset="0%"></stop>
+            <stop stop-color="rgb(37,41,44)" offset="0%"></stop>
             <stop stop-color="rgb(0,0,0)" stop-opacity="0.5" offset="100%"></stop>
         </linearGradient>
-        <path d="M51,101 C78.6142389,101 101,78.6142389 101,51 C101,23.3857611 78.6142389,1 51,1 C23.3857611,1 1,23.3857611 1,51 C1,78.6142389 23.3857611,101 51,101 Z M51,101" id="path-2"></path>
+        <path d="M61,106 C85.852815,106 106,85.852815 106,61 C106,36.147185 85.852815,16 61,16 C36.147185,16 16,36.147185 16,61 C16,85.852815 36.147185,106 61,106 Z M61,121 C27.8629134,121 1,94.1370866 1,61 C1,27.8629134 27.8629134,1 61,1 C94.1370866,1 121,27.8629134 121,61 C121,94.1370866 94.1370866,121 61,121 Z M51.9776252,74.6203902 C51.4088036,75.0602053 50.6509846,75.1222969 50.0248542,74.7833805 C49.3962815,74.44317 49.0000001,73.7582485 49,73.0105371 L49,48.98887 C49,48.2411842 49.3962851,47.5562368 50.0248542,47.2166737 C50.2931087,47.0704998 50.583921,47.0000001 50.8759526,47.0000001 C51.2643121,47.0000001 51.6526714,47.1280639 51.9776252,47.379664 L59.6618979,53.2997049 L59.6618979,48.9888699 C59.6618979,48.2411842 60.058183,47.5562368 60.6861424,47.2166736 C60.9543969,47.0704998 61.2458189,47 61.5372408,47 C61.9256002,47 62.3139596,47.1280638 62.639523,47.379664 L78.2269392,59.3904975 C78.7140651,59.765634 79,60.3639119 79,61.0009971 C79,61.6374354 78.7128457,62.2370069 78.2269392,62.610203 L62.639523,74.6203901 C62.0700918,75.0602052 61.3122728,75.1222968 60.6861424,74.7833804 C60.0575733,74.4438172 59.6618979,73.758223 59.6618979,73.0098905 L59.6618979,68.7009957 Z M51.9776252,74.6203902" id="path-2"></path>
     </defs>
-    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
-        <use id="Oval 1" stroke="rgb(167,167,167)" stroke-width="1" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
-        <use id="Oval 1-1" stroke="none" fill="none" xlink:href="#path-2"></use>
-        <path d="M41.4738961,66.0797177 L50.4388809,59.5261024 L50.4388809,64.2966645 C50.4388809,65.1251755 50.9005022,65.8842262 51.6338328,66.2601712 C52.3643183,66.6354 53.2484405,66.5666558 53.9127769,66.0797176 L72.0980958,52.7827247 C72.6649867,52.3695433 73,51.7057321 73,51.0011039 C73,50.2957596 72.6664092,49.6333805 72.0980958,49.2180508 L53.9127769,35.9203422 C53.5329529,35.641785 53.0798669,35.5 52.626781,35.5 C52.2867887,35.5 51.9467964,35.5780533 51.6338328,35.7398887 C50.9012135,36.1158336 50.4388809,36.8741682 50.4388809,37.7019631 L50.4388809,42.4746733 L41.4738961,35.9203423 C41.0947833,35.641785 40.6416974,35.5000001 40.1886114,35.5000001 C39.8479078,35.5000001 39.5086269,35.5780534 39.1956632,35.7398887 C38.4623326,36.1158336 38,36.8741683 38,37.7019632 L38,64.2973804 C38.0000002,65.1252037 38.4623284,65.8835096 39.1956632,66.2601713 C39.9261487,66.6354001 40.8102709,66.5666559 41.4738961,66.0797177 Z M41.4738961,66.0797177" id="Shape" fill="rgb(213,213,213)"></path>
+    <g id="Page 1" fill="rgb(215,215,215)" fill-rule="evenodd">
+        <path d="M61,121 C94.1370866,121 121,94.1370866 121,61 C121,27.8629134 94.1370866,1 61,1 C27.8629134,1 1,27.8629134 1,61 C1,94.1370866 27.8629134,121 61,121 Z M61,121" id="Oval 18" stroke="rgb(150,150,150)" stroke-width="1" fill-opacity="0.00241268382" fill="rgb(254,255,254)"></path>
+        <use id="Oval 33" stroke="rgb(150,150,150)" stroke-width="1" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
+        <use id="Oval 33-1" stroke="none" fill="none" xlink:href="#path-2"></use>
     </g>
 </svg>
\ No newline at end of file
diff --git a/data/images/skip-rest.svg b/data/images/skip-rest.svg
index 28499ab41..063aac30e 100644
--- a/data/images/skip-rest.svg
+++ b/data/images/skip-rest.svg
@@ -1,17 +1,17 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="102px" height="102px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<svg width="122px" height="122px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
     <title>skip-rest</title>
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs>
         <linearGradient x1="50%" y1="50%" x2="50%" y2="0%" id="linearGradient-1">
-            <stop stop-color="rgb(49,55,59)" offset="0%"></stop>
+            <stop stop-color="rgb(37,41,44)" offset="0%"></stop>
             <stop stop-color="rgb(0,0,0)" stop-opacity="0.5" offset="100%"></stop>
         </linearGradient>
-        <path d="M51,101 C78.6142389,101 101,78.6142389 101,51 C101,23.3857611 78.6142389,1 51,1 C23.3857611,1 1,23.3857611 1,51 C1,78.6142389 23.3857611,101 51,101 Z M51,101" id="path-2"></path>
+        <path d="M61,106 C85.852815,106 106,85.852815 106,61 C106,36.147185 85.852815,16 61,16 C36.147185,16 16,36.147185 16,61 C16,85.852815 36.147185,106 61,106 Z M61,121 C27.8629134,121 1,94.1370866 1,61 C1,27.8629134 27.8629134,1 61,1 C94.1370866,1 121,27.8629134 121,61 C121,94.1370866 94.1370866,121 61,121 Z M51.9776252,74.6203902 C51.4088036,75.0602053 50.6509846,75.1222969 50.0248542,74.7833805 C49.3962815,74.44317 49.0000001,73.7582485 49,73.0105371 L49,48.98887 C49,48.2411842 49.3962851,47.5562368 50.0248542,47.2166737 C50.2931087,47.0704998 50.583921,47.0000001 50.8759526,47.0000001 C51.2643121,47.0000001 51.6526714,47.1280639 51.9776252,47.379664 L59.6618979,53.2997049 L59.6618979,48.9888699 C59.6618979,48.2411842 60.058183,47.5562368 60.6861424,47.2166736 C60.9543969,47.0704998 61.2458189,47 61.5372408,47 C61.9256002,47 62.3139596,47.1280638 62.639523,47.379664 L78.2269392,59.3904975 C78.7140651,59.765634 79,60.3639119 79,61.0009971 C79,61.6374354 78.7128457,62.2370069 78.2269392,62.610203 L62.639523,74.6203901 C62.0700918,75.0602052 61.3122728,75.1222968 60.6861424,74.7833804 C60.0575733,74.4438172 59.6618979,73.758223 59.6618979,73.0098905 L59.6618979,68.7009957 Z M51.9776252,74.6203902" id="path-2"></path>
     </defs>
-    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
-        <use id="Oval 1" stroke="rgb(167,167,167)" stroke-width="1" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
-        <use id="Oval 1-1" stroke="none" fill="none" xlink:href="#path-2"></use>
-        <path d="M41.4738961,66.0797177 L50.4388809,59.5261024 L50.4388809,64.2966645 C50.4388809,65.1251755 50.9005022,65.8842262 51.6338328,66.2601712 C52.3643183,66.6354 53.2484405,66.5666558 53.9127769,66.0797176 L72.0980958,52.7827247 C72.6649867,52.3695433 73,51.7057321 73,51.0011039 C73,50.2957596 72.6664092,49.6333805 72.0980958,49.2180508 L53.9127769,35.9203422 C53.5329529,35.641785 53.0798669,35.5 52.626781,35.5 C52.2867887,35.5 51.9467964,35.5780533 51.6338328,35.7398887 C50.9012135,36.1158336 50.4388809,36.8741682 50.4388809,37.7019631 L50.4388809,42.4746733 L41.4738961,35.9203423 C41.0947833,35.641785 40.6416974,35.5000001 40.1886114,35.5000001 C39.8479078,35.5000001 39.5086269,35.5780534 39.1956632,35.7398887 C38.4623326,36.1158336 38,36.8741683 38,37.7019632 L38,64.2973804 C38.0000002,65.1252037 38.4623284,65.8835096 39.1956632,66.2601713 C39.9261487,66.6354001 40.8102709,66.5666559 41.4738961,66.0797177 Z M41.4738961,66.0797177" id="Shape" fill="rgb(254,254,254)"></path>
+    <g id="Page 1" fill="rgb(215,215,215)" fill-rule="evenodd">
+        <path d="M61,121 C94.1370866,121 121,94.1370866 121,61 C121,27.8629134 94.1370866,1 61,1 C27.8629134,1 1,27.8629134 1,61 C1,94.1370866 27.8629134,121 61,121 Z M61,121" id="Oval 18" stroke="rgb(150,150,150)" stroke-width="1" fill-opacity="0.5027861" fill="rgb(254,255,254)"></path>
+        <use id="Oval 33" stroke="rgb(150,150,150)" stroke-width="1" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
+        <use id="Oval 33-1" stroke="none" fill="none" xlink:href="#path-2"></use>
     </g>
 </svg>
\ No newline at end of file
diff --git a/data/images/view-toggle-icon-artist-active.svg b/data/images/view-toggle-icon-artist-active.svg
index 2901f1675..202397535 100644
--- a/data/images/view-toggle-icon-artist-active.svg
+++ b/data/images/view-toggle-icon-artist-active.svg
@@ -1,23 +1,23 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="94px" height="93px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<svg width="160px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
     <title>view-toggle-icon-artist-active</title>
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs>
-        <path d="M53,12 L87,12" id="path-1"></path>
-        <path d="M53,32 L87,32" id="path-2"></path>
-        <path d="M53,54 L87,54" id="path-3"></path>
-        <path d="M53,76 L87,76" id="path-4"></path>
+        <path d="M83,43 L117,43" id="path-1"></path>
+        <path d="M83,63 L117,63" id="path-2"></path>
+        <path d="M83,85 L117,85" id="path-3"></path>
+        <path d="M83,107 L117,107" id="path-4"></path>
     </defs>
-    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
-        <path d="M4,2 L4,42 L44,42 L44,2 L4,2 Z M4,2" id="Rectangle 2" stroke="rgb(167,167,167)" stroke-width="1" fill="rgb(255,255,255)"></path>
-        <path d="M4,47 L4,87 L44,87 L44,47 L4,47 Z M4,47" id="Rectangle 2" stroke="rgb(167,167,167)" stroke-width="1" fill="rgb(255,255,255)"></path>
+    <g id="Page 1" fill="rgb(215,215,215)" fill-rule="evenodd">
+        <path d="M34,33 L34,73 L74,73 L74,33 L34,33 Z M34,33" id="Rectangle 2" stroke="rgb(150,150,150)" stroke-width="1" fill="rgb(254,255,254)"></path>
+        <path d="M34,78 L34,118 L74,118 L74,78 L34,78 Z M34,78" id="Rectangle 2" stroke="rgb(150,150,150)" stroke-width="1" fill="rgb(254,255,254)"></path>
         <use id="Line" xlink:href="#path-1"></use>
-        <use id="Line-1" stroke="rgb(255,255,255)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-1"></use>
+        <use id="Line-1" stroke="rgb(254,255,254)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-1"></use>
         <use id="Line" xlink:href="#path-2"></use>
-        <use id="Line-1" stroke="rgb(255,255,255)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-2"></use>
+        <use id="Line-1" stroke="rgb(254,255,254)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-2"></use>
         <use id="Line" xlink:href="#path-3"></use>
-        <use id="Line-1" stroke="rgb(255,255,255)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-3"></use>
+        <use id="Line-1" stroke="rgb(254,255,254)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-3"></use>
         <use id="Line" xlink:href="#path-4"></use>
-        <use id="Line-1" stroke="rgb(255,255,255)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-4"></use>
+        <use id="Line-1" stroke="rgb(254,255,254)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-4"></use>
     </g>
 </svg>
\ No newline at end of file
diff --git a/data/images/view-toggle-icon-artist-inactive.svg b/data/images/view-toggle-icon-artist-inactive.svg
index 0dd34ffee..0012fd4d8 100644
--- a/data/images/view-toggle-icon-artist-inactive.svg
+++ b/data/images/view-toggle-icon-artist-inactive.svg
@@ -1,23 +1,23 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="94px" height="93px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<svg width="160px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
     <title>view-toggle-icon-artist-inactive</title>
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs>
-        <path d="M53,12 L87,12" id="path-1"></path>
-        <path d="M53,32 L87,32" id="path-2"></path>
-        <path d="M53,54 L87,54" id="path-3"></path>
-        <path d="M53,76 L87,76" id="path-4"></path>
+        <path d="M83,43 L117,43" id="path-1"></path>
+        <path d="M83,63 L117,63" id="path-2"></path>
+        <path d="M83,85 L117,85" id="path-3"></path>
+        <path d="M83,107 L117,107" id="path-4"></path>
     </defs>
-    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
-        <path d="M4,2 L4,42 L44,42 L44,2 L4,2 Z M4,2" id="Rectangle 2" stroke="rgb(167,167,167)" stroke-width="1" fill="rgb(0,0,0)"></path>
-        <path d="M4,47 L4,87 L44,87 L44,47 L4,47 Z M4,47" id="Rectangle 2" stroke="rgb(167,167,167)" stroke-width="1" fill="rgb(0,0,0)"></path>
+    <g id="Page 1" fill="rgb(215,215,215)" fill-rule="evenodd">
+        <path d="M34,33 L34,73 L74,73 L74,33 L34,33 Z M34,33" id="Rectangle 2" stroke="rgb(150,150,150)" stroke-width="1" fill="rgb(0,0,0)"></path>
+        <path d="M34,78 L34,118 L74,118 L74,78 L34,78 Z M34,78" id="Rectangle 2" stroke="rgb(150,150,150)" stroke-width="1" fill="rgb(0,0,0)"></path>
         <use id="Line" xlink:href="#path-1"></use>
-        <use id="Line-1" stroke="rgb(74,74,74)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-1"></use>
+        <use id="Line-1" stroke="rgb(57,57,57)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-1"></use>
         <use id="Line" xlink:href="#path-2"></use>
-        <use id="Line-1" stroke="rgb(74,74,74)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-2"></use>
+        <use id="Line-1" stroke="rgb(57,57,57)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-2"></use>
         <use id="Line" xlink:href="#path-3"></use>
-        <use id="Line-1" stroke="rgb(74,74,74)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-3"></use>
+        <use id="Line-1" stroke="rgb(57,57,57)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-3"></use>
         <use id="Line" xlink:href="#path-4"></use>
-        <use id="Line-1" stroke="rgb(74,74,74)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-4"></use>
+        <use id="Line-1" stroke="rgb(57,57,57)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-4"></use>
     </g>
 </svg>
\ No newline at end of file
diff --git a/data/images/view-toggle-icon-grid-active.svg b/data/images/view-toggle-icon-grid-active.svg
index 5398d0d0a..a3fd0bea3 100644
--- a/data/images/view-toggle-icon-grid-active.svg
+++ b/data/images/view-toggle-icon-grid-active.svg
@@ -1,12 +1,12 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="93px" height="93px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<svg width="170px" height="170px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
     <title>view-toggle-icon-grid-active</title>
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs></defs>
-    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
-        <path d="M4,2 L4,42 L44,42 L44,2 L4,2 Z M4,2" id="Rectangle 2" stroke="rgb(167,167,167)" stroke-width="1" fill="rgb(255,255,255)"></path>
-        <path d="M49,2 L49,42 L89,42 L89,2 L49,2 Z M49,2" id="Rectangle 2" stroke="rgb(167,167,167)" stroke-width="1" fill="rgb(255,255,255)"></path>
-        <path d="M4,47 L4,87 L44,87 L44,47 L4,47 Z M4,47" id="Rectangle 2" stroke="rgb(167,167,167)" stroke-width="1" fill="rgb(255,255,255)"></path>
-        <path d="M49,47 L49,87 L89,87 L89,47 L49,47 Z M49,47" id="Rectangle 2" stroke="rgb(167,167,167)" stroke-width="1" fill="rgb(255,255,255)"></path>
+    <g id="Page 1" fill="rgb(215,215,215)" fill-rule="evenodd">
+        <path d="M37,36 L37,76 L77,76 L77,36 L37,36 Z M37,36" id="Rectangle 2" stroke="rgb(150,150,150)" stroke-width="1" fill="rgb(254,255,254)"></path>
+        <path d="M82,36 L82,76 L122,76 L122,36 L82,36 Z M82,36" id="Rectangle 2" stroke="rgb(150,150,150)" stroke-width="1" fill="rgb(254,255,254)"></path>
+        <path d="M37,81 L37,121 L77,121 L77,81 L37,81 Z M37,81" id="Rectangle 2" stroke="rgb(150,150,150)" stroke-width="1" fill="rgb(254,255,254)"></path>
+        <path d="M82,81 L82,121 L122,121 L122,81 L82,81 Z M82,81" id="Rectangle 2" stroke="rgb(150,150,150)" stroke-width="1" fill="rgb(254,255,254)"></path>
     </g>
 </svg>
\ No newline at end of file
diff --git a/data/images/view-toggle-icon-grid-inactive.svg b/data/images/view-toggle-icon-grid-inactive.svg
index 5dd3dfff5..ab7392624 100644
--- a/data/images/view-toggle-icon-grid-inactive.svg
+++ b/data/images/view-toggle-icon-grid-inactive.svg
@@ -1,12 +1,12 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="93px" height="93px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <title>Slice 1</title>
+<svg width="170px" height="170px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>view-toggle-icon-grid-inactive</title>
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs></defs>
-    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
-        <path d="M4,2 L4,42 L44,42 L44,2 L4,2 Z M4,2" id="Rectangle 2" stroke="rgb(167,167,167)" stroke-width="1" fill="rgb(0,0,0)"></path>
-        <path d="M49,2 L49,42 L89,42 L89,2 L49,2 Z M49,2" id="Rectangle 2" stroke="rgb(167,167,167)" stroke-width="1" fill="rgb(0,0,0)"></path>
-        <path d="M4,47 L4,87 L44,87 L44,47 L4,47 Z M4,47" id="Rectangle 2" stroke="rgb(167,167,167)" stroke-width="1" fill="rgb(0,0,0)"></path>
-        <path d="M49,47 L49,87 L89,87 L89,47 L49,47 Z M49,47" id="Rectangle 2" stroke="rgb(167,167,167)" stroke-width="1" fill="rgb(0,0,0)"></path>
+    <g id="Page 1" fill="rgb(215,215,215)" fill-rule="evenodd">
+        <path d="M37,36 L37,76 L77,76 L77,36 L37,36 Z M37,36" id="Rectangle 2" stroke="rgb(150,150,150)" stroke-width="1" fill="rgb(0,0,0)"></path>
+        <path d="M82,36 L82,76 L122,76 L122,36 L82,36 Z M82,36" id="Rectangle 2" stroke="rgb(150,150,150)" stroke-width="1" fill="rgb(0,0,0)"></path>
+        <path d="M37,81 L37,121 L77,121 L77,81 L37,81 Z M37,81" id="Rectangle 2" stroke="rgb(150,150,150)" stroke-width="1" fill="rgb(0,0,0)"></path>
+        <path d="M82,81 L82,121 L122,121 L122,81 L82,81 Z M82,81" id="Rectangle 2" stroke="rgb(150,150,150)" stroke-width="1" fill="rgb(0,0,0)"></path>
     </g>
 </svg>
\ No newline at end of file
diff --git a/data/images/view-toggle-icon-list-active.svg b/data/images/view-toggle-icon-list-active.svg
index eeb7b1be8..c7f1483d3 100644
--- a/data/images/view-toggle-icon-list-active.svg
+++ b/data/images/view-toggle-icon-list-active.svg
@@ -1,21 +1,21 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="71px" height="71px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<svg width="130px" height="130px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
     <title>view-toggle-icon-list-active</title>
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs>
-        <path d="M7,5 L64,5" id="path-1"></path>
-        <path d="M7,25 L64,25" id="path-2"></path>
-        <path d="M7,43 L64,43" id="path-3"></path>
-        <path d="M7,62 L64,62" id="path-4"></path>
+        <path d="M33,32 L90,32" id="path-1"></path>
+        <path d="M33,52 L90,52" id="path-2"></path>
+        <path d="M33,70 L90,70" id="path-3"></path>
+        <path d="M33,89 L90,89" id="path-4"></path>
     </defs>
-    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+    <g id="Page 1" fill="rgb(215,215,215)" fill-rule="evenodd">
         <use id="Line" xlink:href="#path-1"></use>
-        <use id="Line-1" stroke="rgb(254,254,254)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-1"></use>
+        <use id="Line-1" stroke="rgb(254,255,254)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-1"></use>
         <use id="Line" xlink:href="#path-2"></use>
-        <use id="Line-1" stroke="rgb(254,254,254)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-2"></use>
+        <use id="Line-1" stroke="rgb(254,255,254)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-2"></use>
         <use id="Line" xlink:href="#path-3"></use>
-        <use id="Line-1" stroke="rgb(254,254,254)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-3"></use>
+        <use id="Line-1" stroke="rgb(254,255,254)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-3"></use>
         <use id="Line" xlink:href="#path-4"></use>
-        <use id="Line-1" stroke="rgb(254,254,254)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-4"></use>
+        <use id="Line-1" stroke="rgb(254,255,254)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-4"></use>
     </g>
 </svg>
\ No newline at end of file
diff --git a/data/images/view-toggle-icon-list-inactive.svg b/data/images/view-toggle-icon-list-inactive.svg
index a43f1ea36..0f88ad444 100644
--- a/data/images/view-toggle-icon-list-inactive.svg
+++ b/data/images/view-toggle-icon-list-inactive.svg
@@ -1,21 +1,21 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="71px" height="71px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<svg width="130px" height="130px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
     <title>view-toggle-icon-list-inactive</title>
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs>
-        <path d="M7,5 L64,5" id="path-1"></path>
-        <path d="M7,25 L64,25" id="path-2"></path>
-        <path d="M7,43 L64,43" id="path-3"></path>
-        <path d="M7,62 L64,62" id="path-4"></path>
+        <path d="M33,32 L90,32" id="path-1"></path>
+        <path d="M33,52 L90,52" id="path-2"></path>
+        <path d="M33,70 L90,70" id="path-3"></path>
+        <path d="M33,89 L90,89" id="path-4"></path>
     </defs>
-    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+    <g id="Page 1" fill="rgb(215,215,215)" fill-rule="evenodd">
         <use id="Line" xlink:href="#path-1"></use>
-        <use id="Line-1" stroke="rgb(74,74,74)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-1"></use>
+        <use id="Line-1" stroke="rgb(57,57,57)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-1"></use>
         <use id="Line" xlink:href="#path-2"></use>
-        <use id="Line-1" stroke="rgb(74,74,74)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-2"></use>
+        <use id="Line-1" stroke="rgb(57,57,57)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-2"></use>
         <use id="Line" xlink:href="#path-3"></use>
-        <use id="Line-1" stroke="rgb(74,74,74)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-3"></use>
+        <use id="Line-1" stroke="rgb(57,57,57)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-3"></use>
         <use id="Line" xlink:href="#path-4"></use>
-        <use id="Line-1" stroke="rgb(74,74,74)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-4"></use>
+        <use id="Line-1" stroke="rgb(57,57,57)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-4"></use>
     </g>
 </svg>
\ No newline at end of file
diff --git a/data/images/view-toggle-inactive-left.svg b/data/images/view-toggle-inactive-left.svg
index b9c816acd..c98f1aa42 100644
--- a/data/images/view-toggle-inactive-left.svg
+++ b/data/images/view-toggle-inactive-left.svg
@@ -4,11 +4,11 @@
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs>
         <linearGradient x1="50%" y1="0%" x2="50%" y2="173.920641%" id="linearGradient-1">
-            <stop stop-color="rgb(255,255,255)" offset="0%"></stop>
+            <stop stop-color="rgb(254,255,254)" offset="0%"></stop>
             <stop stop-color="rgb(0,0,0)" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
-        <path d="M8.00079513,0 C3.582078,0 0,3.57494774 0,8.00079513 L0,29.9992049 C0,34.417922 3.57494774,38 8.00079513,38 L38,38 L38,0 L8.00079513,0 Z M8.00079513,0" id="Rectangle 1" stroke="rgb(167,167,167)" stroke-width="1" fill="url(#linearGradient-1)"></path>
+    <g id="Page 1" fill="rgb(215,215,215)" fill-rule="evenodd">
+        <path d="M11.9973518,0 C5.37139735,0 0,5.36387601 0,11.9973518 L0,26.0026482 C0,32.6286026 5.36387601,38 11.9973518,38 L38,38 L38,0 L11.9973518,0 Z M11.9973518,0" id="Rectangle 2" stroke="rgb(150,150,150)" stroke-width="1" fill="url(#linearGradient-1)"></path>
     </g>
 </svg>
\ No newline at end of file
diff --git a/data/images/view-toggle-inactive-right.svg b/data/images/view-toggle-inactive-right.svg
index 9f7fd9395..2000ece02 100644
--- a/data/images/view-toggle-inactive-right.svg
+++ b/data/images/view-toggle-inactive-right.svg
@@ -4,11 +4,11 @@
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs>
         <linearGradient x1="50%" y1="0%" x2="50%" y2="173.920641%" id="linearGradient-1">
-            <stop stop-color="rgb(254,255,255)" offset="0%"></stop>
+            <stop stop-color="rgb(254,255,254)" offset="0%"></stop>
             <stop stop-color="rgb(0,0,0)" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
-        <path d="M8.00079513,0 C3.582078,0 0,3.57494774 0,8.00079513 L0,29.9992049 C0,34.417922 3.57494774,38 8.00079513,38 L38,38 L38,0 L8.00079513,0 Z M8.00079513,0" id="Rectangle 1" stroke="rgb(167,167,167)" stroke-width="1" fill="url(#linearGradient-1)"></path>
+    <g id="Page 1" fill="rgb(215,215,215)" fill-rule="evenodd">
+        <path d="M0,0 L0,38 L26.0026482,38 C32.6286026,38 38,32.636124 38,26.0026482 L38,11.9973518 C38,5.37139735 32.636124,0 26.0026482,0 L0,0 Z M0,0" id="Rectangle 2" stroke="rgb(150,150,150)" stroke-width="1" fill="url(#linearGradient-1)"></path>
     </g>
 </svg>
\ No newline at end of file
diff --git a/data/images/view-toggle-pressed-left.svg b/data/images/view-toggle-pressed-left.svg
index e412c3713..3561d5400 100644
--- a/data/images/view-toggle-pressed-left.svg
+++ b/data/images/view-toggle-pressed-left.svg
@@ -4,11 +4,11 @@
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs>
         <linearGradient x1="50%" y1="173.920641%" x2="50%" y2="0%" id="linearGradient-1">
-            <stop stop-color="rgb(254,255,255)" offset="0%"></stop>
+            <stop stop-color="rgb(254,255,254)" offset="0%"></stop>
             <stop stop-color="rgb(0,0,0)" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
-        <path d="M8.00079513,0 C3.582078,0 0,3.57494774 0,8.00079513 L0,29.9992049 C0,34.417922 3.57494774,38 8.00079513,38 L38,38 L38,0 L8.00079513,0 Z M8.00079513,0" id="Rectangle 1" stroke="rgb(167,167,167)" stroke-width="1" fill="url(#linearGradient-1)"></path>
+    <g id="Page 1" fill="rgb(215,215,215)" fill-rule="evenodd">
+        <path d="M11.9973518,0 C5.37139735,0 0,5.36387601 0,11.9973518 L0,26.0026482 C0,32.6286026 5.36387601,38 11.9973518,38 L38,38 L38,0 L11.9973518,0 Z M11.9973518,0" id="Rectangle 2" stroke="rgb(150,150,150)" stroke-width="1" fill="url(#linearGradient-1)"></path>
     </g>
 </svg>
\ No newline at end of file
diff --git a/data/images/view-toggle-pressed-right.svg b/data/images/view-toggle-pressed-right.svg
index 6dd1ba919..43b4ca8bb 100644
--- a/data/images/view-toggle-pressed-right.svg
+++ b/data/images/view-toggle-pressed-right.svg
@@ -4,11 +4,11 @@
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs>
         <linearGradient x1="50%" y1="173.920641%" x2="50%" y2="0%" id="linearGradient-1">
-            <stop stop-color="rgb(254,255,255)" offset="0%"></stop>
+            <stop stop-color="rgb(254,255,254)" offset="0%"></stop>
             <stop stop-color="rgb(0,0,0)" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
-        <path d="M8.00079513,0 C3.582078,0 0,3.57494774 0,8.00079513 L0,29.9992049 C0,34.417922 3.57494774,38 8.00079513,38 L38,38 L38,0 L8.00079513,0 Z M8.00079513,0" id="Rectangle 1" stroke="rgb(167,167,167)" stroke-width="1" fill="url(#linearGradient-1)"></path>
+    <g id="Page 1" fill="rgb(215,215,215)" fill-rule="evenodd">
+        <path d="M0,0 L0,38 L26.0026482,38 C32.6286026,38 38,32.636124 38,26.0026482 L38,11.9973518 C38,5.37139735 32.636124,0 26.0026482,0 L0,0 Z M0,0" id="Rectangle 2" stroke="rgb(150,150,150)" stroke-width="1" fill="url(#linearGradient-1)"></path>
     </g>
 </svg>
\ No newline at end of file