ProgressDrawer styles

yes, @hedgerh, it’s pink

src/scss/_modal.scss

@@ -170,6 +170,7 @@
   padding: 0;
   margin: 0;
   outline: none;
+  cursor: not-allowed;
 }
 
 .UppyModal-next.is-active {

src/scss/_old_modal.scss

@@ -1,58 +0,0 @@
-@mixin clearfix {
-  &:after {
-    content: '';
-    display: table;
-    clear: both;
-  }
-}
-
-.UppyModal * {
-  box-sizing: border-box;
-}
-
-.UppyModal {
-  h1, h2, h3, h4, h5, h6, ul, li {
-    margin: 0;
-    padding: 0;
-  }
-}
-
-
-.UppyModal {
-  @include clearfix;
-  width: 900px;
-  height: 600px;
-  max-width: 90vw;
-  max-height: 90vh;
-  background-color: $color-white;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  z-index: 10000;
-  transform: translate(-50%, -50%);
-  box-shadow: 0 0 13px rgba(0, 0, 0, 0.2);
-}
-
-.UppyModal-close {
-  position: absolute;
-  top: 15px;
-  right: 15px;
-}
-
-.UppyModal-tabList {
-  width: 15%;
-  float: left;
-  list-style: none;
-}
-
-.UppyModal-content {
-  width: 85%;
-  float: left;
-}
-
-.UppyModal-progressContainer {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}

src/scss/_progressdrawer.scss

@@ -3,7 +3,88 @@
   bottom: 30px;
   right: 30px;
   z-index: $zIndex-4;
-  width: 300px;
-  height: 150px;
+  width: 350px;
+  height: 200px;
   background-color: $color-white;
 }
+
+.UppyProgressDrawer-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.UppyProgressDrawer-item {
+  @include clearfix;
+  height: 40px;
+  line-height: 30px;
+  margin: 0;
+  padding: 0;
+}
+
+.UppyProgressDrawer-item.is-uploaded {
+  .UppyProgressDrawer-itemBar {
+    width: 100%;
+  }
+
+  .UppyProgressDrawer-itemRemove {
+    display: none;
+  }
+
+  .UppyProgressDrawer-itemCheck {
+    display: block;
+  }
+}
+
+.UppyProgressDrawer-itemBar {
+  float: left;
+  width: 90%;
+  height: 100%;
+  background-color: lighten($color-cornflower-blue, 10%);
+  position: relative;
+}
+
+.UppyProgressDrawer-itemCheck {
+  display: none;
+  position: absolute;
+  top: 12px;
+  right: 15px;
+  fill: $color-white;
+}
+
+.UppyProgressDrawer-itemProgress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background-color: $color-pink;
+  // z-index: $zIndex-4;
+}
+
+.UppyProgressDrawer-itemName {
+  color: $color-white;
+  margin: 0;
+  padding: 0;
+  padding: 5px 15px;
+  font-size: 13px;
+  z-index: $zIndex-4;
+  position: relative;
+}
+
+.UppyProgressDrawer-itemRemove {
+  @include reset-button;
+  float: left;
+  width: 10%;
+  height: 100%;
+  padding: 10px;
+  font-size: 20px;
+  line-height: 20px;
+  background-color: $color-pink;
+  color: $color-white;
+  cursor: pointer;
+  transition: background-color .3s;
+
+  &:hover {
+    background-color: darken($color-pink, 10%);
+  }
+}

src/scss/_utils.scss

@@ -12,6 +12,18 @@
   transform: scale(1.05);
 }
 
+@mixin reset-button() {
+  background: none;
+  -webkit-appearance: none;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  outline: none;
+}
+
 // Animations
 
 @keyframes fadeIn {