More tinkering with ProgressDrawer

src/plugins/ProgressDrawer.js

@@ -33,7 +33,7 @@ export default class ProgressDrawer extends Plugin {
     return yo`<li id="${file.id}" class="UppyProgressDrawer-item"
                   title="${file.name}">
       <div class="UppyProgressDrawer-itemInfo">
-        <svg width="32" height="44" viewBox="0 0 21 29">
+        <svg width="34" height="44" viewBox="0 0 21 29">
           <path d="M2.473.31C1.44.31.59 1.21.59 2.307V26.31c0 1.097.85 2 1.883 2H18.71c1.03 0 1.88-.903 1.88-2V7.746a.525.525 0 0 0-.014-.108v-.015a.51.51 0 0 0-.014-.03v-.017a.51.51 0 0 0-.015-.03.482.482 0 0 0-.014-.016v-.015a.482.482 0 0 0-.015-.015.51.51 0 0 0-.014-.03.482.482 0 0 0-.014-.017.51.51 0 0 0-.015-.03.483.483 0 0 0-.03-.03L13.636.45a.47.47 0 0 0-.118-.093.448.448 0 0 0-.044-.015.448.448 0 0 0-.044-.016.448.448 0 0 0-.045-.015.44.44 0 0 0-.073 0H2.474zm0 .99h10.372v4.943c0 1.097.85 2 1.88 2h4.932V26.31c0 .56-.42 1.007-.948 1.007H2.472c-.527 0-.95-.446-.95-1.007V2.308c0-.56.423-1.008.95-1.008zm11.305.667l4.843 4.927.352.357h-4.246c-.527 0-.948-.446-.948-1.007V1.967z"
                 fill="#F6A623"
                 fill-rule="evenodd" />
@@ -55,8 +55,11 @@ export default class ProgressDrawer extends Plugin {
             : yo`<span>${file.name}</span>`
           }
           <br>
-          <span>${file.progress > 0 && file.progress < 100 ? file.progress + '%' : ''}</span>
         </h4>
+        <h5 class="UppyProgressDrawer-itemStatus">
+          ${file.progress > 0 && file.progress < 100 ? 'Uploading… ' + file.progress + '%' : ''}
+          ${file.progress === 100 ? 'Completed' : ''}
+        </h5>
           ${isUploaded ? checkIcon : ''}
           ${isUploaded
             ? ''

src/scss/_progressdrawer.scss

@@ -7,6 +7,7 @@
   height: 200px;
   background-color: $color-white;
   box-shadow: 0 5px 30px rgba($color-black, 0.25);
+  border-radius: 6px;
   overflow: hidden;
   transition: all .3s;
 
@@ -32,7 +33,6 @@
   overflow-y: auto;
   height: 160px;
   padding-top: 10px;
-  // position: relative;
   // TODO: list scroll inner shadow?
   // &:before {
   //   content: '';
@@ -47,20 +47,15 @@
 
 .UppyProgressDrawer-item {
   @include clearfix;
-  // height: 40px;
-  // line-height: 30px;
   margin: 0;
-  padding: 0 10px;
+  padding: 0 15px;
   position: relative;
   margin-bottom: 10px;
-  // background-color: $color-cornflower-blue;
 }
 
 .UppyProgressDrawer-itemInfo {
   float: left;
   width: 12%;
-  // height: 40px;
-  // border-right: 1px solid white;
 }
 
 .UppyProgressDrawer-itemIcon {
@@ -83,41 +78,49 @@
   float: left;
   width: 88%;
   height: 40px;
-  padding-left: 10px;
+  padding-left: 8px;
   position: relative;
 }
 
 .UppyProgressDrawer-itemProgress {
-  // position: absolute;
-  // left: 0;
-  // bottom: 0;
   height: 2px;
   background-color: $color-cornflower-blue;
   width: 0;
-  transition: width 0.4s ease;
+  transition: width 0.3s ease;
 }
 
 .UppyProgressDrawer-itemName {
+  width: 80%;
   margin: 0;
   padding: 0;
-  font-size: 13px;
+  font-size: 12px;
   z-index: $zIndex-4;
   position: relative;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  margin-bottom: 3px;
 }
 
 .UppyProgressDrawer-itemName a {
   text-decoration: underline;
 }
 
+.UppyProgressDrawer-itemStatus {
+  margin: 0;
+  height: 15px;
+  font-weight: normal;
+  line-height: 1;
+  color: $color-gray;
+  margin-bottom: 3px;
+}
+
 .UppyProgressDrawer-itemRemove {
   @include reset-button;
   width: 40px;
   height: 100%;
   padding: 10px;
-  font-size: 20px;
+  font-size: 24px;
   line-height: 20px;
   // color: $color-white;
   cursor: pointer;
@@ -130,11 +133,10 @@
 .UppyProgressDrawer-itemCheck {
   position: absolute;
   top: 12px;
-  right: 15px;
-  fill: darken($color-cornflower-blue, 20%);
+  right: 0;
+  fill: $color-green;
   background-color: $color-white;
   border-radius: 50%;
-  padding: 2px;
 }
 
 .UppyProgressDrawer-upload {

src/scss/_variables.scss

@@ -2,8 +2,9 @@
 // Colors
 
 $color-black: #000;
-$color-gray: #ccc;
+$color-gray: #b0b0b0;
 $color-pink: #e02177;
+$color-green: #27ae60;
 $color-white: #fff;
 $color-cornflower-blue: #78bdf2;
 $color-asphalt-gray: #525252;