styles for trim handles and play button

src/components/audio-trimmer/audio-trimmer.css

@@ -1,10 +1,11 @@
 @import "../../css/colors.css";
 
 $border-radius: 4px;
-$trim-handle-width: 12px;
-$trim-handle-height: 14px;
+$trim-handle-width: 30px;
+$trim-handle-height: 30px;
+$trim-handle-border: 3px;
 $stripe-size: 10px;
-$hover-scale: 2;
+$hover-scale: 1.25;
 
 .absolute {
     position: absolute;
@@ -88,6 +89,10 @@ $hover-scale: 2;
     border-right: none;
 }
 
+.right-handle {
+    transform: scaleX(-1);
+}
+
 .selector .left-handle {
     left: 0
 }
@@ -106,19 +111,19 @@ $hover-scale: 2;
 
 .trim-handle {
     position: absolute;
-    left: calc(-$trim-handle-width / 2);
     width: $trim-handle-width;
     height: $trim-handle-height;
 }
 
-.selector .trim-handle {
-    filter: hue-rotate(180deg);
+.trimmer .trim-handle {
+    filter: hue-rotate(150deg);
 }
 
 .trim-handle img {
     position: absolute;
     width: $trim-handle-width;
     height: $trim-handle-height;
+    left: calc(-$trim-handle-width + $trim-handle-border * 1.5);
 
     /* Make sure image dragging isn't triggered */
     user-select: none;
@@ -129,22 +134,13 @@ $hover-scale: 2;
 }
 
 .top-trim-handle {
-    top: -$trim-handle-height;
+    top: calc(-$trim-handle-height + $trim-handle-border);
 }
 
 .bottom-trim-handle {
-    bottom: -$trim-handle-height;
+    bottom: calc(-$trim-handle-height + $trim-handle-border);
 }
 
 .top-trim-handle img {
-    transform: rotate(180deg);
-}
-
-/* Increase handle size when anywhere on draggable area is hovered */
-.trim-background:hover img {
-    transform: scale($hover-scale);
-}
-
-.trim-background:hover .top-trim-handle img {
-    transform: rotate(180deg) scale($hover-scale);
+    transform: scaleY(-1);
 }

src/components/audio-trimmer/icon--handle.svg

@@ -1,18 +1,16 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="8px" height="10px" viewBox="0 0 8 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
-    <title>handle</title>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="34px" height="34px" viewBox="1 1 33 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
+    <title>Bottom Left Handle</title>
     <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="Desktop---1280x720" transform="translate(-461.000000, -329.000000)" stroke="#E64D00" fill="#FF661A">
-            <g id="Step-5---Confirming-Trim" transform="translate(0.000000, 42.000000)">
-                <g id="Sound-Sketches" transform="translate(427.000000, 167.000000)">
-                    <g id="start-playhead" transform="translate(35.000000, 0.000000)">
-                        <path d="M0,122.213854 C0,121.658366 0.45097518,121.208054 0.990777969,121.208054 L5.00922203,121.208054 C5.55641359,121.208054 6,121.659838 6,122.213854 L6,126.298963 L3,129.208054 L0,126.298963 L0,122.213854 Z" id="handle" transform="translate(3.000000, 125.208054) scale(1, -1) translate(-3.000000, -125.208054) "></path>
-                    </g>
-                </g>
-            </g>
+    <defs>
+        <path d="M17,5 C23.627417,5 29,10.372583 29,17 L29,29 L17,29 C10.372583,29 5,23.627417 5,17 C5,10.372583 10.372583,5 17,5 Z" id="path-1"></path>
+    </defs>
+    <g id="Bottom-Left-Handle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Bottom-Left" transform="translate(17.000000, 17.000000) scale(1, -1) translate(-17.000000, -17.000000) ">
+            <use stroke="#4D97FF33" stroke-width="8" xlink:href="#path-1"></use>
+            <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+            <use stroke="#3D73CC" stroke-width="1" fill="#4D97FF" fill-rule="evenodd" xlink:href="#path-1"></use>
         </g>
     </g>
 </svg>

src/components/sound-editor/sound-editor.css

@@ -64,6 +64,9 @@
     border: 1px solid $ui-black-transparent;
     border-radius: 5px;
     padding: 3px;
+
+    margin-top: 20px;
+    margin-bottom: 20px;
 }
 
 $border-radius: 0.25rem;
@@ -93,9 +96,9 @@ $border-radius: 0.25rem;
     height: 3rem;
     width: 3rem;
     outline: none;
-    background: white;
+    background: $motion-primary;
     border-radius: 100%;
-    border: 1px solid $ui-black-transparent;
+    border: 4px solid $ui-white-dim;
     cursor: pointer;
     padding: 0.75rem;
     user-select: none;
@@ -105,6 +108,7 @@ $border-radius: 0.25rem;
     flex-grow: 1;
     max-width: 100%;
     max-height: 100%;
+    filter: grayscale(1) brightness(10);
     /*min-width: 1.5rem;*/
 }