diff --git a/data/images/back-pressed.svg b/data/images/back-pressed.svg
index a22ec1e9f..bf50660cd 100644
--- a/data/images/back-pressed.svg
+++ b/data/images/back-pressed.svg
@@ -3,7 +3,7 @@
     <title>back-pressed</title>
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs>
-        <linearGradient x1="50%" y1="100%" x2="50%" y2="50%" id="linearGradient-1">
+        <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(0,0,0)" stop-opacity="0.5" offset="100%"></stop>
         </linearGradient>
@@ -12,6 +12,6 @@
     <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="M70.9215002,29.6884192 C69.8955002,29.1644192 68.6525002,29.2604192 67.7175002,29.9414192 L55.1155,39.0924192 L55.1155,32.430419 C55.1155,31.2734191 54.4655,30.213419 53.4334999,29.6884189 C52.4074999,29.1644189 51.1655,29.2604189 50.2304999,29.9414189 L24.6644999,48.5094197 C23.8674999,49.0874197 23.3954998,50.0134196 23.3954998,50.9974196 C23.3954998,51.9824196 23.8654998,52.9074196 24.6644999,53.4874196 L50.2304999,72.0584188 C50.7644998,72.4474188 51.4014999,72.6464188 52.0384998,72.6464188 C52.5164998,72.6464188 52.9944998,72.5354188 53.4344999,72.3094188 C54.4654999,71.7854188 55.1164999,70.7254188 55.1164999,69.5704187 L55.1164999,62.9044188 L67.7185001,72.0584191 C68.2535002,72.4474191 68.8905002,72.6464191 69.5275002,72.6464191 C70.0055001,72.6464191 70.4825001,72.5354191 70.9235002,72.309419 C71.9545002,71.7854191 72.6045002,70.7254191 72.6045002,69.570419 L72.6045002,32.4294201 C72.6014929,31.2735022 71.9524908,30.2134436 70.9215002,29.6884192 C70.9215002,29.6884192 71.9524908,30.2134436 70.9215002,29.6884192 L70.9215002,29.6884192" id="Shape" fill="rgb(213,213,213)"></path>
+        <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>
 </svg>
\ No newline at end of file
diff --git a/data/images/back-rest.svg b/data/images/back-rest.svg
index 4379d2183..4f3075f2b 100644
--- a/data/images/back-rest.svg
+++ b/data/images/back-rest.svg
@@ -3,7 +3,7 @@
     <title>back-rest</title>
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs>
-        <linearGradient x1="50%" y1="100%" x2="50%" y2="50%" id="linearGradient-1">
+        <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(0,0,0)" stop-opacity="0.5" offset="100%"></stop>
         </linearGradient>
@@ -12,6 +12,6 @@
     <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="M67.7175002,29.9414192 L55.1155,39.0924192 L55.1155,32.430419 C55.1155,31.2734191 54.4655,30.213419 53.4334999,29.6884189 C52.4074999,29.1644189 51.1655,29.2604189 50.2304999,29.9414189 L24.6644999,48.5094197 C23.8674999,49.0874197 23.3954998,50.0134196 23.3954998,50.9974196 C23.3954998,51.9824196 23.8654998,52.9074196 24.6644999,53.4874196 L50.2304999,72.0584188 C50.7644998,72.4474188 51.4014999,72.6464188 52.0384998,72.6464188 C52.5164998,72.6464188 52.9944998,72.5354188 53.4344999,72.3094188 C54.4654999,71.7854188 55.1164999,70.7254188 55.1164999,69.5704187 L55.1164999,62.9044188 L67.7185001,72.0584191 C68.2535002,72.4474191 68.8905002,72.6464191 69.5275002,72.6464191 C70.0055001,72.6464191 70.4825001,72.5354191 70.9235002,72.309419 C71.9545002,71.7854191 72.6045002,70.7254191 72.6045002,69.570419 L72.6045002,32.4294201 C72.6014929,31.2735022 71.9524908,30.2134436 70.9215002,29.6884192 C69.8955002,29.1644192 68.6525002,29.2604192 67.7175002,29.9414192 Z M67.7175002,29.9414192" id="Shape" fill="rgb(254,254,254)"></path>
