From aaf644d4285d1052729693f44574c5a795a1c405 Mon Sep 17 00:00:00 2001
From: Steven Wallace <steven@thewallaces.ca>
Date: Sun, 29 Oct 2017 23:14:53 -0700
Subject: [PATCH] Changed progress bar width to be a percentage

---
 .../__snapshots__/index.spec.js.snap          | 52 ++++++++++++++-----
 src/components/Torrent/ProgressBar/index.js   |  2 +-
 2 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/src/components/Torrent/ProgressBar/__tests__/__snapshots__/index.spec.js.snap b/src/components/Torrent/ProgressBar/__tests__/__snapshots__/index.spec.js.snap
index 12047a4..bbc00d8 100644
--- a/src/components/Torrent/ProgressBar/__tests__/__snapshots__/index.spec.js.snap
+++ b/src/components/Torrent/ProgressBar/__tests__/__snapshots__/index.spec.js.snap
@@ -1,35 +1,63 @@
 exports[`test ProgressBar leeching 1`] = `
 <div
   className="progressBar leeching">
-  <progress
-    max="100"
-    value={50} />
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow={50}
+    role="progressbar"
+    style={
+      Object {
+        "width": "50%",
+      }
+    } />
 </div>
 `;
 
 exports[`test ProgressBar magnet 1`] = `
 <div
   className="progressBar magnet">
-  <progress
-    max="100"
-    value={50} />
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow={50}
+    role="progressbar"
+    style={
+      Object {
+        "width": "50%",
+      }
+    } />
 </div>
 `;
 
 exports[`test ProgressBar paused 1`] = `
 <div
   className="progressBar paused">
-  <progress
-    max="100"
-    value={50} />
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow={50}
+    role="progressbar"
+    style={
+      Object {
+        "width": "50%",
+      }
+    } />
 </div>
 `;
 
 exports[`test ProgressBar seeding 1`] = `
 <div
   className="progressBar seeding">
-  <progress
-    max="100"
-    value={50} />
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow={50}
+    role="progressbar"
+    style={
+      Object {
+        "width": "50%",
+      }
+    } />
 </div>
 `;
diff --git a/src/components/Torrent/ProgressBar/index.js b/src/components/Torrent/ProgressBar/index.js
index d7bdd82..c41fa9d 100644
--- a/src/components/Torrent/ProgressBar/index.js
+++ b/src/components/Torrent/ProgressBar/index.js
@@ -50,7 +50,7 @@ function ProgressBar({ torrent }) {
         aria-valuenow={getPercentage(torrent)}
         aria-valuemin='0'
         aria-valuemax="100"
-        style={{ width: getPercentage(torrent) }}
+        style={{ width: getPercentage(torrent) + '%' }}
       />
     </div>
   );