resume/pause/cancel styles, white dashboard background

src/scss/_dashboard.scss

@@ -22,7 +22,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba($color-black, 0.5);
+  background-color: rgba($color-white, 0.8);
   z-index: $zIndex-2;
 }
 
@@ -71,7 +71,7 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    box-shadow: 0px 0px 10px 4px rgba($color-black, 0.1);
+    box-shadow: 0px 0px 20px 7px rgba($color-gray, 0.15);
   }
 }
 
@@ -131,7 +131,7 @@
 .UppyDashboard-browse {
   @include reset-button;
   cursor: pointer;
-  color: $color-cornflower-blue;
+  color: darken($color-cornflower-blue, 10%);
 }
 
 .UppyDashboardTabs-list {
@@ -488,15 +488,16 @@
   width: 20px;
 }
 
+  .UppyDashboardItem.is-inprogress:not(.is-resumable) {
+    .UppyDashboardItem-remove {
+      display: none;
+    }
+  }
+
 .UppyDashboardItem-remove .UppyIcon {
   max-width: 100%;
 }
 
-  // .Uppy--isTouchDevice .UppyDashboardItem-remove,
-  .UppyDashboardItem:hover .UppyDashboardItem-remove {
-    opacity: 1;
-  }
-
 .UppyDashboardItem-progress {
   position: absolute;
   top: 50%;
@@ -540,19 +541,19 @@
   height: 100%;
 }
 
-.UppyIcon-progressCircle .bg {
+.UppyDashboardItem .bg {
   stroke: rgba($color-white, 0.4);
   opacity: 0;
   // transition: all 0.2s;
 }
 
-.UppyIcon-progressCircle .progress {
+.UppyDashboardItem .progress {
   stroke: $color-white;
   transition: stroke-dashoffset .5s ease-out;
   opacity: 0;
 }
 
-.UppyIcon-progressCircle .play {
+.UppyDashboardItem .play {
   stroke: $color-white;
   fill: $color-white;
   opacity: 0;
@@ -560,6 +561,13 @@
   display: none;
 }
 
+.UppyDashboardItem .cancel {
+  // stroke: $color-white;
+  fill: $color-white;
+  opacity: 0;
+  transition: all 0.2s;
+}
+
 .UppyDashboardItem .pause {
   stroke: $color-white;
   fill: $color-white;
@@ -570,6 +578,7 @@
 
 .UppyDashboardItem.is-resumable {
   .pause, .play { display: block; }
+  .cancel { display: none; }
 }
 
 .UppyIcon-progressCircle .check {
@@ -579,7 +588,7 @@
 }
 
 .UppyDashboardItem.is-inprogress {
-  .bg, .progress, .pause {
+  .bg, .progress, .pause, .cancel {
     opacity: 1;
   }
 

src/scss/_fileinput.scss

@@ -2,15 +2,6 @@
 @import '_utils.scss';
 @import '_common.scss';
 
-// .uppy-FileInput-input {
-//   width: 0.1px;
-//   height: 0.1px;
-//   opacity: 0;
-//   overflow: hidden;
-//   position: absolute;
-//   z-index: -1;
-// }
-
 .uppy-FileInput-btn {
   @include reset-button;