From 0e02df23457dfba8eb35a1375df8927a6be2ff98 Mon Sep 17 00:00:00 2001
From: Daan Wijns <dw.daanwijns@gmail.com>
Date: Sat, 29 Aug 2020 09:04:35 +0200
Subject: [PATCH] Development (#25)

---
 .github/workflows/prod-deploy copy.yml        |  28 ---
 .../workflows/{dev-deploy.yml => release.yml} |  24 +--
 README.md                                     |   2 +-
 package-lock.json                             | 132 +++++++------
 package.json                                  |  10 +-
 src/App.vue                                   |   3 +-
 src/assets/styles.scss                        |  59 ++++++
 src/assets/styles/SettingsTab.scss            |  17 ++
 src/components/Modals/OldUIModal.vue          |  99 ----------
 .../Modals/SettingsModal/Tabs/BitTorrent.vue  |  16 +-
 .../Modals/SettingsModal/Tabs/Downloads.vue   |  21 +-
 .../Modals/SettingsModal/Tabs/VueTorrent.vue  |  10 +-
 .../Modals/SettingsModal/Tabs/WebUI.vue       |   7 +-
 src/components/SettingsModal/BitTorrent.vue   | 185 ------------------
 src/components/SettingsModal/Downloads.vue    | 115 -----------
 .../SettingsModal/SettingsModal.vue           |  75 -------
 src/components/SettingsModal/WebUI.vue        |  88 ---------
 src/components/Torrent.vue                    | 179 ++++++++---------
 src/filters.js                                |   1 -
 src/helpers.js                                | 107 ++++++++++
 src/main.js                                   |   5 +-
 src/models/Status.js                          |   1 +
 src/models/torrent.js                         |  10 +-
 src/views/Dashboard.vue                       | 109 +----------
 24 files changed, 372 insertions(+), 931 deletions(-)
 delete mode 100644 .github/workflows/prod-deploy copy.yml
 rename .github/workflows/{dev-deploy.yml => release.yml} (53%)
 create mode 100644 src/assets/styles/SettingsTab.scss
 delete mode 100644 src/components/Modals/OldUIModal.vue
 delete mode 100644 src/components/SettingsModal/BitTorrent.vue
 delete mode 100644 src/components/SettingsModal/Downloads.vue
 delete mode 100644 src/components/SettingsModal/SettingsModal.vue
 delete mode 100644 src/components/SettingsModal/WebUI.vue

diff --git a/.github/workflows/prod-deploy copy.yml b/.github/workflows/prod-deploy copy.yml
deleted file mode 100644
index b309e188..00000000
--- a/.github/workflows/prod-deploy copy.yml	
+++ /dev/null
@@ -1,28 +0,0 @@
-name: Build & Release
-on:
-    push:
-        branches:
-            - master
-jobs:
-    github-release-production:
-        runs-on: ubuntu-latest
-        steps:
-            - uses: actions/checkout@master
-            - name: Install & build
-              uses: actions/setup-node@master
-            - run: npm install
-            - run: npm run build
-            - name: Zip it
-              uses: montudor/action-zip@v0.1.0
-              with:
-                  args: zip -qq -r ./release.zip ./vuetorrent
-            - name: Get Version
-              run: echo ::set-env name=VERSION::$(jq -r .version package.json)
-            - name: Push release
-              uses: 'marvinpinto/action-automatic-releases@latest'
-              with:
-                  repo_token: '${{ secrets.GITHUB_TOKEN }}'
-                  automatic_release_tag: 'prod-v${{ env.VERSION }}'
-                  prerelease: true
-                  title: 'Stable Build v${{ env.VERSION }}'
-                  files: release.zip
diff --git a/.github/workflows/dev-deploy.yml b/.github/workflows/release.yml
similarity index 53%
rename from .github/workflows/dev-deploy.yml
rename to .github/workflows/release.yml
index fe619e5c..ad58fe02 100644
--- a/.github/workflows/dev-deploy.yml
+++ b/.github/workflows/release.yml
@@ -1,10 +1,10 @@
-name: Build & Release
+name: Build release
 on:
-    push:
-        branches:
-            - development
+    release:
+        types: [published, edited]
+
 jobs:
-    github-release-development:
+    build-release:
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@master
@@ -18,10 +18,12 @@ jobs:
                   args: zip -qq -r ./release.zip ./vuetorrent
             - name: Get Version
               run: echo ::set-env name=VERSION::$(jq -r .version package.json)
-            - name: Push release
-              uses: 'marvinpinto/action-automatic-releases@latest'
+            - name: Upload
+              uses: actions/upload-release-asset@v1.0.1
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
               with:
-                  repo_token: '${{ secrets.GITHUB_TOKEN }}'
-                  automatic_release_tag: 'dev-v${{ env.VERSION }}'
-                  title: 'Development Build v${{ env.VERSION }}'
-                  files: release.zip
+                  upload_url: ${{ github.event.release.upload_url }}
+                  asset_path: ./release.zip
+                  asset_name: release.zip
+                  asset_content_type: application/zip
diff --git a/README.md b/README.md
index 4a1decb8..d37a31d9 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@ The sleekest looking WEBUI for qBittorrent made with Vuejs!
 
 ## Screenshots
 
-<p  align="center">
+<p  align="center">w
 <a  href="https://imgur.com/xgwECT2.png"><img  src="https://imgur.com/xgwECT2.png"  title="Desktop"  alt="Desktop Screenshot" ></a>
 </p>
 
diff --git a/package-lock.json b/package-lock.json
index b14f59bd..ef3ef31e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
     "name": "vuetorrent",
-    "version": "0.1.1",
+    "version": "0.1.3",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
@@ -1519,10 +1519,13 @@
                     "dev": true
                 },
                 "serialize-javascript": {
-                    "version": "3.0.0",
-                    "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-3.0.0.tgz",
-                    "integrity": "sha512-skZcHYw2vEX4bw90nAr2iTTsz6x2SrHEnfxgKYmZlvJYBEZrvbKtobJWlQ20zczKb3bsHHXXTYt48zBA7ni9cw==",
-                    "dev": true
+                    "version": "3.1.0",
+                    "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-3.1.0.tgz",
+                    "integrity": "sha512-JIJT1DGiWmIKhzRsG91aS6Ze4sFUrYbltlkg2onR5OrnNM02Kl/hnY/T4FN2omvyeBbQmMJv+K4cPOpGzOTFBg==",
+                    "dev": true,
+                    "requires": {
+                        "randombytes": "^2.1.0"
+                    }
                 },
                 "source-map": {
                     "version": "0.6.1",
@@ -1995,9 +1998,9 @@
             }
         },
         "apexcharts": {
-            "version": "3.19.3",
-            "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.19.3.tgz",
-            "integrity": "sha512-pECgHHNR/etDW2SLUTA58ElrrEyUrhQsEgSiBJCLTwgJ8GMPHA/uSiI5pUJ2jy9+v2FY8Tj+8suH4CCCl3T/pQ==",
+            "version": "3.20.0",
+            "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.20.0.tgz",
+            "integrity": "sha512-DuQ9SlFPJBJwamYudzwf/Z6KMaIRUhnVBQk/TBa3mXzN2SwS3GgGz7V39OS1GfcPlPUTTy8vXv91M8pYmfFkCg==",
             "requires": {
                 "svg.draggable.js": "^2.2.2",
                 "svg.easing.js": "^2.0.0",
@@ -3459,9 +3462,9 @@
             "dev": true
         },
         "copy-webpack-plugin": {
-            "version": "5.1.1",
-            "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-5.1.1.tgz",
-            "integrity": "sha512-P15M5ZC8dyCjQHWwd4Ia/dm0SgVvZJMYeykVIVYXbGyqO4dWB5oyPHp9i7wjwo5LhtlhKbiBCdS2NvM07Wlybg==",
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-5.1.2.tgz",
+            "integrity": "sha512-Uh7crJAco3AjBvgAy9Z75CjK8IG+gxaErro71THQ+vv/bl4HaQcpkexAY8KVW/T6D2W2IRr+couF/knIRkZMIQ==",
             "dev": true,
             "requires": {
                 "cacache": "^12.0.3",
@@ -3474,7 +3477,7 @@
                 "normalize-path": "^3.0.0",
                 "p-limit": "^2.2.1",
                 "schema-utils": "^1.0.0",
-                "serialize-javascript": "^2.1.2",
+                "serialize-javascript": "^4.0.0",
                 "webpack-log": "^2.0.0"
             },
             "dependencies": {
@@ -3551,6 +3554,15 @@
                         "ajv-keywords": "^3.1.0"
                     }
                 },
+                "serialize-javascript": {
+                    "version": "4.0.0",
+                    "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+                    "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+                    "dev": true,
+                    "requires": {
+                        "randombytes": "^2.1.0"
+                    }
+                },
                 "slash": {
                     "version": "1.0.0",
                     "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
@@ -3897,9 +3909,9 @@
             }
         },
         "dayjs": {
-            "version": "1.8.29",
-            "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.8.29.tgz",
-            "integrity": "sha512-Vm6teig8ZWK7rH/lxzVGxZJCljPdmUr6q/3f4fr5F0VWNGVkZEjZOQJsAN8hUHUqn+NK4XHNEpJZS1MwLyDcLw=="
+            "version": "1.8.34",
+            "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.8.34.tgz",
+            "integrity": "sha512-Olb+E6EoMvdPmAMq2QoucuyZycKHjTlBXmRx8Ada+wGtq4SIXuDCdtoaX4KkK0yjf1fJLnwXQURr8gQKWKaybw=="
         },
         "de-indent": {
             "version": "1.0.2",
@@ -4405,9 +4417,9 @@
             "integrity": "sha512-CLQaFuvkKqR9FD2G3cJrr1fV7DRMXiAKWLP2F8cxtvvtzAS7Tubt0kF47/m+uE61kiT+I7ZEn7HqLnmWdOhmuA=="
         },
         "elliptic": {
-            "version": "6.5.2",
-            "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz",
-            "integrity": "sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==",
+            "version": "6.5.3",
+            "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
+            "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
             "dev": true,
             "requires": {
                 "bn.js": "^4.4.0",
@@ -4420,9 +4432,9 @@
             },
             "dependencies": {
                 "bn.js": {
-                    "version": "4.11.8",
-                    "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz",
-                    "integrity": "sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==",
+                    "version": "4.11.9",
+                    "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
+                    "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==",
                     "dev": true
                 }
             }
@@ -6936,9 +6948,9 @@
             }
         },
         "lodash": {
-            "version": "4.17.15",
-            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-            "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
+            "version": "4.17.20",
+            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
+            "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
             "dev": true
         },
         "lodash.defaultsdeep": {
@@ -7385,9 +7397,9 @@
             }
         },
         "mri": {
-            "version": "1.1.5",
-            "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.5.tgz",
-            "integrity": "sha512-d2RKzMD4JNyHMbnbWnznPaa8vbdlq/4pNZ3IgdaGrVbBhebBsGUUE/6qorTMYNS6TwuH3ilfOlD2bf4Igh8CKg==",
+            "version": "1.1.6",
+            "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz",
+            "integrity": "sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==",
             "dev": true
         },
         "ms": {
@@ -8973,9 +8985,9 @@
             "dev": true
         },
         "prettier": {
-            "version": "2.0.5",
-            "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.5.tgz",
-            "integrity": "sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==",
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.1.1.tgz",
+            "integrity": "sha512-9bY+5ZWCfqj3ghYBLxApy2zf6m+NJo5GzmLTpr9FsApsfjriNnS2dahWReHMi7qNPhhHl9SYHJs2cHZLgexNIw==",
             "dev": true
         },
         "prettier-linter-helpers": {
@@ -8998,9 +9010,9 @@
             }
         },
         "pretty-quick": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/pretty-quick/-/pretty-quick-2.0.1.tgz",
