From 1e7e4cafd4c01b5391cf3cf426b0f06a1121e247 Mon Sep 17 00:00:00 2001
From: Noam Okman <noamokman@gmail.com>
Date: Mon, 26 Sep 2016 01:42:07 +0300
Subject: [PATCH] Use the progress bar from Material UI (#967)

---
 src/renderer/pages/torrent-list-page.js | 17 ++++++++++++++++-
 static/main.css                         | 16 ----------------
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/renderer/pages/torrent-list-page.js b/src/renderer/pages/torrent-list-page.js
index 4feb6dd3..dfb3abd0 100644
--- a/src/renderer/pages/torrent-list-page.js
+++ b/src/renderer/pages/torrent-list-page.js
@@ -1,6 +1,7 @@
 const React = require('react')
 const prettyBytes = require('prettier-bytes')
 const Checkbox = require('material-ui/Checkbox').default
+const LinearProgress = require('material-ui/LinearProgress').default
 
 const TorrentSummary = require('../lib/torrent-summary')
 const TorrentPlayer = require('../lib/torrent-player')
@@ -120,7 +121,21 @@ module.exports = class TorrentList extends React.Component {
 
     function renderProgressBar () {
       const progress = Math.floor(100 * prog.progress)
-      return (<progress value={progress} max='100'>{progress}%</progress>)
+      const styles = {
+        wrapper: {
+          display: 'inline-block',
+          marginRight: '8px'
+        },
+        progress: {
+          height: '8px',
+          width: '60px'
+        }
+      }
+      return (
+        <div style={styles.wrapper}>
+          <LinearProgress style={styles.progress} mode='determinate' value={progress} />
+        </div>
+      )
     }
 
     function renderPercentProgress () {
diff --git a/static/main.css b/static/main.css
index 1e5137e2..2a400ff0 100644
--- a/static/main.css
+++ b/static/main.css
@@ -398,22 +398,6 @@ textarea,
   margin-bottom: 6px;
 }
 
-progress {
-  width: 60px;
-  margin-right: 8px;
-  -webkit-appearance: none;
-  opacity: 0.8;
-}
-
-progress::-webkit-progress-bar {
-  background-color: #888;
-  border-radius: 2px;
-}
-
-progress::-webkit-progress-value {
-  background-color: #eee;
-}
-
 /*
  * TORRENT LIST: ERRORS
  */