DEV: Modernize progress-bar component

assets/javascripts/discourse/components/progress-bar.hbs

@@ -1,7 +1,3 @@
-<div class="progress progress-striped {{if this.active 'active'}}">
+<div class="progress-bar {{if this.active 'active'}}">
-  <div
+  <div class="progress-bar-inner" style={{this.barStyle}}></div>
-    class="progress-bar progress-bar-striped
-      {{if this.active 'progress-bar-animated'}}"
-    style={{barStyle}}
-  ></div>
 </div>

assets/javascripts/discourse/components/progress-bar.js

@@ -1,23 +1,18 @@
-import Component from "@ember/component";
+import Component from "@glimmer/component";
-import { computed } from "@ember/object";
 import { htmlSafe } from "@ember/template";
 
-export default Component.extend({
+export default class ProgressBar extends Component {
-  tagName: "",
+  get active() {
+    return parseInt(this.args.percent, 10) !== 100;
+  }
 
-  active: computed("percent", function () {
+  get barStyle() {
-    return parseInt(this.get("percent"), 10) !== 100;
+    let percent = parseInt(this.args.percent, 10);
-  }),
 
-  barStyle: computed("percent", function () {
+    if (percent > 100) {
-    let percent = parseInt(this.get("percent"), 10);
+      percent = 100;
-    if (percent > 0) {
-      if (percent > 100) {
-        percent = 100;
-      }
-      return htmlSafe("width: " + this.get("percent") + "%");
     }
 
-    return htmlSafe("");
+    return htmlSafe(`width: ${percent}%`);
-  }),
+  }
-});
+}

assets/javascripts/discourse/templates/upgrade-show.hbs

@@ -1,6 +1,6 @@
 <h3>Upgrade {{title}}</h3>
 
-{{progress-bar percent=percent}}
+<ProgressBar @percent={{this.percent}} />
 
 {{#if complete}}
   <p>Upgrade completed successfully!</p>

assets/stylesheets/common/docker-manager.scss

@@ -90,9 +90,20 @@
     }
   }
 
-  div.progress {
+  .progress-bar {
-    margin-top: 20px;
+    background: var(--primary-100);
-    margin-bottom: 20px;
+    border: 1px solid var(--primary-200);
+    height: 1.5rem;
+    margin: 1rem 0;
+
+    &-inner {
+      background: var(--tertiary-400);
+      height: 100%;
+    }
+
+    &.active &-inner {
+      background: var(--tertiary-800);
+    }
   }
 
   th {