diff --git a/client/galaxy/scripts/mvc/user/user-quotameter.js b/client/galaxy/scripts/mvc/user/user-quotameter.js
index 82b2858a9e5..6d2e80720ec 100644
--- a/client/galaxy/scripts/mvc/user/user-quotameter.js
+++ b/client/galaxy/scripts/mvc/user/user-quotameter.js
@@ -1,6 +1,10 @@
+import * as Backbone from "backbone";
+import * as _ from "underscore";
 import baseMVC from "mvc/base-mvc";
 import _l from "utils/localization";
 
+/* global $ */
+
 var logNamespace = "user";
 //==============================================================================
 /** @class View to display a user's disk/storage usage
@@ -68,7 +72,7 @@ var UserQuotaMeter = Backbone.View.extend(baseMVC.LoggableMixin).extend(
             // OVER QUOTA: color the quota bar and show the quota error message
             if (this.isOverQuota()) {
                 //this.log( '\t over quota' );
-                $bar.attr("class", "progress-bar progress-bar-danger");
+                $bar.attr("class", "progress-bar bg-danger");
                 $meter.find(".quota-meter-text").css("color", "white");
                 //TODO: only trigger event if state has changed
                 this.trigger("quota:over", modelJson);
@@ -76,13 +80,13 @@ var UserQuotaMeter = Backbone.View.extend(baseMVC.LoggableMixin).extend(
                 // APPROACHING QUOTA: color the quota bar
             } else if (percent >= this.options.warnAtPercent) {
                 //this.log( '\t approaching quota' );
-                $bar.attr("class", "progress-bar progress-bar-warning");
+                $bar.attr("class", "progress-bar bg-warning");
                 //TODO: only trigger event if state has changed
                 this.trigger("quota:under quota:under:approaching", modelJson);
 
                 // otherwise, hide/don't use the msg box
             } else {
-                $bar.attr("class", "progress-bar progress-bar-success");
+                $bar.attr("class", "progress-bar bg-success");
                 //TODO: only trigger event if state has changed
                 this.trigger("quota:under quota:under:ok", modelJson);
             }
diff --git a/client/galaxy/style/scss/base.scss b/client/galaxy/style/scss/base.scss
index 4e5aea2a76b..9ddd204641c 100644
--- a/client/galaxy/style/scss/base.scss
+++ b/client/galaxy/style/scss/base.scss
@@ -492,7 +492,6 @@ div.unified-panel-body-background {
     right: 8px;
     height: 16px;
     width: 100px;
-    background-color: $progress-bg;
 }
 
 .quota-meter-bar {
diff --git a/static/style/blue/base.css b/static/style/blue/base.css
index 56de7601e6b..fd5275a6139 100644
--- a/static/style/blue/base.css
+++ b/static/style/blue/base.css
@@ -12824,8 +12824,7 @@ div.unified-panel-body-background {
   top: 8px;
   right: 8px;
   height: 16px;
-  width: 100px;
-  background-color: #e9ecef; }
+  width: 100px; }
 
 .quota-meter-bar {
   position: absolute;