-            "integrity": "sha512-y7bJt77XadjUr+P1uKqZxFWLddvj3SKY6EU4BuQtMxmmEFSMpbN132pUWdSG1g1mtUfO0noBvn7wBf0BVeomHg==",
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/pretty-quick/-/pretty-quick-2.0.2.tgz",
+            "integrity": "sha512-aLb6vtOTEfJDwi1w+MBTeE20GwPVUYyn6IqNg6TtGpiOB1W3y6vKcsGFjqGeaaEtQgMLSPXTWONqh33UBuwG8A==",
             "dev": true,
             "requires": {
                 "chalk": "^2.4.2",
@@ -9012,9 +9024,9 @@
             },
             "dependencies": {
                 "cross-spawn": {
-                    "version": "7.0.2",
-                    "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.2.tgz",
-                    "integrity": "sha512-PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw==",
+                    "version": "7.0.3",
+                    "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+                    "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
                     "dev": true,
                     "requires": {
                         "path-key": "^3.1.0",
@@ -9050,18 +9062,18 @@
                     }
                 },
                 "get-stream": {
-                    "version": "5.1.0",
-                    "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.1.0.tgz",
-                    "integrity": "sha512-EXr1FOzrzTfGeL0gQdeFEvOMm2mzMOglyiOXSTpPC+iAjAKftbr3jpCMWynogwYnM+eSj9sHGc6wjIcDvYiygw==",
+                    "version": "5.2.0",
+                    "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+                    "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
                     "dev": true,
                     "requires": {
                         "pump": "^3.0.0"
                     }
                 },
                 "ignore": {
-                    "version": "5.1.6",
-                    "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.6.tgz",
-                    "integrity": "sha512-cgXgkypZBcCnOgSihyeqbo6gjIaIyDqPQB7Ra4vhE9m6kigdGoQDMHjviFhRZo3IMlRy6yElosoviMs5YxZXUA==",
+                    "version": "5.1.8",
+                    "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
+                    "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
                     "dev": true
                 },
                 "is-stream": {
@@ -9095,9 +9107,9 @@
                     }
                 },
                 "onetime": {
-                    "version": "5.1.0",
-                    "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.0.tgz",
-                    "integrity": "sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==",
+                    "version": "5.1.2",
+                    "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+                    "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
                     "dev": true,
                     "requires": {
                         "mimic-fn": "^2.1.0"
@@ -11730,9 +11742,9 @@
             "dev": true
         },
         "vue": {
-            "version": "2.6.11",
-            "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
-            "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
+            "version": "2.6.12",
+            "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
+            "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
         },
         "vue-apexcharts": {
             "version": "1.6.0",
@@ -11740,9 +11752,9 @@
             "integrity": "sha512-sT6tuVTLBwfH3TA7azecDNS/W70bmz14ZJI7aE7QIqcG9I6OywyH7x3hcOeY1v1DxttI8Svc5RuYj4Dd+A5F4g=="
         },
         "vue-async-computed": {
-            "version": "3.8.2",
-            "resolved": "https://registry.npmjs.org/vue-async-computed/-/vue-async-computed-3.8.2.tgz",
-            "integrity": "sha512-If5roOhp/x0WWd0TWRD77YsuFoiIw3MbkcRlIB/FE3TqQCPje52eQp5CV5NN/7B0VAyPuGX5JQa+rc9AOcGAYw=="
+            "version": "3.9.0",
+            "resolved": "https://registry.npmjs.org/vue-async-computed/-/vue-async-computed-3.9.0.tgz",
+            "integrity": "sha512-ac6m/9zxHHNGGKNOU1en8qNk+fAmEbJLuWL7qyQTFuH3vjv3V4urv//QHcVzCobROM6btnaDG2b+XYMncF/ETA=="
         },
         "vue-cli-plugin-vuetify": {
             "version": "2.0.7",
@@ -11838,9 +11850,9 @@
             "integrity": "sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q=="
         },
         "vue-router": {
-            "version": "3.3.4",
-            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.3.4.tgz",
-            "integrity": "sha512-SdKRBeoXUjaZ9R/8AyxsdTqkOfMcI5tWxPZOUX5Ie1BTL5rPSZ0O++pbiZCeYeythiZIdLEfkDiQPKIaWk5hDg=="
+            "version": "3.4.3",
+            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.3.tgz",
+            "integrity": "sha512-BADg1mjGWX18Dpmy6bOGzGNnk7B/ZA0RxuA6qedY/YJwirMfKXIDzcccmHbQI0A6k5PzMdMloc0ElHfyOoX35A=="
         },
         "vue-style-loader": {
             "version": "4.1.2",
@@ -11861,9 +11873,9 @@
             }
         },
         "vue-template-compiler": {
-            "version": "2.6.11",
-            "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz",
-            "integrity": "sha512-KIq15bvQDrcCjpGjrAhx4mUlyyHfdmTaoNfeoATHLAiWB+MU3cx4lOzMwrnUh9cCxy0Lt1T11hAFY6TQgroUAA==",
+            "version": "2.6.12",
+            "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz",
+            "integrity": "sha512-OzzZ52zS41YUbkCBfdXShQTe69j1gQDZ9HIX8miuC9C3rBCk9wIRjLiZZLrmX9V+Ftq/YEyv1JaVr5Y/hNtByg==",
             "dev": true,
             "requires": {
                 "de-indent": "^1.0.2",
@@ -11892,9 +11904,9 @@
             }
         },
         "vuetify": {
-            "version": "2.3.4",
-            "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.3.4.tgz",
-            "integrity": "sha512-vMtCNqv5BhrjfTfIhH2Lptoxx7z/Nu1NfBiZ2oCvI2QbTagMlhF5GMXgbnnyTGIjooFf/ozKznuMxk6tuI5cxw=="
+            "version": "2.3.10",
+            "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.3.10.tgz",
+            "integrity": "sha512-KzL/MhZ7ajubm9kwbdCoA/cRV50RX+a5Hcqiwt7Am1Fni2crDtl2no05UNwKroTfscrYYf07gq3WIFSurPsnCA=="
         },
         "vuex": {
             "version": "3.5.1",
diff --git a/package.json b/package.json
index 3348b593..528e2ceb 100644
--- a/package.json
+++ b/package.json
@@ -15,9 +15,9 @@
         "core-js": "^3.6.4",
         "dayjs": "^1.8.29",
         "register-service-worker": "^1.7.1",
-        "vue": "^2.6.11",
+        "vue": "^2.6.12",
         "vue-apexcharts": "^1.6.0",
-        "vue-async-computed": "^3.8.2",
+        "vue-async-computed": "^3.9.0",
         "vue-context": "^5.2.0",
         "vue-observe-visibility": "^0.4.6",
         "vue-router": "^3.3.4",
@@ -38,12 +38,12 @@
         "eslint-plugin-vue": "^6.2.2",
         "fibers": "^5.0.0",
         "node-sass": "^4.14.1",
-        "prettier": "^2.0.5",
-        "pretty-quick": "^2.0.1",
+        "prettier": "^2.1.1",
+        "pretty-quick": "^2.0.2",
         "sass": "^1.26.10",
         "sass-loader": "^8.0.2",
         "vue-cli-plugin-vuetify": "^2.0.7",
-        "vue-template-compiler": "^2.6.11"
+        "vue-template-compiler": "^2.6.12"
     },
     "browserslist": [
         "> 1%",
diff --git a/src/App.vue b/src/App.vue
index d82549f1..bedad50c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,6 @@
 <template>
     <v-app :style="{ backgroundColor: background }">
         <AddModal />
-        <OldUIModal />
         <SettingsModal />
         <SearchModal />
         <Navbar v-if="isAuthenticated" />
@@ -14,7 +13,7 @@
 <script>
 import { mapState, mapGetters } from 'vuex'
 import Navbar from '@/components/Navbar.vue'
-import SettingsModal from '@/components/SettingsModal/SettingsModal.vue'
+import SettingsModal from '@/components/Modals/SettingsModal/SettingsModal'
 import { isAuthenticated } from '@/services/auth.js'
 
 export default {
diff --git a/src/assets/styles.scss b/src/assets/styles.scss
index 94d589ad..bd0b326b 100644
--- a/src/assets/styles.scss
+++ b/src/assets/styles.scss
@@ -16,3 +16,62 @@
         @content ($dark);
     }
 }
