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/Fallbacks/The404.vue

@@ -9,7 +9,7 @@
       <div class="d-flex">
         <p>4</p>
         <v-icon color="primary" class="mx-auto" size="200">
-          mdi-silverware-variant
+          {{ $globals.icons.primary }}
         </v-icon>
         <p>4</p>
       </div>
@@ -33,7 +33,7 @@ export default {
     return {
       buttons: [
         { icon: "mdi-home", to: "/", text: "Home" },
-        { icon: "mdi-silverware-variant", to: "/recipes/all", text: "All Recipes" },
+        { icon: this.$globals.icons.primary, to: "/recipes/all", text: "All Recipes" },
         { icon: "mdi-magnify", to: "/search", text: "Search" },
       ],
     };

frontend/src/components/Login/LoginForm.vue

@@ -3,7 +3,7 @@
     <v-divider></v-divider>
     <v-app-bar dark color="primary" class="mt-n1 mb-2">
       <v-icon large left v-if="!loading">
-        mdi-account
+        {{ $globals.icons.user }}
       </v-icon>
       <v-progress-circular v-else indeterminate color="white" large class="mr-2"> </v-progress-circular>
       <v-toolbar-title class="headline">{{ $t("user.login") }}</v-toolbar-title>

frontend/src/components/Login/SignUpForm.vue

@@ -3,7 +3,7 @@
     <v-divider></v-divider>
     <v-app-bar dark color="primary" class="mt-n1">
       <v-icon large left v-if="!loading">
-        mdi-account
+        {{ $globals.icons.user }}
       </v-icon>
       <v-progress-circular v-else indeterminate color="white" large class="mr-2"> </v-progress-circular>
       <v-toolbar-title class="headline">
@@ -18,7 +18,7 @@
         <v-text-field
           v-model="user.name"
           light="light"
-          prepend-icon="mdi-account"
+          :prepend-icon="$globals.icons.user"
           validate-on-blur
           :rules="[existsRule]"
           :label="$t('signup.display-name')"

frontend/src/components/MealPlan/MealPlanCard.vue

@@ -3,7 +3,7 @@
     <SearchDialog ref="mealselect" @select="setSlug" />
     <BaseDialog
       title="Custom Meal"
-      title-icon="mdi-silverware-variant"
+      :title-icon="$globals.icons.primary"
       submit-text="Save"
       :top="true"
       ref="customMealDialog"
@@ -21,7 +21,7 @@
             <v-fade-transition>
               <v-btn v-if="hover" small color="info" class="ma-1" @click.stop="addCustomItem(index, modes.primary)">
                 <v-icon left>
-                  mdi-square-edit-outline
+                  {{ $globals.icons.edit }}
                 </v-icon>
                 No Recipe
               </v-btn>
@@ -38,14 +38,14 @@
               <v-fade-transition>
                 <v-btn v-if="hover" small color="info" text @click.stop="addCustomItem(index, modes.sides)">
                   <v-icon left>
-                    mdi-square-edit-outline
+                    {{ $globals.icons.edit }}
                   </v-icon>
                   No Recipe
                 </v-btn>
               </v-fade-transition>
               <v-btn color="info" outlined small @click="openSearch(index, modes.sides)">
                 <v-icon small class="mr-1">
-                  mdi-plus
+                  {{ $globals.icons.create }}
                 </v-icon>
                 Side
               </v-btn>
@@ -65,7 +65,7 @@
               <v-list-item-icon>
                 <v-btn icon @click="removeSide(index, i + 1)">
                   <v-icon color="error">
-                    mdi-delete
+                    {{ $globals.icons.delete }}
                   </v-icon>
                 </v-btn>
               </v-list-item-icon>

frontend/src/components/Recipe/CardImage.vue

@@ -14,7 +14,7 @@
         <slot> </slot>
       </div>
       <v-icon color="primary" class="icon-position" :size="iconSize">
-        mdi-silverware-variant
+        {{ $globals.icons.primary }}
       </v-icon>
     </div>
   </div>

frontend/src/components/Recipe/ContextMenu.vue

@@ -75,13 +75,13 @@ export default {
       return [
         {
           title: this.$t("general.delete"),
-          icon: "mdi-delete",
+          icon: this.$globals.icons.delete,
           color: "error",
           action: "delete",
         },
         {
           title: this.$t("general.edit"),
-          icon: "mdi-square-edit-outline",
+          icon: this.$globals.icons.edit,
           color: "accent",
           action: "edit",
         },

frontend/src/components/Recipe/EditorButtonRow.vue

@@ -19,18 +19,18 @@
         <v-col></v-col>
         <div v-if="open">
           <v-btn class="mr-2" fab dark small color="error" @click="deleteRecipeConfrim">
-            <v-icon>mdi-delete</v-icon>
+            <v-icon>{{ $globals.icons.delete }}</v-icon>
           </v-btn>
 
           <v-btn class="mr-2" fab dark small color="success" @click="save">
-            <v-icon>mdi-content-save</v-icon>
+            <v-icon>{{ $globals.icons.save }}</v-icon>
           </v-btn>
           <v-btn class="mr-5" fab dark small color="secondary" @click="json">
             <v-icon>mdi-code-braces</v-icon>
           </v-btn>
         </div>
         <v-btn color="accent" fab dark small @click="editor">
-          <v-icon>mdi-square-edit-outline</v-icon>
+          <v-icon>{{ $globals.icons.edit }}</v-icon>
         </v-btn>
       </template>
     </v-toolbar>

frontend/src/components/Recipe/MobileRecipeCard.vue

@@ -9,7 +9,7 @@
           @error="fallBackImage = true"
         ></v-img>
         <v-icon v-else color="primary" class="icon-position" size="100">
-          mdi-silverware-variant
+          {{ $globals.icons.primary }}
         </v-icon>
       </v-list-item-avatar>
       <v-list-item-content>

frontend/src/components/Recipe/Parts/Assets.vue

@@ -19,7 +19,7 @@
             </v-btn>
             <div v-else>
               <v-btn color="error" icon @click="deleteAsset(i)" top>
-                <v-icon>mdi-delete</v-icon>
+                <v-icon>{{ $globals.icons.delete }}</v-icon>
               </v-btn>
               <v-btn color="primary" icon @click="copyLink(item.name, item.fileName)" top>
                 <v-icon>mdi-content-copy</v-icon>
@@ -34,7 +34,7 @@
       <base-dialog @submit="addAsset" :title="$t('recipe.new-asset')" :title-icon="newAsset.icon">
         <template v-slot:open="{ open }">
           <v-btn color="secondary" dark @click="open" v-if="edit">
-            <v-icon>mdi-plus</v-icon>
+            <v-icon>{{ $globals.icons.create }}</v-icon>
           </v-btn>
         </template>
         <v-card-text class="pt-2">

frontend/src/components/Recipe/Parts/Helpers/ExtrasEditor.vue

@@ -12,7 +12,7 @@
           <v-row align="center" v-for="(value, key, index) in extras" :key="index">
             <v-col cols="12" sm="1">
               <v-btn fab text x-small color="white" elevation="0" @click="removeExtra(key)">
-                <v-icon color="error">mdi-delete</v-icon>
+                <v-icon color="error">{{ $globals.icons.delete }}</v-icon>
               </v-btn>
             </v-col>
             <v-col cols="12" md="3" sm="6">

frontend/src/components/Recipe/Parts/Ingredients.vue

@@ -20,7 +20,7 @@
                   <v-icon class="handle">mdi-arrow-up-down</v-icon>
                 </template>
                 <v-icon class="mr-n1" slot="prepend" color="error" @click="removeByIndex(value, index)">
-                  mdi-delete
+                  {{ $globals.icons.delete }}
                 </v-icon>
               </v-textarea>
             </v-row>
@@ -31,7 +31,7 @@
       <div class="d-flex row justify-end">
         <BulkAdd @bulk-data="addIngredient" class="mr-2" />
         <v-btn color="secondary" dark @click="addIngredient" class="mr-4">
-          <v-icon>mdi-plus</v-icon>
+          <v-icon>{{ $globals.icons.create }}</v-icon>
         </v-btn>
       </div>
     </div>

frontend/src/components/Recipe/Parts/Instructions.vue

@@ -37,7 +37,7 @@
                 elevation="0"
                 @click="removeByIndex(value, index)"
               >
-                <v-icon size="24" color="error">mdi-delete</v-icon>
+                <v-icon size="24" color="error">{{ $globals.icons.delete }}</v-icon>
               </v-btn>
               {{ $t("recipe.step-index", { step: index + 1 }) }}
               <v-btn v-if="edit" text color="primary" class="ml-auto" @click="toggleShowTitle(index)">

frontend/src/components/Recipe/Parts/Notes.vue

@@ -6,7 +6,7 @@
         <v-card-text>
           <v-row align="center">
             <v-btn fab x-small color="white" class="mr-2" elevation="0" @click="removeByIndex(value, index)">
-              <v-icon color="error">mdi-delete</v-icon>
+              <v-icon color="error">{{ $globals.icons.delete }}</v-icon>
             </v-btn>
             <v-text-field :label="$t('recipe.title')" v-model="value[index]['title']"></v-text-field>
           </v-row>
@@ -27,7 +27,7 @@
 
     <div class="d-flex justify-end" v-if="edit">
       <v-btn class="mt-1" color="secondary" dark @click="addNote">
-        <v-icon>mdi-plus</v-icon>
+        <v-icon>{{ $globals.icons.create }}</v-icon>
       </v-btn>
     </div>
   </div>

frontend/src/components/Recipe/RecipeEditor/index.vue

@@ -69,7 +69,7 @@
           <div class="d-flex row justify-end mt-2">
             <BulkAdd @bulk-data="appendSteps" class="mr-2" />
             <v-btn color="secondary" dark @click="addStep" class="mr-4">
-              <v-icon>mdi-plus</v-icon>
+              <v-icon>{{ $globals.icons.create }}</v-icon>
             </v-btn>
           </div>
           <Notes :edit="true" v-model="value.notes" />

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,