Feature/style unification (#420)

* set global icons

* fixes #419

* button style docs

* category/tag page updates

* dynamic router imports

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/src/components/UI/Dialogs/BackupDialog.vue

@@ -9,7 +9,7 @@
     >
       <template v-slot:open="{ open }">
         <v-btn @click="open" class="mx-2" small :color="color">
-          <v-icon left> mdi-plus </v-icon> {{ $t("general.custom") }}
+          <v-icon left> {{ $globals.icons.create }} </v-icon> {{ $t("general.custom") }}
         </v-btn>
       </template>
       <v-card-text class="mt-6">
@@ -128,7 +128,6 @@ export default {
         templates: this.selectedTemplates,
       };
 
-
       if (await api.backups.create(data)) {
         this.$emit("created");
       }

frontend/src/components/UI/Dialogs/BaseDialog.vue

@@ -10,7 +10,7 @@
       <v-card height="100%">
         <v-app-bar dark :color="color" class="mt-n1 mb-0">
           <v-icon large left>
-            {{ titleIcon }}
+            {{ displayTitleIcon }}
           </v-icon>
           <v-toolbar-title class="headline"> {{ title }} </v-toolbar-title>
           <v-spacer></v-spacer>
@@ -55,7 +55,7 @@ export default {
       default: "Modal Title",
     },
     titleIcon: {
-      default: "mdi-account",
+      default: null,
     },
     modalWidth: {
       default: "500",
@@ -83,6 +83,9 @@ export default {
     determineClose() {
       return this.submitted && !this.loading && !this.keepOpen;
     },
+    displayTitleIcon() {
+      return this.titleIcon || this.$globals.icons.user;
+    },
   },
   watch: {
     determineClose() {

frontend/src/components/UI/Dialogs/NewCategoryTagDialog.vue

@@ -2,14 +2,14 @@
   <div>
     <slot>
       <v-btn icon @click="dialog = true" class="mt-n1">
-        <v-icon :color="color">mdi-plus</v-icon>
+        <v-icon :color="color">{{ $globals.icons.create }}</v-icon>
       </v-btn>
     </slot>
     <v-dialog v-model="dialog" width="500">
       <v-card>
         <v-app-bar dense dark color="primary mb-2">
           <v-icon large left class="mt-1">
-            mdi-tag
+            {{ $globals.icons.tags }}
           </v-icon>
 
           <v-toolbar-title class="headline">