Style fixes.

frontend/package-lock.json

@@ -13,7 +13,6 @@
         "@fortawesome/free-solid-svg-icons": "^6.4.2",
         "@fortawesome/vue-fontawesome": "^3.0.5",
         "@vueuse/core": "^10.6.1",
-        "bulma": "^0.9.4",
         "core-js": "^3.8.3",
         "hls.js": "^1.4.12",
         "moment": "^2.29.4",
@@ -4046,11 +4045,6 @@
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
       "dev": true
     },
-    "node_modules/bulma": {
-      "version": "0.9.4",
-      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
-      "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ=="
-    },
     "node_modules/bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",

frontend/package.json

@@ -14,7 +14,6 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/vue-fontawesome": "^3.0.5",
     "@vueuse/core": "^10.6.1",
-    "bulma": "^0.9.4",
     "core-js": "^3.8.3",
     "hls.js": "^1.4.12",
     "moment": "^2.29.4",

frontend/src/components/Page-Completed.vue

@@ -4,7 +4,7 @@
       <span class="icon">
         <font-awesome-icon :icon="showCompleted ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'" />
       </span>
-      <span>Completed</span>
+      <span>Completed <span v-if="hasItems">({{ getTotal }})</span></span>
     </span>
   </h1>
 
@@ -209,13 +209,9 @@ watch(masterSelectAll, (value) => {
   }
 })
 
-const hasSelected = computed(() => {
-  return selectedElms.value.length > 0;
-})
-
-const hasItems = computed(() => {
-  return Object.keys(props.completed)?.length > 0;
-})
+const hasSelected = computed(() => selectedElms.value.length > 0)
+const hasItems = computed(() => Object.keys(props.completed)?.length > 0)
+const getTotal = computed(() => Object.keys(props.completed)?.length);
 
 const hasFailed = computed(() => {
   if (Object.keys(props.completed)?.length < 0) {

frontend/src/components/Page-Downloading.vue

@@ -4,7 +4,7 @@
       <span class="icon">
         <font-awesome-icon :icon="showQueue ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'" />
       </span>
-      <span>Queue</span>
+      <span>Queue <span v-if="hasQueuedItems">({{ getTotal }})</span></span>
     </icon>
   </h1>
 
@@ -154,12 +154,9 @@ watch(masterSelectAll, (value) => {
   }
 })
 
-const hasSelected = computed(() => {
-  return selectedElms.value.length > 0;
-})
-const hasQueuedItems = computed(() => {
-  return Object.keys(props.queue)?.length > 0;
-})
+const hasSelected = computed(() => selectedElms.value.length > 0)
+const hasQueuedItems = computed(() => Object.keys(props.queue)?.length > 0)
+const getTotal = computed(() => Object.keys(props.completed)?.length);
 
 const ETAPipe = value => {
   if (value === null || 0 === value) {
@@ -222,7 +219,7 @@ const updateProgress = (item) => {
   position: relative;
   width: 100%;
   height: 30px;
-  background-color: gray;
+  background-color: #F5F5F5;
 }
 
 #progress,
@@ -243,6 +240,6 @@ const updateProgress = (item) => {
 
 #progress {
   z-index: 1;
-  background-color: green;
+  background-color: #00d1b2;
 }
 </style>

frontend/src/components/Page-Header.vue

@@ -18,8 +18,10 @@
         </span>
       </div>
       <div class="navbar-item">
-        <button data-tooltip="Switch to Light theme" class="button is-dark has-tooltip-bottom" @click="selectedTheme = 'light'" v-if="selectedTheme == 'dark'">🌞</button>
-        <button data-tooltip="Switch to Dark theme" class="button is-dark  has-tooltip-bottom" @click="selectedTheme = 'dark'" v-if="selectedTheme == 'light'">🌚</button>
+        <button data-tooltip="Switch to Light theme" class="button is-dark has-tooltip-bottom"
+          @click="selectedTheme = 'light'" v-if="selectedTheme == 'dark'">🌞</button>
+        <button data-tooltip="Switch to Dark theme" class="button is-dark  has-tooltip-bottom"
+          @click="selectedTheme = 'dark'" v-if="selectedTheme == 'light'">🌚</button>
       </div>
     </div>
   </nav>
@@ -77,11 +79,19 @@ const applyPreferredColorScheme = (scheme) => {
 }
 
 onMounted(() => {
-  applyPreferredColorScheme(selectedTheme.value);
+  try {
+    applyPreferredColorScheme(selectedTheme.value);
+  } catch (e) {
+    console.log(e);
+  }
 })
 
 watch(selectedTheme, (value) => {
-  applyPreferredColorScheme(value);
+  try {
+    applyPreferredColorScheme(value);
+  } catch (e) {
+    console.log(e);
+  }
 })
 
 </script>

frontend/src/main.js

@@ -11,9 +11,9 @@ import {
 import { faSquare, faSquareCheck } from '@fortawesome/free-regular-svg-icons'
 
 import 'vue-toastification/dist/index.css'
-import 'bulma/css/bulma.css'
-import './assets/css/style.css'
+import './assets/css/bulma-light.css'
 import './assets/css/bulma-dark.css'
+import './assets/css/style.css'
 import '@creativebulma/bulma-tooltip/dist/bulma-tooltip.min.css';
 
 library.add(faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload, faUpRightFromSquare,