Update styles

src/scss/_dashboard.scss

@@ -29,7 +29,8 @@
 
 .uppy-Dashboard-inner {
   position: relative;
-  background-color: darken($color-white, 2%);
+  // background-color: darken($color-white, 2%);
+  background-color: $color-white;
   max-width: 100%;
   max-height: 100%;
   width: 100%;
@@ -67,15 +68,10 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    // box-shadow: 0px 0px 20px 7px rgba($color-gray, 0.15);
     box-shadow: 0 5px 15px 4px rgba($color-black, 0.15);
   }
 }
 
-// .uppy-Dashboard--modal[aria-hidden=true] .uppy-Dashboard-inner {
-
-// }
-
 .uppy-Dashboard-close {
   @include reset-button;
   display: none;
@@ -86,16 +82,14 @@
   color: lighten($color-asphalt-gray, 20%);
   transition: all 0.2s;
 
-  &:hover { color: $color-cornflower-blue; }
-
   .UppyIcon {
     width: 12px;
     height: 12px;
   }
 
   .uppy-Dashboard--wide & {
-    top: 10px;
-    right: 8px;
+    top: 12px;
+    right: 10px;
 
     .UppyIcon {
       width: 14px;
@@ -109,10 +103,17 @@
   }
 }
 
+.uppy-Dashboard-close:hover,
+.uppy-Dashboard-close:focus {
+  outline: none;
+  color: $color-cornflower-blue; 
+}
+
+
 .uppy-DashboardTabs {
   padding-top: 7px;
   padding-bottom: 7px;
-  border-bottom: 1px dashed lighten($color-gray, 15%);
+  border-bottom: 1px solid rgba($color-gray, 0.3);
 }
 
 .uppy-DashboardTabs[aria-hidden=true] {
@@ -170,13 +171,14 @@
   // outline: none;
   transition: all 0.3s;
   color: darken($color-gray, 25%);
+}
 
-  &:focus,
-  &:active,
-  &:hover {
+  .uppy-DashboardTab-btn:focus,
+  .uppy-DashboardTab-btn:active,
+  .uppy-DashboardTab-btn:hover {
     color: $color-cornflower-blue;
+    outline: none;
   }
-}
 
 .uppy-DashboardTab-name {
   font-size: 8px;
@@ -252,10 +254,7 @@
 }
 
 .uppy-DashboardContent-titleFile {
-  text-decoration: underline;
-  // overflow: hidden;
-  // display: inline-block;
-  // vertical-align: text-bottom;
+  // text-decoration: underline;
 }
 
 .uppy-DashboardContent-back {
@@ -476,6 +475,15 @@
   }
 }
 
+.uppy-DashboardItem-previewLink {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: $zIndex-3;
+}
+
 .uppy-DashboardItem-sourceIcon {
   display: inline-block;
   vertical-align: middle;
@@ -531,11 +539,12 @@
 
 
 .uppy-DashboardItem-previewIconWrap {
-  height: 85%;
+  height: 80px;
   position: relative;
 }
 
 .uppy-DashboardItem-previewIconBg {
+  width: 100%;
   height: 100%;
   filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 0px 1px);
 }
@@ -545,16 +554,28 @@
   max-height: 55%;
   z-index: $zIndex-1;
   position: absolute;
-  top: 50%;
+  top: 40%;
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translate(-50%, -40%);
 
   .uppy-Dashboard--wide & {
-    width: 40%;
+    width: 35%;
     max-height: 80%;
   }
 }
 
+.uppy-DashboardItem-previewType {
+  position: absolute;
+  bottom: 13px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  text-transform: uppercase;
+  font-size: 10px;
+  letter-spacing: 1px;
+  color: $color-asphalt-gray;
+  z-index: $zIndex-1;
+}
+
 .uppy-DashboardItem-info {
   padding: 10px 19px 0 25px;
   position: relative;
@@ -670,7 +691,6 @@
     width: 20px;
     height: 20px;
     color: lighten($color-asphalt-gray, 8%);
-    // font-size: 20px;
   }
 }
 
@@ -678,9 +698,6 @@
     display: none;
   }
 
