added white button and minor styles

src/scss/_common.scss

@@ -39,6 +39,17 @@
   }
 }
 
+.UppyButton--white {
+  color: $color-asphalt-gray;
+  background-color: $color-white;
+
+  &:hover,
+  &:focus {
+    color: $color-white;
+    background-color: darken($color-cornflower-blue, 10%);
+  }
+}
+
 .UppyButton--yellow {
   color: $color-white;
   background-color: $color-yellow;

src/scss/_dashboard.scss

@@ -28,7 +28,7 @@
 
 .UppyDashboard-inner {
   position: relative;
-  background-color: darken($color-white, 5%);
+  background-color: darken($color-white, 2%);
   padding: 15px;
   max-width: 100%;
   max-height: 100%;
@@ -38,6 +38,7 @@
   z-index: $zIndex-3;
   outline: none;
   border: 1px solid rgba($color-gray, 0.25);
+  border-radius: 5px;
 }
 
 .UppyDashboard--modal .UppyDashboard-inner {
@@ -280,7 +281,7 @@
 // so we are using a wrapper here
 .UppyDashboard-filesInner {
   height: 100%;
-  overflow-y: scroll;
+  overflow-y: auto;
   padding: 0;
   margin: 0;
 }
@@ -463,8 +464,8 @@
 
 .UppyDashboardItem-progressBtn {
   @include reset-button;
-  width: 70px;
-  height: 70px;
+  width: 55px;
+  height: 55px;
   opacity: 0.9;
   cursor: pointer;
 }
@@ -576,24 +577,25 @@
   stroke: rgba($color-cornflower-blue, 0.3);
   transition: all 0.2s;
   opacity: 1;
+  box-shadow: 1px 2px 4px 0px rgba($color-black, 0.2);
 }
 
 .UppyTotalProgress .progress {
-  stroke: $color-cornflower-blue;
+  stroke: darken($color-cornflower-blue, 5%);
   transition: stroke-dashoffset .5s ease-out;
   opacity: 1;
 }
 
 .UppyTotalProgress .play {
-  stroke: $color-cornflower-blue;
-  fill: $color-cornflower-blue;
+  stroke: darken($color-cornflower-blue, 5%);
+  fill: darken($color-cornflower-blue, 5%);
   transition: all 0.2s;
   opacity: 0;
 }
 
 .UppyTotalProgress .pause {
-  stroke: $color-cornflower-blue;
-  fill: $color-cornflower-blue;
+  stroke: darken($color-cornflower-blue, 5%);
+  fill: darken($color-cornflower-blue, 5%);
   transition: all 0.2s;
   opacity: 1;
 }
@@ -660,12 +662,12 @@
   width: 70px;
   text-align: center;
   position: absolute;
-  bottom: 25px;
+  bottom: 35px;
   right: 25px;
 }
 
 .UppyDashboard-actionsItem {
-  margin-bottom: 15px;
+  // margin-bottom: 15px;
 }
 
 .UppyDashboard-pauseResume .UppyIcon {
@@ -790,3 +792,14 @@
   width: 30px;
   height: 30px;
 }
+
+.UppyDashboard-statusBar {
+  position: absolute;
+  left: 0;
+  bottom: 30px;
+  width: 100%;
+  text-align: center;
+  font-size: 14px;
+  font-weight: normal;
+  color: darken($color-cornflower-blue, 5%);
+}

src/scss/_variables.scss

@@ -9,6 +9,7 @@ $color-green: #7AC824;
 $color-orange: #F6A623;
 $color-yellow: #FFD600;
 $color-white: #fff;
+$color-almost-white: #FAFAFA;
 $color-cornflower-blue: #4A90E2;
 $color-asphalt-gray: #525252;