diff --git a/app/assets/stylesheets/direct_uploads.scss b/app/assets/stylesheets/direct_uploads.scss
index 54fa203b1..73785f9cc 100644
--- a/app/assets/stylesheets/direct_uploads.scss
+++ b/app/assets/stylesheets/direct_uploads.scss
@@ -11,7 +11,7 @@
 }
 
 .direct-upload--pending {
-  opacity: 0.6;
+  opacity: 0.7;
 }
 
 .direct-upload__progress {
@@ -19,18 +19,21 @@
   top: 0;
   left: 0;
   bottom: 0;
-  opacity: 0.2;
-  background: #0076ff;
+  background-color: var(--background-contrast-grey);
   transition: width 120ms ease-out, opacity 60ms 60ms ease-in;
   transform: translate3d(0, 0, 0);
 }
 
+.direct-upload__filename {
+  position: relative; // set a position so it appears above the progress bar
+}
+
 .direct-upload--complete .direct-upload__progress {
-  opacity: 0.4;
+  background-color: var(--background-overlap-grey);
 }
 
 .direct-upload--error {
-  border-color: red;
+  border-color: var(--border-plain-error);
 }
 
 input[type=file][data-direct-upload-url][disabled],