-// .uppy-DashboardItem-remove .UppyIcon {
-//   max-width: 100%;
-// }
 
 .uppy-DashboardItem-progress {
   position: absolute;
@@ -769,7 +786,6 @@
 .uppy-DashboardItem .bg {
   stroke: rgba($color-white, 0.4);
   opacity: 0;
-  // transition: all 0.2s;
 }
 
 .uppy-DashboardItem .progress {
@@ -787,7 +803,6 @@
 }
 
 .uppy-DashboardItem .cancel {
-  // stroke: $color-white;
   fill: $color-white;
   opacity: 0;
   transition: all 0.2s;
@@ -857,87 +872,6 @@
   }
 }
 
-// .UppyTotalProgress {
-//   @include reset-button;
-//   width: 70px;
-//   height: 70px;
-//   cursor: pointer;
-// }
-
-// .UppyTotalProgress .UppyIcon {
-//   width: 100%;
-//   height: 100%;
-// }
-
-// .UppyTotalProgress .bg {
-//   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: darken($color-cornflower-blue, 5%);
-//   transition: stroke-dashoffset .5s ease-out;
-//   opacity: 1;
-// }
-
-// .UppyTotalProgress .play {
-//   stroke: darken($color-cornflower-blue, 5%);
-//   fill: darken($color-cornflower-blue, 5%);
-//   transition: all 0.2s;
-//   opacity: 0;
-// }
-
-// .UppyTotalProgress .pause {
-//   stroke: darken($color-cornflower-blue, 5%);
-//   fill: darken($color-cornflower-blue, 5%);
-//   transition: all 0.2s;
-//   opacity: 1;
-// }
-
-// .UppyTotalProgress .check {
-//   fill: $color-white;
-//   transition: all 0.2s;
-//   opacity: 0;
-// }
-
-// .UppyTotalProgress--is-paused {
-//   .pause {
-//     opacity: 0;
-//   }
-//   .play {
-//     opacity: 1;
-//   }
-// }
-
-// .UppyTotalProgress--is-complete {
-//   cursor: default;
-
-//   .pause, .play {
-//     opacity: 0;
-//   }
-
-//   .bg {
-//     stroke: $color-green;
-//     opacity: 1;
-//   }
-
-//   .progress {
-//     stroke: $color-green;
-//     fill: $color-green;
-//     opacity: 1;
-//   }
-//   .check {
-//     opacity: 1;
-//   }
-// }
-
-// .UppyTotalProgress-info {
-//   font-size: 10px;
-//   color: $color-asphalt-gray;
-// }
-
 .uppy-DashboardItem-progressNum {
   position: relative;
   z-index: $zIndex-2;
@@ -952,21 +886,16 @@
 }
 
 .uppy-Dashboard-actions {
-  text-align: center;
-  position: absolute;
-  bottom: 16px;
-  right: 16px;
-  z-index: $zIndex-3;
-
-  .uppy-Dashboard--wide & {
-    bottom: 20px;
-    right: 20px;
-  }
+  height: 75px;
+  border-top: 1px solid rgba($color-gray, 0.2);
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
 }
 
-// .uppy-Dashboard-actions button:nth-child(2) {
-//   margin-top: 10px;
-// }
+.uppy-Dashboard-actionsBtn {
+  margin-right: 10px;
+}
 
 .uppy-Dashboard-pauseResume .UppyIcon {
   width: 100%;
@@ -1034,6 +963,8 @@
 }
 
 .uppy-DashboardFileCard-inner {
+  display: flex;
+  flex-direction: column;
   height: 100%;
   padding-top: 40px;
 
@@ -1043,7 +974,7 @@
 }
 
 .uppy-DashboardFileCard-preview {
-  height: 45%;
+  height: 40%;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1057,11 +988,12 @@
   max-width: 90%;
   max-height: 90%;
   object-fit: cover;
+  border-radius: 3px;
 }
 
 .uppy-DashboardFileCard-info {
   padding: 30px 20px 20px 20px;
-  height: 55%;
+  height: 50%;
   overflow-y: auto;
 }
 
@@ -1069,16 +1001,16 @@
   font-size: 0;
   border: 0;
   padding: 0;
-  max-width: 450px;
+  max-width: 640px;
   margin: auto;
