several layout cleanups + dependency bump

package.json

@@ -19,7 +19,10 @@
         "axios": "0.21.1",
         "bcrypt": "5.0.1",
         "bootstrap": "5.0.2",
+        "chart.js": "^3.5.1",
+        "chartjs-adapter-dayjs": "^1.0.0",
         "command-exists": "1.2.9",
+        "compare-versions": "^3.6.0",
         "dayjs": "1.10.6",
         "express": "4.17.1",
         "express-basic-auth": "1.2.0",
@@ -37,7 +40,9 @@
         "tcp-ping": "0.1.1",
         "v-pagination-3": "0.1.6",
         "vue": "3.0.5",
+        "vue-chart-3": "^0.5.7",
         "vue-confirm-dialog": "1.0.2",
+        "vue-i18n": "^8.25.0",
         "vue-router": "4.0.10",
         "vue-toastification": "2.0.0-rc.1"
     },

src/components/MonitorList.vue

@@ -117,11 +117,11 @@ export default {
     .list {
         .item {
             &:hover {
-                background-color: $dark-bg2;
+                background-color: #0a0a0a;
             }
 
             &.active {
-                background-color: $dark-bg2;
+                background-color: #0a0a0a;
             }
         }
     }

src/components/NotificationDialog.vue

@@ -557,7 +557,7 @@ export default {
 
 .dark {
     .modal-dialog .form-text, .modal-dialog p {
-        color: $dark-font-color;
+        color: #0a0a0a;
     }
 }
 </style>

src/layouts/Layout.vue

@@ -213,7 +213,7 @@ footer {
     }
 
     .bottom-nav {
-        background-color: $dark-bg;
+        background-color: #0a0a0a;
     }
 }
 

src/pages/Details.vue

@@ -415,7 +415,7 @@ table {
 
 .dark {
     .keyword {
-        color: $dark-font-color;
+        color: #0a0a0a;
     }
 }
 </style>