+
+.project.done {
+    border-left: 4px solid #3cd1c2;
+}
+.project.busy {
+    border-left: 4px solid #ffaa2c;
+}
+.project.fail {
+    border-left: 4px solid #f83e70;
+}
+.project.paused {
+    border-left: 4px solid #cfd8dc;
+}
+.project.queued {
+    border-left: 4px solid #2e5eaa;
+}
+.v-chip.done {
+    background: #3cd1c2 !important;
+}
+.v-chip.busy {
+    background: #ffaa2c !important;
+}
+.v-chip.fail {
+    background: #f83e70 !important;
+}
+.v-chip.paused {
+    background: #cfd8dc !important;
+}
+.v-chip.queued {
+    background: #2e5eaa !important;
+}
+.noselect {
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome and Opera */
+}
+.v-chip.queued {
+    background: #2e5eaa !important;
+}
+.noselect {
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome and Opera */
+}
+.pointer {
+    cursor: pointer;
+}
+.truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
diff --git a/src/assets/styles/SettingsTab.scss b/src/assets/styles/SettingsTab.scss
new file mode 100644
index 00000000..ba8998c2
--- /dev/null
+++ b/src/assets/styles/SettingsTab.scss
@@ -0,0 +1,17 @@
+@import '~vuetify/src/styles/styles.sass';
+
+.v-input--selection-controls {
+    padding-top: 0px;
+}
+
+.settings_content {
+    border-left: 2px solid var(--v-search-base);
+    padding-left: 8px;
+}
+
+.box {
+    margin: 2px;
+    padding: 5px;
+    border-radius: 4px;
+    border: 1px solid var(--v-search-base);
+}
diff --git a/src/components/Modals/OldUIModal.vue b/src/components/Modals/OldUIModal.vue
deleted file mode 100644
index 4d9adff1..00000000
--- a/src/components/Modals/OldUIModal.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-    <v-dialog max-width="500px" v-model="dialog">
-        <v-card>
-            <v-container
-                style="min-height: 300px;"
-                :class="`pa-0 project done`"
-            >
-                <v-card-title class="justify-center">
-                    <h2>Settings</h2>
-                </v-card-title>
-                <v-form>
-                    <v-card-actions class="justify-center">
-                        <v-btn
-                            text
-                            @click="switchOldUI"
-                            class="green_accent white--text mx-0 mt-3"
-                            >switch to old ui</v-btn
-                        >
-                    </v-card-actions>
-                </v-form>
-                <v-form class="px-6 mt-3">
-                    <v-container>
-                        <v-switch
-                            class="v-input--reverse v-input--expand"
-                            inset
-                            v-model="freeSpace"
-                            color="green_accent"
-                        >
-                            <template #label>
-                                <span class="grey--text">
-                                    Show Free Space
-                                </span>
-                            </template>
-                        </v-switch>
-                    </v-container>
-                </v-form>
-            </v-container>
-            <v-card-actions class="justify-center pb-5 project done">
-                <v-btn
-                    text
-                    @click="save"
-                    class="green_accent white--text mx-0 mt-3"
-                    >Save</v-btn
-                >
-            </v-card-actions>
-        </v-card>
-    </v-dialog>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import Modal from '@/mixins/Modal'
-import qbit from '@/services/qbit'
-export default {
-    name: 'OldUIModal',
-    mixins: [Modal],
-    methods: {
-        async switchOldUI() {
-            await qbit.switchToOldUi()
-
-            window.location.reload(true)
-        },
-        save() {
-            this.$store.commit('TOGGLE_MODAL', 'olduimodal')
-        }
-    },
-    computed: {
-        ...mapState(['webuiSettings']),
-        freeSpace: {
-            get() {
-                return this.webuiSettings.showFreeSpace
-            },
-            set(val) {
-                this.webuiSettings.showFreeSpace = val
-            }
-        }
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-// Reversed input variant
-::v-deep .v-input--reverse .v-input__slot {
-    flex-direction: row-reverse;
-    justify-content: flex-end;
-    .v-application--is-ltr & {
-        .v-input--selection-controls__input {
-            margin-right: 0;
-            margin-left: 8px;
-        }
-    }
-    .v-application--is-rtl & {
-        .v-input--selection-controls__input {
-            margin-left: 0;
-            margin-right: 8px;
-        }
-    }
-}
-</style>
diff --git a/src/components/Modals/SettingsModal/Tabs/BitTorrent.vue b/src/components/Modals/SettingsModal/Tabs/BitTorrent.vue
index 1d318e2f..e1b48317 100644
--- a/src/components/Modals/SettingsModal/Tabs/BitTorrent.vue
+++ b/src/components/Modals/SettingsModal/Tabs/BitTorrent.vue
@@ -153,19 +153,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.v-input--selection-controls {
-    padding-top: 0px;
-}
-
-.settings_content {
-    border-left: 2px solid black;
-    padding-left: 8px;
-}
-
-.box {
-    margin: 2px;
-    padding: 5px;
-    border-radius: 4px;
-    border: 1px solid black;
-}
+@import '@/assets/styles/SettingsTab.scss';
 </style>
diff --git a/src/components/Modals/SettingsModal/Tabs/Downloads.vue b/src/components/Modals/SettingsModal/Tabs/Downloads.vue
index afdfe0db..34c86042 100644
--- a/src/components/Modals/SettingsModal/Tabs/Downloads.vue
+++ b/src/components/Modals/SettingsModal/Tabs/Downloads.vue
@@ -14,11 +14,6 @@
                         :label="`Do not start the download automatically`"
                         v-model="settings.start_paused_enabled"
                     />
-                    <!-- <v-checkbox
-                        dense
-                        :label="`Delete .torrent files afterwards`"
-                        v-model="settings.lsd"
-                    /> -->
                 </div>
 
                 <v-checkbox
@@ -83,19 +78,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.v-input--selection-controls {
-    padding-top: 0px;
-}
-
-.settings_content {
-    border-left: 2px solid black;
-    padding-left: 8px;
-}
-
-.box {
-    margin: 2px;
-    padding: 5px;
-    border-radius: 4px;
-    border: 1px solid black;
-}
+@import '@/assets/styles/SettingsTab.scss';
 </style>
diff --git a/src/components/Modals/SettingsModal/Tabs/VueTorrent.vue b/src/components/Modals/SettingsModal/Tabs/VueTorrent.vue
index a8dfd07a..89147d6d 100644
--- a/src/components/Modals/SettingsModal/Tabs/VueTorrent.vue
+++ b/src/components/Modals/SettingsModal/Tabs/VueTorrent.vue
@@ -15,11 +15,7 @@
                                 v-model="freeSpace"
                                 color="green_accent"
                             >
-                                <template #label>
-                                    <span class="grey--text">
-                                        Show Free Space
-                                    </span>
-                                </template>
+                                <template #label> Show Free Space </template>
                             </v-switch>
                         </v-container>
                     </v-form>
@@ -47,6 +43,10 @@ export default {
 }
 </script>
 
+<style lang="scss" scoped>
+@import '@/assets/styles/SettingsTab.scss';
+</style>
+
 <style lang="scss" scoped>
 // Reversed input variant
 ::v-deep .v-input--reverse .v-input__slot {
diff --git a/src/components/Modals/SettingsModal/Tabs/WebUI.vue b/src/components/Modals/SettingsModal/Tabs/WebUI.vue
index bb9be9be..052c0979 100644
--- a/src/components/Modals/SettingsModal/Tabs/WebUI.vue
+++ b/src/components/Modals/SettingsModal/Tabs/WebUI.vue
@@ -62,10 +62,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.box {
-    margin: 2px;
-    padding: 5px;
-    border-radius: 4px;
-    border: 1px solid black;
-}
+@import '@/assets/styles/SettingsTab.scss';
 </style>
diff --git a/src/components/SettingsModal/BitTorrent.vue b/src/components/SettingsModal/BitTorrent.vue
deleted file mode 100644
index 475e431c..00000000
--- a/src/components/SettingsModal/BitTorrent.vue
+++ /dev/null
@@ -1,185 +0,0 @@
-<template>
-    <v-container>
-        <v-card flat>
-            <v-card-text>
-                <h3>Privacy</h3>
-                <div class="settings_content ml-5 mr-5">
-                    <v-checkbox
-                        dense
-                        :label="`Enable DHT (decentralized network) to find more peers`"
-                        v-model="settings.dht"
-                    />
-                    <v-checkbox
-                        dense
-                        :label="`Enable Peer Exchange (PeX) to find more peers`"
-                        v-model="settings.pex"
-                    />
-                    <v-checkbox
-                        dense
-                        :label="`Enable Local Peer Discovery to find more peers`"
-                        v-model="settings.lsd"
-                    />
-                    <v-checkbox
-                        dense
-                        :label="`Enable anonymous mode`"
-                        v-model="settings.anonymous_mode"
-                    />
-                </div>
-
-                <v-checkbox
-                    dense
-                    :label="`Torrent Queueing`"
-                    v-model="settings.queueing_enabled"
-                />
-                <div class="settings_content ml-5 mr-5">
-                    <v-text-field
-                        class="mb-2"
-                        outlined
-                        dense
-                        hide-details
-                        :label="`Maximum active downloads`"
-                        :disabled="!settings.queueing_enabled"
-                        v-model="settings.max_active_downloads"
-                    />
-                    <v-text-field
-                        class="mb-2"
-                        outlined
-                        dense
-                        hide-details
-                        :label="`Maximum active uploads`"
-                        :disabled="!settings.queueing_enabled"
-                        v-model="settings.max_active_uploads"
-                    />
-                    <v-text-field
-                        class="mb-2"
-                        outlined
-                        dense
-                        hide-details
-                        :label="`Maximum active torrents`"
-                        :disabled="!settings.queueing_enabled"
-                        v-model="settings.max_active_torrents"
-                    />
-
-                    <v-checkbox
-                        dense
-                        :label="`Do not count slow torrents in these limits`"
-                        v-model="settings.dont_count_slow_torrents"
-                    />
-
-                    <div class="settings_content">
-                        <v-text-field
-                            class="mb-2"
-                            outlined
-                            dense
-                            hide-details
-                            :label="`Download rate threshold KiB/s`"
-                            :disabled="!settings.dont_count_slow_torrents"
-                            v-model="settings.slow_torrent_dl_rate_threshold"
-                        />
-                        <v-text-field
-                            class="mb-2"
-                            outlined
-                            dense
-                            hide-details
-                            :label="`Upload rate threshold KiB/s`"
-                            :disabled="!settings.dont_count_slow_torrents"
-                            v-model="settings.slow_torrent_ul_rate_threshold"
-                        />
-                        <v-text-field
-                            class="mb-2"
-                            outlined
-                            dense
-                            hide-details
-                            :label="`Torrent inactivity timer`"
-                            :disabled="!settings.dont_count_slow_torrents"
-                            v-model="settings.slow_torrent_inactive_timer"
-                        />
-                    </div>
-                </div>
-
-                <h3>Seeding Limits</h3>
-                <div class="settings_content ml-5 mr-5">
-                    <v-row dense>
-                        <v-col cols="10">
-                            <v-checkbox
-                                dense
-                                :label="`When ratio reaches`"
-                                v-model="settings.max_ratio_enabled"
-                            />
-                        </v-col>
-                        <v-col>
-                            <v-text-field
-                                class="mb-2"
-                                outlined
-                                dense
-                                hide-details
-                                :disabled="!settings.max_ratio_enabled"
-                                v-model="settings.max_ratio"
-                            />
-                        </v-col>
-                    </v-row>
-                    <v-row dense>
-                        <v-col cols="10">
-                            <v-checkbox
-                                dense
-                                :label="`When seeding time reaches`"
-                                v-model="settings.max_seeding_time_enabled"
-                            />
-                        </v-col>
-                        <v-col>
-                            <v-text-field
-                                class="mb-2"
-                                outlined
-                                dense
-                                hide-details
-                                :disabled="!settings.max_seeding_time_enabled"
-                                v-model="settings.max_seeding_time"
-                            />
-                        </v-col>
-                    </v-row>
-                </div>
-            </v-card-text>
-            <v-card-actions class="d-flex justify-center">
-                <v-btn color="success" @click="save_settings">Save</v-btn>
-            </v-card-actions>
-        </v-card>
-    </v-container>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import qbit from '@/services/qbit'
-
-export default {
-    name: 'BitTorrent',
-    methods: {
-        async save_settings() {
-            await qbit.setPreferences(this.getSettings())
-        }
-    },
-    computed: {
-        ...mapGetters(['getSettings']),
-        settings() {
-            return this.getSettings()
-        }
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-.v-input--selection-controls {
-    padding-top: 0px;
-}
-
-.settings_content {
-    border-left: 2px solid black;
-    padding-left: 8px;
-}
-
-.box {
-    margin: 2px;
-    padding: 5px;
-    border-radius: 4px;
-    border: 1px solid black;
-}
-</style>
diff --git a/src/components/SettingsModal/Downloads.vue b/src/components/SettingsModal/Downloads.vue
deleted file mode 100644
index f3077824..00000000
--- a/src/components/SettingsModal/Downloads.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<template>
-    <v-container>
-        <v-card flat>
-            <v-card-text>
-                <h3>When adding a torrent</h3>
-                <div class="settings_content ml-5 mr-5">
-                    <v-checkbox
-                        dense
-                        :label="`Create subfolder for torrents with multiple files`"
-                        v-model="settings.create_subfolder_enabled"
-                    />
-                    <v-checkbox
-                        dense
-                        :label="`Do not start the download automatically`"
-                        v-model="settings.start_paused_enabled"
-                    />
-                    <!-- <v-checkbox
-                        dense
-                        :label="`Delete .torrent files afterwards`"
-                        v-model="settings.lsd"
-                    /> -->
-                </div>
-
-                <v-checkbox
-                    dense
-                    :label="`Pre-allocate disk space for all files`"
-                    v-model="settings.preallocate_all"
-                />
-                <v-checkbox
-                    dense
-                    :label="` Append .!qB extension to incomplete files`"
-                    v-model="settings.incomplete_files_ext"
-                />
-
-                <h3>Saving Management</h3>
-                <div class="settings_content ml-5 mr-5">
-                    <v-row dense>
-                        <v-col cols="5" class="d-flex align-center">
-                            <h4>Default Save Path</h4>
-                        </v-col>
-                        <v-col>
-                            <v-text-field
-                                class="mb-2"
-                                outlined
-                                dense
-                                hide-details
-                                v-model="settings.save_path"
-                            />
-                        </v-col>
-                    </v-row>
-                    <v-row dense>
-                        <v-col cols="5">
-                            <v-checkbox
-                                dense
-                                :label="`Keep incomplete torrents in:`"
-                                v-model="settings.temp_path_enabled"
-                            />
-                        </v-col>
-                        <v-col>
-                            <v-text-field
-                                class="mb-2"
-                                outlined
-                                dense
-                                hide-details
-                                :disabled="!settings.temp_path_enabled"
-                                v-model="settings.temp_path"
-                            />
-                        </v-col>
-                    </v-row>
-                </div>
-            </v-card-text>
-            <v-card-actions class="d-flex justify-center">
-                <v-btn color="success" @click="save_settings">Save</v-btn>
-            </v-card-actions>
-        </v-card>
-    </v-container>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import qbit from '@/services/qbit'
-
-export default {
-    name: 'BitTorrent',
-    methods: {
-        async save_settings() {
-            await qbit.setPreferences(this.getSettings())
-        }
-    },
-    computed: {
-        ...mapGetters(['getSettings']),
-        settings() {
-            return this.getSettings()
-        }
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-.v-input--selection-controls {
-    padding-top: 0px;
-}
-
-.settings_content {
-    border-left: 2px solid black;
-    padding-left: 8px;
-}
-
-.box {
-    margin: 2px;
-    padding: 5px;
-    border-radius: 4px;
-    border: 1px solid black;
-}
-</style>
diff --git a/src/components/SettingsModal/SettingsModal.vue b/src/components/SettingsModal/SettingsModal.vue
deleted file mode 100644
index 270fa62c..00000000
--- a/src/components/SettingsModal/SettingsModal.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-    <v-dialog max-width="750px" v-model="dialog">
-        <v-card>
-            <div :style="{ height: phoneLayout ? '100vh' : '' }">
-                <v-card-title class="pb-0 justify-center primary">
-                    <h2 class="white--text">Settings</h2>
-                </v-card-title>
-                <v-tabs v-model="tab" background-color="primary" center-active>
-                    <v-tab href="#downloads">Downloads</v-tab>
-                    <v-tab href="#bittorrent">BitTorrent</v-tab>
-                    <v-tab href="#webui">WebUI</v-tab>
-                </v-tabs>
-                <v-tabs-items v-model="tab" touchless>
-                    <v-tab-item value="webui">
-                        <WebUI :is-active="tab === 'webui'" />
-                    </v-tab-item>
-                    <v-tab-item value="bittorrent">
-                        <BitTorrent :is-active="tab === 'bittorrent'" />
-                    </v-tab-item>
-                    <v-tab-item value="downloads">
-                        <Downloads :is-active="tab === 'downloads'" />
-                    </v-tab-item>
-                </v-tabs-items>
-            </div>
-            <v-fab-transition v-if="phoneLayout">
-                <v-btn @click="close" color="red" dark absolute bottom right>
-                    
-                    <v-icon>close</v-icon>
-                </v-btn>
-            </v-fab-transition>
-        </v-card>
-    </v-dialog>
-</template>
-
-<script>
-/* eslint-disable vue/no-unused-components */
-import Modal from '@/mixins/Modal'
-// import { mapGetters } from 'vuex'
-import WebUI from '@/components/SettingsModal/WebUI.vue'
-import BitTorrent from '@/components/SettingsModal/BitTorrent.vue'
-import Downloads from '@/components/SettingsModal/Downloads.vue'
-
-export default {
-    name: 'SettingsModal',
-    mixins: [Modal],
-    components: { WebUI, BitTorrent, Downloads },
-    data() {
-        return {
-            tab: null,
-            items: [],
-            peers: []
-        }
-    },
-    methods: {
-        close() {
-            this.$store.commit('TOGGLE_MODAL', 'SettingsModal')
-        }
-    },
-    computed: {
-        phoneLayout() {
-            return this.$vuetify.breakpoint.xsOnly
-        }
-    },
-    watch: {
-        dialog(visible) {
-            if (!visible) {
-                this.tab = null
-            } else {
-                // Grab the settings from qbittorrent again
-                this.$store.commit('SET_SETTINGS')
-            }
-        }
-    }
-}
-</script>
diff --git a/src/components/SettingsModal/WebUI.vue b/src/components/SettingsModal/WebUI.vue
deleted file mode 100644
index afa54782..00000000
--- a/src/components/SettingsModal/WebUI.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-    <v-container>
-        <v-card flat>
-            <v-card-text class="pa-0" style="font-size: 1.1em;">
-                <div class="box">
-                    <v-subheader>Use Alternative WebUI</v-subheader>
-                    <div class="ml-5 mr-5">
-                        <v-checkbox
-                            dense
-                            :label="`Use Alternative WebUI`"
-                            v-model="settings.alternative_webui_enabled"
-                        />
-                        <v-text-field
-                            outlined
-                            dense
-                            hide-details="true"
-                            :label="`Files location`"
-                            :disabled="!settings.alternative_webui_enabled"
-                            v-model="settings.alternative_webui_path"
-                        />
-                    </div>
-                </div>
-                <div class="box">
-                    <v-subheader
-                        >Web User Interface (Remote Control)</v-subheader
-                    >
-                    <v-row class="ml-5 mr-5">
-                        <v-col cols="10">
-                            <v-text-field
-                                class="mr-1"
-                                outlined
-                                dense
-                                hide-details="true"
-                                :label="`IP Address:`"
-                                v-model="settings.web_ui_address"
-                            />
-                        </v-col>
-                        <v-col>
-                            <v-text-field
-                                class="ml-1"
-                                outlined
-                                dense
-                                hide-details="true"
-                                :label="`Port`"
-                                v-model="settings.web_ui_port"
-                            />
-                        </v-col>
-                    </v-row>
-                </div>
-            </v-card-text>
-            <v-card-actions class="d-flex justify-center">
-                <v-btn color="success" @click="save_settings">Save</v-btn>
-            </v-card-actions>
-        </v-card>
-    </v-container>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import qbit from '@/services/qbit'
-
-export default {
-    name: 'WebUI',
-    props: {
-        // localSettings: {}
-    },
-    methods: {
-        async save_settings() {
-            await qbit.setPreferences(this.getSettings())
-        }
-    },
-    computed: {
-        ...mapGetters(['getSettings']),
-        settings() {
-            return this.getSettings()
-        }
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-.box {
-    margin: 2px;
-    padding: 5px;
-    border-radius: 4px;
-    border: 1px solid black;
-}
-</style>
diff --git a/src/components/Torrent.vue b/src/components/Torrent.vue
index a4fb7180..756bb23d 100644
--- a/src/components/Torrent.vue
+++ b/src/components/Torrent.vue
@@ -23,70 +23,44 @@
                     <v-flex xs6 sm1 md1 class="mr-2">
                         <div class="caption grey--text">Size</div>
                         <div>
-                            {{
-                                torrent.size.substring(
-                                    0,
-                                    torrent.size.indexOf(' ')
-                                )
-                            }}
+                            {{ torrent.size | getNumber }}
                             <span class="caption grey--text">{{
-                                torrent.size.substring(
-                                    torrent.size.indexOf(' ')
-                                )
+                                torrent.size | getUnit
                             }}</span>
                         </div>
                     </v-flex>
                     <v-flex xs5 sm1 md1 class="mr-2">
                         <div class="caption grey--text">Done</div>
                         <div>
-                            {{
-                                torrent.dloaded.substring(
-                                    0,
-                                    torrent.dloaded.indexOf(' ')
-                                )
-                            }}
+                            {{ torrent.dloaded | getNumber }}
                             <span class="caption grey--text">{{
-                                torrent.dloaded.substring(
-                                    torrent.dloaded.indexOf(' ')
-                                )
+                                torrent.dloaded | getUnit
                             }}</span>
                         </div>
                     </v-flex>
                     <v-flex xs6 sm1 md1 class="mr-2">
                         <div class="caption grey--text">Download</div>
                         <div>
-                            {{
-                                torrent.dlspeed.substring(
-                                    0,
-                                    torrent.dlspeed.indexOf(' ')
-                                )
-                            }}
+                            {{ torrent.dlspeed | getNumber }}
                             <span class="caption grey--text">{{
-                                torrent.dlspeed.substring(
-                                    torrent.dlspeed.indexOf(' ')
-                                )
+                                torrent.dlspeed | getUnit
                             }}</span>
                         </div>
                     </v-flex>
                     <v-flex xs5 sm1 md1 class="mr-2">
                         <div class="caption grey--text">Upload</div>
                         <div>
-                            {{
-                                torrent.upspeed.substring(
-                                    0,
-                                    torrent.upspeed.indexOf(' ')
-                                )
-                            }}
+                            {{ torrent.upspeed | getNumber }}
                             <span class="caption grey--text">{{
-                                torrent.upspeed.substring(
-                                    torrent.upspeed.indexOf(' ')
-                                )
+                                torrent.upspeed | getUnit
                             }}</span>
                         </div>
                     </v-flex>
                     <v-flex xs6 sm1 md1 class="mr-2">
                         <div class="caption grey--text">ETA</div>
-                        <div>{{ torrent.eta }}</div>
+                        <div>
+                            {{ torrent.eta | formatEta({ dayLimit: 100 }) }}
+                        </div>
                     </v-flex>
                     <v-flex xs5 sm1 md1 class="mr-2">
                         <div class="caption grey--text">Peers</div>
@@ -144,7 +118,6 @@
 <script>
 import { VueContext } from 'vue-context'
 import TorrentRightClickMenu from '@/components/Torrent/TorrentRightClickMenu.vue'
-
 export default {
     name: 'Torrent',
     components: {
@@ -169,70 +142,74 @@ export default {
             this.$store.commit('TOGGLE_MODAL', 'TorrentDetailModal')
             this.$store.commit('SET_SELECTED_TORRENT_DETAIL', hash)
         }
+    },
+    filters: {
+        getUnit(value) {
+            if (!value) return ''
+            return value.substring(value.indexOf(' '))
+        },
+        getNumber(value) {
+            if (!value) return ''
+            return value.substring(0, value.indexOf(' '))
+        },
+        formatEta(value, options) {
+            const minute = 60
+            const hour = minute * 60
+            const day = hour * 24
+            const year = day * 365
+
+            const durations = [year, day, hour, minute, 1]
+            const units = 'ydhms'
+
+            let index = 0
+            let unitSize = 0
+            const parts = []
+
+            const defaultOptions = {
+                maxUnitSize: 2,
+                dayLimit: 0,
+                minUnit: 0
+            }
+
+            const opt = options
+                ? Object.assign(defaultOptions, options)
+                : defaultOptions
+
+            if (opt.dayLimit && value >= opt.dayLimit * day) {
+                return '∞'
+            }
+
+            while (
+                (!opt.maxUnitSize || unitSize !== opt.maxUnitSize) &&
+                index !== durations.length
+            ) {
+                const duration = durations[index]
+                if (value < duration) {
+                    index++
+                    continue
+                } else if (
+                    opt.minUnit &&
+                    durations.length - index <= opt.minUnit
+                ) {
+                    break
+                }
+
+                const result = Math.floor(value / duration)
+                parts.push(result + units[index])
+
+                value %= duration
+                index++
+                unitSize++
+            }
+
+            if (!parts.length) {
+                return '0' + units[durations.length - 1 - opt.minUnit]
+            }
+
+            return parts.join(' ')
+        }
     }
 }
 </script>
 
-<style>
-.project.done {
-    border-left: 4px solid #2e5eaa;
-}
-.project.downloading {
-    border-left: 4px solid #1fc176;
-}
-.project.busy {
-    border-left: 4px solid #ffaa2c;
-}
-.project.fail {
-    border-left: 4px solid #f83e70;
-}
-.project.paused {
-    border-left: 4px solid #eb8a90;
-}
-.project.queued {
-    border-left: 4px solid #2e5eaa;
-}
-.v-chip.done {
-    background: #2e5eaa !important;
-}
-.v-chip.downloading {
-    background: #1fc176 !important;
-}
-.v-chip.busy {
-    background: #ffaa2c !important;
-}
-.v-chip.fail {
-    background: #f83e70 !important;
-}
-.v-chip.paused {
-    background: #eb8a90 !important;
-}
-.noselect {
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-    -khtml-user-select: none; /* Konqueror HTML */
-    -moz-user-select: none; /* Firefox */
-    -ms-user-select: none; /* Internet Explorer/Edge */
-    user-select: none; /* Non-prefixed version, currently
-                                  supported by Chrome and Opera */
-}
-.v-chip.queued {
-    background: #2e5eaa !important;
-}
-.noselect {
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-    -moz-user-select: none; /* Firefox */
-    -ms-user-select: none; /* Internet Explorer/Edge */
-    user-select: none; /* Non-prefixed version, currently
-                                  supported by Chrome and Opera */
-}
-.pointer {
-    cursor: pointer;
-}
-.truncate {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-</style>
+<style></style>
diff --git a/src/filters.js b/src/filters.js
index f67760d6..3483ebd5 100644
--- a/src/filters.js
+++ b/src/filters.js
@@ -45,7 +45,6 @@ export function formatTimestamp(timestamp) {
 Vue.filter('formatTimestamp', formatTimestamp)
 
 export function formatProgress(progress) {
-    // eslint-disable-next-line
     progress *= 100
     return `${toPrecision(progress, 3)}%`
 }
diff --git a/src/helpers.js b/src/helpers.js
index 2681191e..47a0e147 100644
--- a/src/helpers.js
+++ b/src/helpers.js
@@ -96,3 +96,110 @@ function createFolder(name, children) {
         children: children
     }
 }
+
+export function getPropName(prop) {
+    switch (prop) {
+        case 'title':
+        case 'name':
+        case 'Name':
+        case 'Title':
+            return 'name'
+        case 'size':
+        case 'Size':
+            return 'size'
+        case 'dlspeed':
+        case 'Dlspeed':
+        case 'Download':
+        case 'download':
+        case 'downloadspeed':
+            return 'dlspeed'
+        case 'upspeed':
+        case 'upload':
+        case 'Upload':
+        case 'Upspeed':
+        case 'uploadspeed':
+            return 'upspeed'
+        case 'leechs':
+        case 'leechers':
+        case 'leech':
+        case 'peers':
+        case 'Leechs':
+        case 'Leechers':
+        case 'Leech':
+        case 'Peers':
+            return 'num_leechs'
+        case 'seeds':
+        case 'seeders':
+        case 'Seeds':
+        case 'Seeders':
+            return 'num_seeds'
+        case 'remaining':
+        case 'time':
+        case 'Time':
+        case 'ETA':
+        case 'eta':
+            return 'eta'
+        case 'done':
+        case 'downloaded':
+        case 'dloaded':
+        case 'Done':
+        case 'Downloaded':
+        case 'Dloaded':
+            return 'progress'
+        case 'state':
+        case 'status':
+        case 'State':
+        case 'Status':
+            return 'state'
+        default:
+            return 'name'
+    }
+}
+
+export function sortOrFilter(word) {
+    switch (word) {
+        case 'sort':
+        case 's':
+        case 'srt':
+            return 'sort'
+        case 'f':
+        case 'filter':
+        case 'filtr':
+        case 'fltr':
+        case 'filt':
+            return 'filter'
+        default:
+            return 'sort'
+    }
+}
+
+export function filterOption(word) {
+    switch (word) {
+        case 'Done':
+        case 'done':
+        case 'completed':
+        case 'complete':
+            return 'completed'
+        case 'Busy':
+        case 'busy':
+        case 'downl':
+        case 'download':
+        case 'downloading':
+        case 'act':
+        case 'active':
+        case 'resumed':
+            return 'active'
+        case 'fail':
+        case 'failed':
+        case 'faild':
+        case 'stalled':
+        case 'stalld':
+        case 'stall':
+            return 'stalled'
+        case 'pause':
+        case 'paused':
+            return 'paused'
+        default:
+            return null
+    }
+}
diff --git a/src/main.js b/src/main.js
index 41e3c855..c53d963b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,8 +4,11 @@ import '@/registerServiceWorker'
 import router from '@/router'
 import store from '@/store'
 import '@babel/polyfill'
-// eslint-disable-next-line no-unused-vars
+
+/* eslint-disable no-unused-vars */
 import filters from '@/filters'
+import styles from '@/assets/styles.scss'
+/* eslint-enable no-unused-vars */
 
 import VueObserveVisibility from 'vue-observe-visibility'
 
diff --git a/src/models/Status.js b/src/models/Status.js
index 72caabcb..d4340e17 100644
--- a/src/models/Status.js
+++ b/src/models/Status.js
@@ -15,6 +15,7 @@ export default class Status {
     }
 
     formatBytes(a, b) {
+        if (!a) return '0 Bytes'
         if (a == 0) return '0 Bytes'
         const c = 1024
         const d = b || 2
diff --git a/src/models/torrent.js b/src/models/torrent.js
index 2dc39de0..7a336ca7 100644
--- a/src/models/torrent.js
+++ b/src/models/torrent.js
@@ -4,12 +4,10 @@ export default class Torrent {
         this.size = this.formatBytes(data.size)
         this.birth = new Date(data.added_on * 1000).toLocaleString()
         this.dlspeed = this.formatBytes(data.dlspeed, 1)
-        this.dloaded = this.formatBytes(data.downloaded)
+        this.dloaded = this.formatBytes(data.completed)
         this.upspeed = this.formatBytes(data.upspeed, 1)
         this.uploaded = this.formatBytes(data.uploaded)
-        this.eta = `${new Date(data.eta).getHours()}h ${new Date(
-            data.eta
-        ).getMinutes()}min`
+        this.eta = data.eta
         this.num_leechs = data.num_leechs
         this.num_seeds = data.num_seeds
         this.path = data.path === undefined ? '/downloads' : data.path
@@ -20,7 +18,7 @@ export default class Torrent {
         this.available_seeds = data.num_complete
         this.available_peers = data.num_incomplete
         this.savePath = data.save_path
-        this.progress = Math.round((data.downloaded / data.size) * 100)
+        this.progress = data.progress * 100
         this.ratio = Math.round(data.ratio * 100)
         this.tags = data.tags.length > 0 ? data.tags.split(',') : null
     }
@@ -30,7 +28,7 @@ export default class Torrent {
             case 'pausedDL':
                 return 'paused'
             case 'downloading':
-                return 'downloading'
+                return 'busy'
             case 'stalledDL':
                 return 'fail'
             case 'pausedUP':
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index cebab55c..88197340 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="pl-5 pr-5" color="background" @click.self="resetSelected">
-        <h1 style="font-size: 1.1em !important;" class="subtitle-1 grey--text">
+        <h1 style="font-size: 1.1em !important" class="subtitle-1 grey--text">
             Dashboard
         </h1>
         <v-container
@@ -40,112 +40,7 @@ import { mapState, mapMutations } from 'vuex'
 import Torrent from '@/components/Torrent'
 import TorrentDetailModal from '@/components/TorrentDetailModal/TorrentDetailModal'
 
-function getPropName(prop) {
-    switch (prop) {
-        case 'title':
-        case 'name':
-        case 'Name':
-        case 'Title':
-            return 'name'
-        case 'size':
-        case 'Size':
-            return 'size'
-        case 'dlspeed':
-        case 'Dlspeed':
-        case 'Download':
-        case 'download':
-        case 'downloadspeed':
-            return 'dlspeed'
-        case 'upspeed':
-        case 'upload':
-        case 'Upload':
-        case 'Upspeed':
-        case 'uploadspeed':
-            return 'upspeed'
-        case 'leechs':
-        case 'leechers':
-        case 'leech':
-        case 'peers':
-        case 'Leechs':
-        case 'Leechers':
-        case 'Leech':
-        case 'Peers':
-            return 'num_leechs'
-        case 'seeds':
-        case 'seeders':
-        case 'Seeds':
-        case 'Seeders':
-            return 'num_seeds'
-        case 'remaining':
-        case 'time':
-        case 'Time':
-        case 'ETA':
-        case 'eta':
-            return 'eta'
-        case 'done':
-        case 'downloaded':
-        case 'dloaded':
-        case 'Done':
-        case 'Downloaded':
-        case 'Dloaded':
-            return 'progress'
-        case 'state':
-        case 'status':
-        case 'State':
-        case 'Status':
-            return 'state'
-        default:
-            return 'name'
-    }
-}
-
-function sortOrFilter(word) {
-    switch (word) {
-        case 'sort':
-        case 's':
-        case 'srt':
-            return 'sort'
-        case 'f':
-        case 'filter':
-        case 'filtr':
-        case 'fltr':
-        case 'filt':
-            return 'filter'
-        default:
-            return 'sort'
-    }
-}
-
-function filterOption(word) {
-    switch (word) {
-        case 'Done':
-        case 'done':
-        case 'completed':
-        case 'complete':
-            return 'completed'
-        case 'Busy':
-        case 'busy':
-        case 'downl':
-        case 'download':
-        case 'downloading':
-        case 'act':
-        case 'active':
-        case 'resumed':
-            return 'active'
-        case 'fail':
-        case 'failed':
-        case 'faild':
-        case 'stalled':
-        case 'stalld':
-        case 'stall':
-            return 'stalled'
-        case 'pause':
-        case 'paused':
-            return 'paused'
-        default:
-            return null
-    }
-}
+import { getPropName, sortOrFilter, filterOption } from '@/helpers'
 
 export default {
     name: 'Dashboard',