-  margin-bottom: 15px;
+  margin-bottom: 12px;
 }
 
 .uppy-DashboardFileCard-label {
   display: inline-block;
   vertical-align: middle;
-  width: 25%;
-  font-size: 11px;
+  width: 22%;
+  font-size: 12px;
   color: $color-asphalt-gray;
 
   .uppy-Dashboard--wide & {
@@ -1089,40 +1021,11 @@
 .uppy-DashboardFileCard-input {
   display: inline-block;
   vertical-align: middle;
-  width: 75%;
-  border: 0;
-  border-bottom: 1px solid rgba($color-asphalt-gray, 0.3);
+  width: 78%;
   outline: none;
-  font-size: 16px;
+  font-size: 15px;
   line-height: 1.8;
   padding-left: 5px;
   margin: auto;
-
-  // .uppy-Dashboard--wide & {
-  //   font-size: 15px;
-  // }
-}
-
-.uppy-DashboardFileCard-input:focus {
-  border-color: $color-asphalt-gray;
-}
-
-.uppy-DashboardFileCard-done {
-  width: 50px;
-  height: 50px;
-
-  .uppy-Dashboard--wide & {
-    width: 60px;
-    height: 60px;
-  }
-}
-
-.uppy-DashboardFileCard-done .UppyIcon {
-  width: 25px;
-  height: 25px;
-
-  .uppy-Dashboard--wide & {
-    width: 30px;
-    height: 30px;
-  }
+  padding: 8px 12px;
 }

src/scss/_provider.scss

@@ -14,7 +14,7 @@
 }
 
 .uppy-Provider-authTitle {
-  font-size: 22px;
+  font-size: 20px;
   line-height: 1.35;
   font-weight: 300;
   margin-bottom: 30px;
@@ -24,22 +24,7 @@
 }
 
 .uppy-Provider-authBtn {
-  @include reset-button;
-  border-radius: 6px;
-  background-color: $color-cornflower-blue;
-  color: $color-white;
-  font-size: 20px;
-  font-weight: 400;
-  padding: 12px 46px;
-  transition: background-color 0.3s;
-  text-decoration: none;
-  margin-bottom: 20px;
-  cursor: pointer;
-
-  &:hover {
-    background-color: darken($color-cornflower-blue, 10%);
-    color: $color-white;
-  }
+  font-size: 22px;
 }
 
 .uppy-Provider-breadcrumbs button {
@@ -61,10 +46,6 @@
   margin: 0;
 }
 
-// .uppy-Provider-breadcrumbs li:not(:last-child):after {
-//   content: ' /';
-// }
-
 .uppy-Provider-breadcrumbs li ~ li:before {
   content: '/';
   padding: 0 10px;

src/scss/_statusbar.scss

@@ -3,11 +3,11 @@
   height: 30px;
   line-height: 30px;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 400;
   color: $color-white;
-  background-color: rgba($color-black, 0.8);
-  box-shadow: 1px 1px 4px 0 rgba($color-asphalt-gray, 0.3);
-  // overflow-x: hidden;
+  background-color: $color-black;
+  // box-shadow: 1px 1px 4px 0 rgba($color-asphalt-gray, 0.3);
+  // border-top: 1px solid rgba($color-gray, 0.2);
   z-index: $zIndex-2;
   transition: height .2s;
 }
@@ -15,7 +15,6 @@
   .uppy-Dashboard--wide .uppy-StatusBar {
     height: 45px;
     font-size: 14px;
-    // line-height: 40px;
   }
 
   // .uppy-StatusBar.uppy-StatusBar--detailedProgress  {
@@ -44,7 +43,7 @@
 .uppy-StatusBar:not([aria-hidden=true]).is-waiting {
   background-color: $color-white;
   height: 65px;
-  // line-height: 65px;
+  border-top: 1px solid rgba($color-gray, 0.3);
 }
 
 .uppy-StatusBar-progress {
@@ -128,22 +127,22 @@
   right: initial;
 }
 
-.uppy-StatusBar-actionBtn {
-  @include reset-button;
-  font-size: 11px;
-  line-height: 1em;
-  font-weight: 400;
-  padding: 4px 6px;
-  border-radius: 2px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-  .uppy-Dashboard--wide .uppy-StatusBar-actionBtn {
-    font-size: 13px;
-    padding: 7px 10px;
-    border-radius: 4px;
-  }
+// .uppy-StatusBar-actionBtn {
+//   @include reset-button;
+//   font-size: 11px;
+//   line-height: 1em;
+//   font-weight: 400;
+//   padding: 4px 6px;
+//   border-radius: 2px;
+//   cursor: pointer;
+//   transition: all 0.2s;
+// }
+
+//   .uppy-Dashboard--wide .uppy-StatusBar-actionBtn {
+//     font-size: 13px;
+//     padding: 7px 10px;
+//     border-radius: 4px;
+//   }
 
   .uppy-StatusBar-actionBtn:not(:last-child) {
     margin-right: 5px;