More localization (#525)

* More localization

* Localize search dialog

* Fix "about" page title

frontend/src/components/MealPlan/MealPlanCard.vue

@@ -4,14 +4,14 @@
     <BaseDialog
       title="Custom Meal"
       :title-icon="$globals.icons.primary"
-      submit-text="Save"
+      :submit-text="$t('general.save')"
       :top="true"
       ref="customMealDialog"
       @submit="pushCustomMeal"
     >
       <v-card-text>
-        <v-text-field autofocus v-model="customMeal.name" label="Name"> </v-text-field>
-        <v-textarea v-model="customMeal.description" label="Description"> </v-textarea>
+        <v-text-field autofocus v-model="customMeal.name" :label="$t('general.name')"> </v-text-field>
+        <v-textarea v-model="customMeal.description" :label="$t('recipe.description')"> </v-textarea>
       </v-card-text>
     </BaseDialog>
     <v-col cols="12" sm="12" md="6" lg="4" xl="3" v-for="(planDay, index) in value" :key="index">
@@ -23,7 +23,7 @@
                 <v-icon left>
                   {{ $globals.icons.edit }}
                 </v-icon>
-                No Recipe
+                {{ $t('reicpe.no-recipe') }}
               </v-btn>
             </v-fade-transition>
           </CardImage>
@@ -40,14 +40,14 @@
                   <v-icon left>
                     {{ $globals.icons.edit }}
                   </v-icon>
-                  No Recipe
+                  {{ $t('reicpe.no-recipe') }}
                 </v-btn>
               </v-fade-transition>
               <v-btn color="info" outlined small @click="openSearch(index, modes.sides)">
                 <v-icon small class="mr-1">
                   {{ $globals.icons.create }}
                 </v-icon>
-                Side
+                {{ $t('meal-plan.side') }}
               </v-btn>
             </v-card-actions>
           </v-hover>

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

@@ -4,7 +4,7 @@
       <v-icon large class="mr-2">
         mdi-comment-text-multiple-outline
       </v-icon>
-      Comments
+      {{ $t('recipe.comments') }}
     </v-card-title>
     <v-divider class="mx-2"></v-divider>
     <v-card class="ma-2" v-for="(comment, index) in comments" :key="comment.id">
@@ -43,7 +43,7 @@
     <v-card-text v-if="loggedIn">
       <v-textarea auto-grow row-height="1" outlined v-model="newComment"> </v-textarea>
       <div class="d-flex">
-        <TheButton class="ml-auto" create @click="createNewComment"> Comment </TheButton>
+        <TheButton class="ml-auto" create @click="createNewComment"> {{ $t('recipe.comment-action') }} </TheButton>
       </div>
     </v-card-text>
   </v-card>

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

@@ -14,7 +14,7 @@
             dense
             solo
             flat
-            placeholder="Section Title"
+            :placeholder="$t('recipe.section-title')"
             background-color="primary"
           >
           </v-text-field>
@@ -41,7 +41,7 @@
               </v-btn>
               {{ $t("recipe.step-index", { step: index + 1 }) }}
               <v-btn v-if="edit" text color="primary" class="ml-auto" @click="toggleShowTitle(index)">
-                {{ !showTitleEditor[index] ? "Insert Section" : "Remove Section" }}
+                {{ !showTitleEditor[index] ? $t('recipe.insert-section') : $t('recipe.remove-section') }}
               </v-btn>
             </v-card-title>
             <v-card-text v-if="edit">

frontend/src/components/Recipe/RecipePageActionMenu.vue

@@ -78,34 +78,39 @@ export default {
   data() {
     return {
       edit: false,
-      editorButtons: [
-        {
-          text: "Delete",
-          icon: this.$globals.icons.delete,
-          event: DELETE_EVENT,
-          color: "error",
-        },
-        {
-          text: "JSON",
-          icon: "mdi-code-braces",
-          event: JSON_EVENT,
-          color: "accent",
-        },
-        {
-          text: "Close",
-          icon: "mdi-close",
-          event: CLOSE_EVENT,
-          color: "",
-        },
-        {
-          text: "Save",
-          icon: this.$globals.icons.save,
-          event: SAVE_EVENT,
-          color: "success",
-        },
-      ],
     };
   },
+  
+  computed: {
+      editorButtons() {
+        return [
+          {
+            text: this.$t('general.delete'),
+            icon: this.$globals.icons.delete,
+            event: DELETE_EVENT,
+            color: "error",
+          },
+          {
+            text: this.$t('general.json'),
+            icon: "mdi-code-braces",
+            event: JSON_EVENT,
+            color: "accent",
+          },
+          {
+            text: this.$t('general.close'),
+            icon: "mdi-close",
+            event: CLOSE_EVENT,
+            color: "",
+          },
+          {
+            text: this.$t('general.save'),
+            icon: this.$globals.icons.save,
+            event: SAVE_EVENT,
+            color: "success",
+          },
+        ]; 
+      },
+  },
   methods: {
     emitHandler(event) {
       switch (event) {

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

@@ -39,9 +39,9 @@
       <v-card class="mt-1 pa-1" relative>
         <v-card-actions>
           <div class="mr-auto">
-            Results
+            {{ $t('search.results') }}
           </div>
-          <router-link to="/search"> Advanced Search </router-link>
+          <router-link to="/search"> {{ $t('search.advanced-search') }} </router-link>
         </v-card-actions>
         <v-card-actions v-if="loading">
           <SiteLoader :loading="loading" />

frontend/src/components/UI/TheSidebar.vue

@@ -9,7 +9,7 @@
             <v-icon> mdi-heart </v-icon>
           </v-list-item-icon>
           <v-list-item-content>
-            <v-list-item-title> Favorites </v-list-item-title>
+            <v-list-item-title> {{ $t('general.favorites') }} </v-list-item-title>
           </v-list-item-content>
         </v-list-item>
       </template>