+        <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>
 </svg>
\ No newline at end of file
diff --git a/data/images/pause-pressed.svg b/data/images/pause-pressed.svg
index 6f31c1686..52f532718 100644
--- a/data/images/pause-pressed.svg
+++ b/data/images/pause-pressed.svg
@@ -3,18 +3,20 @@
     <title>pause-pressed</title>
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs>
-        <linearGradient x1="50%" y1="100%" x2="50%" y2="50%" id="linearGradient-1">
+        <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(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>
+        <linearGradient x1="50%" y1="93.796875%" x2="50%" y2="221.863281%" id="linearGradient-3">
+            <stop stop-color="rgb(254,255,255)" stop-opacity="0.669577206" 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="M54.0700073,14.1679993 C36.159008,14.1679993 21.5930061,28.7329988 21.5930061,46.6399994 C21.5930061,64.5459995 36.1580057,79.1160011 54.0700073,79.1160011 C56.6380074,79.1160011 59.1300073,78.7980011 61.5290074,78.2280011 L61.5290074,50.2170014 L39.1910081,66.0230012 C38.9930081,66.1580012 38.7470081,66.2360012 38.5100081,66.2360012 C38.3260081,66.2360012 38.1380081,66.1970012 37.9690081,66.1000012 C37.5730081,65.8980012 37.3270081,65.4920012 37.3270081,65.0570012 L37.3270081,28.0039998 C37.3270081,27.5689998 37.5730081,27.1589998 37.9690081,26.9509998 C38.3650081,26.7579998 38.8330081,26.7919998 39.1910081,27.0429998 L61.5290074,42.85 L61.5290074,26.8220001 L62.4800074,26.8220001 L71.4250071,26.8220001 L71.4250071,74.0560013 C80.5010073,68.2920013 86.5460074,58.1680017 86.5460074,46.6390015 C86.5460052,28.7340088 71.9759979,14.1679993 54.0700073,14.1679993 L54.0700073,14.1679993 L54.0700073,14.1679993" id="Shape"></path>
         <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="M43.7659912,29.1379395 L35.9979911,29.1379395 C35.0509911,29.1379395 34.2819911,29.9059395 34.2819911,30.8539394 L34.2819911,70.7719387 C34.2819911,71.7199387 35.0509911,72.4889387 35.9979911,72.4889387 L43.7659912,72.4889387 C44.7129912,72.4889387 45.4829912,71.7199387 45.4829912,70.7719387 L45.4829912,30.8539394 C45.4819946,29.9050293 44.7130127,29.1379395 43.7659912,29.1379395 L43.7659912,29.1379395 L43.7659912,29.1379395" id="Shape" fill="rgb(213,213,213)"></path>
-            <path d="M65.0449829,29.1379395 L57.2779827,29.1379395 C56.3299827,29.1379395 55.5609827,29.9059395 55.5609827,30.8539394 L55.5609827,70.7719387 C55.5609827,71.7199387 56.3299827,72.4889387 57.2779827,72.4889387 L65.0449829,72.4889387 C65.9929829,72.4889387 66.7619829,71.7199387 66.7619829,70.7719387 L66.7619829,30.8539394 C66.7620239,29.9050293 65.992981,29.1379395 65.0449829,29.1379395 L65.0449829,29.1379395 L65.0449829,29.1379395" id="Shape" fill="rgb(213,213,213)"></path>
-        </g>
+        <path d="M51.0024096,1 C23.4287559,1 1,23.4303817 1,51 C1,78.5708278 23.4287582,101 51.0024096,101 C78.5700348,101 101,78.5708255 101,51 C100.998781,23.4303656 78.570021,1 51.0024096,1 L51.0024096,1 L51.0024096,1 M71.9231332,84.0524422 L71.9231332,27.1097021 L61.1403091,27.1097021 L59.9939183,27.1097021 L59.9939183,46.4321861 L33.0663916,27.3761274 C32.636043,27.0735355 32.0706831,27.0325469 31.5933216,27.2652172 C31.1159601,27.5159707 30.8194173,28.0102443 30.8194173,28.5346566 L30.8194173,73.2037377 C30.8194173,73.72815 31.1159601,74.2176015 31.5933216,74.4611217 C31.797044,74.5780596 32.0236702,74.6250759 32.2454745,74.6250759 C32.5299627,74.6250759 32.8265054,74.5310433 33.0663916,74.3682947 L59.9939183,55.313442 L59.9939183,89.0819781 C57.1020239,89.7679335 54.098022,90.1525026 51.0024047,90.1525026 C29.411442,90.1525026 11.8527342,72.5877042 11.8527342,51.0012031 C11.8527342,29.4147042 29.4102338,11.8547277 51.0024047,11.8547277 C72.5873411,11.8547277 90.1520752,29.4134982 90.1520752,51.0012031 C90.1508707,64.8987339 82.8638775,77.1036685 71.9231332,84.0524422 C71.9231332,84.0524422 82.8638775,77.1036685 71.9231332,84.0524422 L71.9231332,84.0524422" id="Shape" fill="url(#linearGradient-3)"></path>
     </g>
 </svg>
\ No newline at end of file
diff --git a/data/images/pause-rest.svg b/data/images/pause-rest.svg
index 9c442b2bc..ddc031fc2 100644
--- a/data/images/pause-rest.svg
+++ b/data/images/pause-rest.svg
@@ -3,18 +3,20 @@
     <title>pause-rest</title>
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs>
-        <linearGradient x1="50%" y1="100%" x2="50%" y2="50%" id="linearGradient-1">
+        <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(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>
+        <linearGradient x1="50%" y1="93.796875%" x2="50%" y2="221.863281%" id="linearGradient-3">
+            <stop stop-color="rgb(255,255,255)" 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="M54.0700073,14.1679993 C36.159008,14.1679993 21.5930061,28.7329988 21.5930061,46.6399994 C21.5930061,64.5459995 36.1580057,79.1160011 54.0700073,79.1160011 C56.6380074,79.1160011 59.1300073,78.7980011 61.5290074,78.2280011 L61.5290074,50.2170014 L39.1910081,66.0230012 C38.9930081,66.1580012 38.7470081,66.2360012 38.5100081,66.2360012 C38.3260081,66.2360012 38.1380081,66.1970012 37.9690081,66.1000012 C37.5730081,65.8980012 37.3270081,65.4920012 37.3270081,65.0570012 L37.3270081,28.0039998 C37.3270081,27.5689998 37.5730081,27.1589998 37.9690081,26.9509998 C38.3650081,26.7579998 38.8330081,26.7919998 39.1910081,27.0429998 L61.5290074,42.85 L61.5290074,26.8220001 L62.4800074,26.8220001 L71.4250071,26.8220001 L71.4250071,74.0560013 C80.5010073,68.2920013 86.5460074,58.1680017 86.5460074,46.6390015 C86.5460052,28.7340088 71.9759979,14.1679993 54.0700073,14.1679993 L54.0700073,14.1679993 L54.0700073,14.1679993" id="Shape"></path>
         <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="M43.7659912,29.1379395 L35.9979911,29.1379395 C35.0509911,29.1379395 34.2819911,29.9059395 34.2819911,30.8539394 L34.2819911,70.7719387 C34.2819911,71.7199387 35.0509911,72.4889387 35.9979911,72.4889387 L43.7659912,72.4889387 C44.7129912,72.4889387 45.4829912,71.7199387 45.4829912,70.7719387 L45.4829912,30.8539394 C45.4819946,29.9050293 44.7130127,29.1379395 43.7659912,29.1379395 L43.7659912,29.1379395 L43.7659912,29.1379395" id="Shape" fill="rgb(254,254,254)"></path>
-            <path d="M65.0449829,29.1379395 L57.2779827,29.1379395 C56.3299827,29.1379395 55.5609827,29.9059395 55.5609827,30.8539394 L55.5609827,70.7719387 C55.5609827,71.7199387 56.3299827,72.4889387 57.2779827,72.4889387 L65.0449829,72.4889387 C65.9929829,72.4889387 66.7619829,71.7199387 66.7619829,70.7719387 L66.7619829,30.8539394 C66.7620239,29.9050293 65.992981,29.1379395 65.0449829,29.1379395 L65.0449829,29.1379395 L65.0449829,29.1379395" id="Shape" fill="rgb(254,254,254)"></path>
-        </g>
+        <path d="M51.0024096,1 C23.4287559,1 1,23.4303817 1,51 C1,78.5708278 23.4287582,101 51.0024096,101 C78.5700348,101 101,78.5708255 101,51 C100.998781,23.4303656 78.570021,1 51.0024096,1 L51.0024096,1 L51.0024096,1 M71.9231332,84.0524422 L71.9231332,27.1097021 L61.1403091,27.1097021 L59.9939183,27.1097021 L59.9939183,46.4321861 L33.0663916,27.3761274 C32.636043,27.0735355 32.0706831,27.0325469 31.5933216,27.2652172 C31.1159601,27.5159707 30.8194173,28.0102443 30.8194173,28.5346566 L30.8194173,73.2037377 C30.8194173,73.72815 31.1159601,74.2176015 31.5933216,74.4611217 C31.797044,74.5780596 32.0236702,74.6250759 32.2454745,74.6250759 C32.5299627,74.6250759 32.8265054,74.5310433 33.0663916,74.3682947 L59.9939183,55.313442 L59.9939183,89.0819781 C57.1020239,89.7679335 54.098022,90.1525026 51.0024047,90.1525026 C29.411442,90.1525026 11.8527342,72.5877042 11.8527342,51.0012031 C11.8527342,29.4147042 29.4102338,11.8547277 51.0024047,11.8547277 C72.5873411,11.8547277 90.1520752,29.4134982 90.1520752,51.0012031 C90.1508707,64.8987339 82.8638775,77.1036685 71.9231332,84.0524422 C71.9231332,84.0524422 82.8638775,77.1036685 71.9231332,84.0524422 L71.9231332,84.0524422" id="Shape" fill="url(#linearGradient-3)"></path>
     </g>
 </svg>
\ No newline at end of file
diff --git a/data/images/play-pressed.svg b/data/images/play-pressed.svg
index d703b1f77..5da657d2f 100644
--- a/data/images/play-pressed.svg
+++ b/data/images/play-pressed.svg
@@ -3,13 +3,20 @@
     <title>play-pressed</title>
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs>
-        <linearGradient x1="50%" y1="50%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="rgb(253,88,92)" offset="0%"></stop>
+        <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(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>
+        <linearGradient x1="50%" y1="100%" x2="50%" y2="229.515625%" id="linearGradient-3">
+            <stop stop-color="rgb(253,87,91)" stop-opacity="0.669720818" offset="0%"></stop>
             <stop stop-color="rgb(165,21,21)" offset="100%"></stop>
         </linearGradient>
     </defs>
     <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
-        <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="Oval 1" stroke="rgb(167,167,167)" stroke-width="1" fill="url(#linearGradient-1)"></path>
-        <path d="M39.5027446,29.632504 C39.5027446,29.632504 39.4987446,28.6955041 39.5967446,28.136504 C39.8227446,26.8445039 41.0657445,26.223504 42.0107446,26.2195039 C42.6647446,26.2165039 43.2507446,26.5625039 43.8457446,27.0075039 L71.1917453,48.3485035 C71.2517453,48.3975035 71.3087453,48.4475035 71.3637453,48.5015035 C72.3237453,49.4505035 72.5087453,50.4355035 72.4967453,51.0915034 C72.4677453,52.4455034 71.5947453,53.3065033 71.4197453,53.4635034 C61.1937455,61.3805032 44.6857461,74.4415041 44.6857461,74.4415041 C43.699746,75.1585041 42.906746,75.775504 41.995746,75.780504 L41.995746,75.780504 C40.937746,75.783504 40.178746,75.193504 39.821746,74.636504 C39.623746,74.326504 39.514746,73.966504 39.514746,73.599504 L39.5027446,29.632504 L39.5027446,29.632504 L39.5027446,29.632504" id="Shape" fill="rgb(213,213,213)"></path>
+        <path d="M54.0700073,14.1679993 C36.159008,14.1679993 21.5930061,28.7329988 21.5930061,46.6399994 C21.5930061,64.5459995 36.1580057,79.1160011 54.0700073,79.1160011 C56.6380074,79.1160011 59.1300073,78.7980011 61.5290074,78.2280011 L61.5290074,50.2170014 L39.1910081,66.0230012 C38.9930081,66.1580012 38.7470081,66.2360012 38.5100081,66.2360012 C38.3260081,66.2360012 38.1380081,66.1970012 37.9690081,66.1000012 C37.5730081,65.8980012 37.3270081,65.4920012 37.3270081,65.0570012 L37.3270081,28.0039998 C37.3270081,27.5689998 37.5730081,27.1589998 37.9690081,26.9509998 C38.3650081,26.7579998 38.8330081,26.7919998 39.1910081,27.0429998 L61.5290074,42.85 L61.5290074,26.8220001 L62.4800074,26.8220001 L71.4250071,26.8220001 L71.4250071,74.0560013 C80.5010073,68.2920013 86.5460074,58.1680017 86.5460074,46.6390015 C86.5460052,28.7340088 71.9759979,14.1679993 54.0700073,14.1679993 L54.0700073,14.1679993 L54.0700073,14.1679993" id="Shape"></path>
+        <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="M51.0024096,1 C23.4287559,1 1,23.4303817 1,51 C1,78.5708278 23.4287582,101 51.0024096,101 C78.5700348,101 101,78.5708255 101,51 C100.998781,23.4303656 78.570021,1 51.0024096,1 L51.0024096,1 L51.0024096,1 M71.9231332,84.0524422 L71.9231332,27.1097021 L61.1403091,27.1097021 L59.9939183,27.1097021 L59.9939183,46.4321861 L33.0663916,27.3761274 C32.636043,27.0735355 32.0706831,27.0325469 31.5933216,27.2652172 C31.1159601,27.5159707 30.8194173,28.0102443 30.8194173,28.5346566 L30.8194173,73.2037377 C30.8194173,73.72815 31.1159601,74.2176015 31.5933216,74.4611217 C31.797044,74.5780596 32.0236702,74.6250759 32.2454745,74.6250759 C32.5299627,74.6250759 32.8265054,74.5310433 33.0663916,74.3682947 L59.9939183,55.313442 L59.9939183,89.0819781 C57.1020239,89.7679335 54.098022,90.1525026 51.0024047,90.1525026 C29.411442,90.1525026 11.8527342,72.5877042 11.8527342,51.0012031 C11.8527342,29.4147042 29.4102338,11.8547277 51.0024047,11.8547277 C72.5873411,11.8547277 90.1520752,29.4134982 90.1520752,51.0012031 C90.1508707,64.8987339 82.8638775,77.1036685 71.9231332,84.0524422 C71.9231332,84.0524422 82.8638775,77.1036685 71.9231332,84.0524422 L71.9231332,84.0524422" id="Shape" fill="url(#linearGradient-3)"></path>
     </g>
 </svg>
\ No newline at end of file
diff --git a/data/images/play-rest.svg b/data/images/play-rest.svg
index 947b015c5..fbcd017bd 100644
--- a/data/images/play-rest.svg
+++ b/data/images/play-rest.svg
@@ -3,13 +3,20 @@
     <title>play-rest</title>
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs>
-        <linearGradient x1="50%" y1="50%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="rgb(253,88,92)" offset="0%"></stop>
+        <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(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>
+        <linearGradient x1="50%" y1="50%" x2="50%" y2="225.40625%" id="linearGradient-3">
+            <stop stop-color="rgb(244,35,14)" offset="0%"></stop>
             <stop stop-color="rgb(165,21,21)" offset="100%"></stop>
         </linearGradient>
     </defs>
     <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
-        <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="Oval 1" stroke="rgb(167,167,167)" stroke-width="1" fill="url(#linearGradient-1)"></path>
-        <path d="M39.5027446,29.632504 C39.5027446,29.632504 39.4987446,28.6955041 39.5967446,28.136504 C39.8227446,26.8445039 41.0657445,26.223504 42.0107446,26.2195039 C42.6647446,26.2165039 43.2507446,26.5625039 43.8457446,27.0075039 L71.1917453,48.3485035 C71.2517453,48.3975035 71.3087453,48.4475035 71.3637453,48.5015035 C72.3237453,49.4505035 72.5087453,50.4355035 72.4967453,51.0915034 C72.4677453,52.4455034 71.5947453,53.3065033 71.4197453,53.4635034 C61.1937455,61.3805032 44.6857461,74.4415041 44.6857461,74.4415041 C43.699746,75.1585041 42.906746,75.775504 41.995746,75.780504 L41.995746,75.780504 C40.937746,75.783504 40.178746,75.193504 39.821746,74.636504 C39.623746,74.326504 39.514746,73.966504 39.514746,73.599504 L39.5027446,29.632504 L39.5027446,29.632504 L39.5027446,29.632504" id="Shape" fill="rgb(254,254,254)"></path>
+        <path d="M54.0700073,14.1679993 C36.159008,14.1679993 21.5930061,28.7329988 21.5930061,46.6399994 C21.5930061,64.5459995 36.1580057,79.1160011 54.0700073,79.1160011 C56.6380074,79.1160011 59.1300073,78.7980011 61.5290074,78.2280011 L61.5290074,50.2170014 L39.1910081,66.0230012 C38.9930081,66.1580012 38.7470081,66.2360012 38.5100081,66.2360012 C38.3260081,66.2360012 38.1380081,66.1970012 37.9690081,66.1000012 C37.5730081,65.8980012 37.3270081,65.4920012 37.3270081,65.0570012 L37.3270081,28.0039998 C37.3270081,27.5689998 37.5730081,27.1589998 37.9690081,26.9509998 C38.3650081,26.7579998 38.8330081,26.7919998 39.1910081,27.0429998 L61.5290074,42.85 L61.5290074,26.8220001 L62.4800074,26.8220001 L71.4250071,26.8220001 L71.4250071,74.0560013 C80.5010073,68.2920013 86.5460074,58.1680017 86.5460074,46.6390015 C86.5460052,28.7340088 71.9759979,14.1679993 54.0700073,14.1679993 L54.0700073,14.1679993 L54.0700073,14.1679993" id="Shape"></path>
+        <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="M51.0024096,1 C23.4287559,1 1,23.4303817 1,51 C1,78.5708278 23.4287582,101 51.0024096,101 C78.5700348,101 101,78.5708255 101,51 C100.998781,23.4303656 78.570021,1 51.0024096,1 L51.0024096,1 L51.0024096,1 M71.9231332,84.0524422 L71.9231332,27.1097021 L61.1403091,27.1097021 L59.9939183,27.1097021 L59.9939183,46.4321861 L33.0663916,27.3761274 C32.636043,27.0735355 32.0706831,27.0325469 31.5933216,27.2652172 C31.1159601,27.5159707 30.8194173,28.0102443 30.8194173,28.5346566 L30.8194173,73.2037377 C30.8194173,73.72815 31.1159601,74.2176015 31.5933216,74.4611217 C31.797044,74.5780596 32.0236702,74.6250759 32.2454745,74.6250759 C32.5299627,74.6250759 32.8265054,74.5310433 33.0663916,74.3682947 L59.9939183,55.313442 L59.9939183,89.0819781 C57.1020239,89.7679335 54.098022,90.1525026 51.0024047,90.1525026 C29.411442,90.1525026 11.8527342,72.5877042 11.8527342,51.0012031 C11.8527342,29.4147042 29.4102338,11.8547277 51.0024047,11.8547277 C72.5873411,11.8547277 90.1520752,29.4134982 90.1520752,51.0012031 C90.1508707,64.8987339 82.8638775,77.1036685 71.9231332,84.0524422 C71.9231332,84.0524422 82.8638775,77.1036685 71.9231332,84.0524422 L71.9231332,84.0524422" id="Shape" fill="url(#linearGradient-3)"></path>
     </g>
 </svg>
\ No newline at end of file
diff --git a/data/images/skip-pressed.svg b/data/images/skip-pressed.svg
index 67dff37af..654055dd7 100644
--- a/data/images/skip-pressed.svg
+++ b/data/images/skip-pressed.svg
@@ -12,6 +12,6 @@
     <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="M37.6770005,72.0585419 L50.2810006,62.9065414 L50.2810006,69.5685416 C50.2810006,70.7255416 50.9300006,71.7855416 51.9610006,72.3105417 C52.9880005,72.8345417 54.2310005,72.7385417 55.1650006,72.0585417 L80.732,53.4895415 C81.529,52.9125415 82,51.9855415 82,51.0015416 C82,50.0165416 81.531,49.0915416 80.732,48.5115416 L55.1650006,29.9415419 C54.6310006,29.5525419 53.9940006,29.3545418 53.3570006,29.3545418 C52.8790006,29.3545418 52.4010006,29.4635418 51.9610006,29.6895419 C50.9310006,30.2145418 50.2810006,31.2735418 50.2810006,32.4295419 L50.2810006,39.0945418 L37.6770005,29.9415419 C37.1440005,29.552542 36.5070006,29.3545419 35.8700005,29.3545419 C35.3910005,29.3545419 34.9140005,29.4635419 34.4740005,29.6895419 C33.4430004,30.2145419 32.7930005,31.2735419 32.7930005,32.429542 L32.7930005,69.5695413 C32.7930007,70.7255809 33.4429946,71.7845409 34.4740005,72.3105419 C35.5010004,72.8345419 36.7440004,72.7385419 37.6770005,72.0585419 Z M37.6770005,72.0585419" id="Shape" fill="rgb(213,213,213)"></path>
+        <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>
 </svg>
\ No newline at end of file
diff --git a/data/images/skip-rest.svg b/data/images/skip-rest.svg
index dc6f1edfe..28499ab41 100644
--- a/data/images/skip-rest.svg
+++ b/data/images/skip-rest.svg
@@ -12,6 +12,6 @@
     <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="M37.6770005,72.0585419 L50.2810006,62.9065414 L50.2810006,69.5685416 C50.2810006,70.7255416 50.9300006,71.7855416 51.9610006,72.3105417 C52.9880005,72.8345417 54.2310005,72.7385417 55.1650006,72.0585417 L80.732,53.4895415 C81.529,52.9125415 82,51.9855415 82,51.0015416 C82,50.0165416 81.531,49.0915416 80.732,48.5115416 L55.1650006,29.9415419 C54.6310006,29.5525419 53.9940006,29.3545418 53.3570006,29.3545418 C52.8790006,29.3545418 52.4010006,29.4635418 51.9610006,29.6895419 C50.9310006,30.2145418 50.2810006,31.2735418 50.2810006,32.4295419 L50.2810006,39.0945418 L37.6770005,29.9415419 C37.1440005,29.552542 36.5070006,29.3545419 35.8700005,29.3545419 C35.3910005,29.3545419 34.9140005,29.4635419 34.4740005,29.6895419 C33.4430004,30.2145419 32.7930005,31.2735419 32.7930005,32.429542 L32.7930005,69.5695413 C32.7930007,70.7255809 33.4429946,71.7845409 34.4740005,72.3105419 C35.5010004,72.8345419 36.7440004,72.7385419 37.6770005,72.0585419 Z M37.6770005,72.0585419" id="Shape" fill="rgb(254,254,254)"></path>
+        <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>
 </svg>
\ No newline at end of file