Update styling of icons in sidebar

package.json

@@ -87,7 +87,6 @@
     "vue-cli-plugin-electron-builder": "^2.0.0-rc.4",
     "vue-cli-plugin-styleguidist": "^4.2.3",
     "vue-cli-plugin-vuetify": "^0.6.3",
-    "vue-svg-loader": "^0.16.0",
     "vue-template-compiler": "^2.6.12",
     "vuetify-loader": "^1.2.2",
     "worker-loader": "^3.0.2"

src/components/icons/IconTestMultiple.vue

@@ -0,0 +1,20 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <svg width="100%" height="100%" viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M15.3,5.86l0,24.74l12.37,0l0,173.18c0,27.144 22.336,49.48 49.48,49.48c27.144,0 49.48,-22.336 49.48,-49.48l0,-173.18l12.37,0l0,-24.74l-123.7,0m49.48,173.18c-7.422,0 -12.37,-4.948 -12.37,-12.37c0,-7.422 4.948,-12.37 12.37,-12.37c7.422,0 12.37,4.948 12.37,12.37c0,7.422 -4.948,12.37 -12.37,12.37m24.74,-49.48c-7.422,0 -12.37,-4.948 -12.37,-12.37c0,-7.422 4.948,-12.37 12.37,-12.37c7.422,0 12.37,4.948 12.37,12.37c0,7.422 -4.948,12.37 -12.37,12.37m12.37,-61.85l-49.48,0l0,-37.11l49.48,0l0,37.11Z" style="fill-rule:nonzero;"/><path d="M160.3,42.97l123.7,0l0,24.74l-12.37,0l0,173.18c0,27.144 -22.336,49.48 -49.48,49.48c-27.144,0 -49.48,-22.336 -49.48,-49.48l0,-173.18l-12.37,0l0,-24.74m86.59,24.74l-49.48,0l0,173.18c0,13.572 11.168,24.74 24.74,24.74c13.572,0 24.74,-11.168 24.74,-24.74l0,-173.18Z" style="fill-rule:nonzero;"/></svg>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import Component from "vue-class-component";
+import { Prop } from "vue-property-decorator";
+
+@Component
+export default class IconTestMultiple extends Vue {
+}
+</script>
+
+<style scoped>
+    svg {
+        fill: currentColor;
+    }
+</style>

src/components/navigation-drawers/Toolbar.vue

@@ -27,7 +27,7 @@
                         link
                         @click="navigate('/analysis/single', true)">
                         <v-list-item-icon>
-                            <v-icon>mdi-bacteria</v-icon>
+                            <v-icon>mdi-test-tube</v-icon>
                         </v-list-item-icon>
                         <v-list-item-content>
                             <v-list-item-title>Single assay analysis</v-list-item-title>
@@ -54,7 +54,7 @@
                         link
                         @click="navigate('/peptide/single', false)">
                         <v-list-item-icon>
-                            <v-icon>mdi-test-tube</v-icon>
+                            <v-icon>mdi-bacteria</v-icon>
                         </v-list-item-icon>
                         <v-list-item-content>
                             <v-list-item-title>Single peptide analysis</v-list-item-title>
@@ -216,10 +216,14 @@ export default class Toolbar extends Vue {
     }
 
     .navigation-toolbar .v-list-item .v-icon:hover {
-        color: #2196F3;
+        color: #2196f3;
     }
 
     .v-list-item--disabled .v-icon {
-        color: rgba(0, 0, 0, 0.15);
+        color: rgb(170, 170, 170) !important;
+    }
+
+    .v-list-item:hover .v-icon {
+        color: #2196f3;
     }
 </style>

src/components/pages/ComparativeAnalysisPage.vue

@@ -2,7 +2,7 @@
     <v-container fluid>
         <v-row>
             <v-col>
-                <div style="max-width: 1200px; margin: auto;">
+                <div style="margin: auto;">
                     <collapsable-card>
                         <template v-slot:title><span>Data selection</span></template>
                         <template v-slot:content>

src/plugins/vuetify.ts

@@ -1,8 +1,7 @@
 import Vue from "vue";
 import Vuetify from "vuetify/lib";
 import { Ripple } from "vuetify/lib/directives"
-// @ts-ignore
-import IconTestMultiple from "@/assets/icons/test_multiple.svg";
+import IconTestMultiple from "@/components/icons/IconTestMultiple.vue";
 
 Vue.use(Vuetify, {
     directives: {

vue.config.js

@@ -11,17 +11,6 @@ module.exports = {
             }
         ]);
         config.output.globalObject("this");
-
-
-        const svgRule = config.module.rule("svg");
-        svgRule.uses.clear();
-
-        svgRule
-            .use("babel-loader")
-            .loader("babel-loader")
-            .end()
-            .use("vue-svg-loader")
-            .loader("vue-svg-loader");
     },
     pluginOptions: {
         electronBuilder: {