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/CardSection.vue

@@ -2,7 +2,7 @@
   <div v-if="recipes">
     <v-app-bar color="transparent" flat class="mt-n1 rounded" v-if="!disableToolbar">
       <v-icon large left v-if="title">
-        {{ titleIcon }}
+        {{ displayTitleIcon }}
       </v-icon>
       <v-toolbar-title class="headline"> {{ title }} </v-toolbar-title>
       <v-spacer></v-spacer>
@@ -120,7 +120,7 @@ export default {
       default: false,
     },
     titleIcon: {
-      default: "mdi-tag-multiple-outline",
+      default: null,
     },
     title: {
       default: null,
@@ -170,6 +170,9 @@ export default {
     effectiveHardLimit() {
       return Math.min(this.hardLimit, this.recipes.length);
     },
+    displayTitleIcon() {
+      return this.titleIcon || this.$globals.icons.tags;
+    },
   },
   methods: {
     bumpList() {

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">

frontend/src/components/UI/TheAppBar.vue

@@ -7,7 +7,7 @@
       </v-btn>
       <router-link to="/">
         <v-btn icon>
-          <v-icon size="40"> mdi-silverware-variant </v-icon>
+          <v-icon size="40"> {{ $globals.icons.primary }} </v-icon>
         </v-btn>
       </router-link>
 

frontend/src/components/UI/TheRecipeFab.vue

@@ -50,14 +50,14 @@
     <v-speed-dial v-model="fab" :open-on-hover="absolute" :fixed="absolute" :bottom="absolute" :right="absolute">
       <template v-slot:activator>
         <v-btn v-model="fab" :color="absolute ? 'accent' : 'white'" dark :icon="!absolute" :fab="absolute">
-          <v-icon> mdi-plus </v-icon>
+          <v-icon> {{ $globals.icons.create }} </v-icon>
         </v-btn>
       </template>
       <v-btn fab dark small color="primary" @click="addRecipe = true">
         <v-icon>mdi-link</v-icon>
       </v-btn>
       <v-btn fab dark small color="accent" @click="$router.push('/new')">
-        <v-icon>mdi-square-edit-outline</v-icon>
+        <v-icon>{{ $globals.icons.edit }}</v-icon>
       </v-btn>
     </v-speed-dial>
   </div>

frontend/src/components/UI/TheSidebar.vue

@@ -98,15 +98,25 @@ export default {
           to: "/",
           title: this.$t("page.home-page"),
         },
+        {
+          icon: "mdi-magnify",
+          to: "/search",
+          title: this.$t("search.search"),
+        },
         {
           icon: "mdi-view-module",
           to: "/recipes/all",
           title: this.$t("page.all-recipes"),
         },
         {
-          icon: "mdi-magnify",
-          to: "/search",
-          title: this.$t("search.search"),
+          icon: this.$globals.icons.tags,
+          to: "/recipes/category",
+          title: this.$t("recipe.categories"),
+        },
+        {
+          icon: this.$globals.icons.tags,
+          to: "/recipes/tag",
+          title: this.$t("tag.tags"),
         },
       ];
     },
@@ -117,16 +127,10 @@ export default {
         return pages.map(x => ({
           title: x.name,
           to: `/pages/${x.slug}`,
-          icon: "mdi-tag",
-        }));
-      } else {
-        const categories = this.$store.getters.getAllCategories;
-        return categories.map(x => ({
-          title: x.name,
-          to: `/recipes/category/${x.slug}`,
-          icon: "mdi-tag",
+          icon: this.$globals.icons.tags,
         }));
       }
+      return [];
     },
     mainMenu() {
       return [...this.baseMainLinks, ...this.customPages];
@@ -134,7 +138,7 @@ export default {
     settingsLinks() {
       return [
         {
-          icon: "mdi-account",
+          icon: this.$globals.icons.user,
           to: "/admin/profile",
           title: this.$t("settings.profile"),
         },
@@ -158,7 +162,7 @@ export default {
           title: this.$t("settings.toolbox.toolbox"),
         },
         {
-          icon: "mdi-account-group",
+          icon: this.$globals.icons.group,
           to: "/admin/manage-users",
           title: this.$t("user.manage-users"),
         },

frontend/src/components/UI/TheSiteMenu.vue

@@ -4,7 +4,7 @@
     <v-menu transition="slide-x-transition" bottom right offset-y offset-overflow open-on-hover close-delay="200">
       <template v-slot:activator="{ on, attrs }">
         <v-btn v-bind="attrs" v-on="on" icon>
-          <v-icon>mdi-account</v-icon>
+          <v-icon>{{ $globals.icons.user }}</v-icon>
         </v-btn>
       </template>
 
@@ -40,7 +40,7 @@ export default {
     items() {
       return [
         {
-          icon: "mdi-account",
+          icon: this.$globals.icons.user,
           title: this.$t("user.login"),
           restricted: false,
           login: true,