add badges to all cards

frontend/src/components/Recipe/FavoriteBadge.vue

@@ -1,6 +1,13 @@
 <template>
-  <v-btn small @click.prevent="toggleFavorite" v-if="isFavorite || showAlways" color="pink lighten-2" icon>
+  <v-btn
-    <v-icon small>
+    small
+    @click.prevent="toggleFavorite"
+    v-if="isFavorite || showAlways"
+    :color="isFavoite && buttonStyle ? 'secondary' : 'primary'"
+    :icon="!buttonStyle"
+    :fab="buttonStyle"
+  >
+    <v-icon :small="!buttonStyle" color="secondary">
       {{ isFavorite ? "mdi-heart" : "mdi-heart-outline" }}
     </v-icon>
   </v-btn>
@@ -17,6 +24,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    buttonStyle: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     user() {

frontend/src/components/Recipe/MobileRecipeCard.vue

@@ -23,6 +23,7 @@
           <v-list-item-title class=" mb-1">{{ name }} </v-list-item-title>
           <v-list-item-subtitle> {{ description }} </v-list-item-subtitle>
           <div class="d-flex justify-center align-center">
+            <FavoriteBadge v-if="loggedIn" :slug="slug" show-always />
             <v-rating
               color="secondary"
               class="ml-auto"
@@ -42,10 +43,12 @@
 </template>
 
 <script>
+import FavoriteBadge from "@/components/Recipe/FavoriteBadge";
 import ContextMenu from "@/components/Recipe/ContextMenu";
 import { api } from "@/api";
 export default {
   components: {
+    FavoriteBadge,
     ContextMenu,
   },
   props: {
@@ -71,6 +74,11 @@ export default {
       return api.recipes.recipeSmallImage(slug, this.image);
     },
   },
+  computed: {
+    loggedIn() {
+      return this.$store.getters.getIsLoggedIn;
+    },
+  },
 };
 </script>
 

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

@@ -3,7 +3,7 @@
     <slot v-bind="{ open, close }"> </slot>
     <v-dialog
       v-model="dialog"
-      :width="isMobile ? undefined : '700'"
+      :width="isMobile ? undefined : '65%'"
       :height="isMobile ? undefined : '0'"
       :fullscreen="isMobile"
       content-class="top-dialog"

frontend/src/components/UI/SiteLoader.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-progress-circular class="mx-auto" :width="size / 20" :size="size" color="primary lighten-2" indeterminate>
+  <v-progress-circular class="mx-auto" :width="size / 50" :size="size" color="primary lighten-2" indeterminate>
     <div class="text-center">
       <v-icon :size="size / 2" color="primary lighten-2">
         {{ $globals.icons.primary }}

frontend/src/pages/HomePage.vue

@@ -1,7 +1,7 @@
 <template>
   <v-container>
     <CardSection
-      title-icon=""
+      title-icon="mdi-test"
       v-if="siteSettings.showRecent"
       :title="$t('page.recent')"
       :recipes="recentRecipes"

frontend/src/pages/Recipe/ViewRecipe.vue

@@ -12,6 +12,7 @@
         class="d-print-none"
         :key="imageKey"
       >
+        <FavoriteBadge class="ma-1" button-style v-if="loggedIn" :slug="recipeDetails.slug" show-always />
         <RecipeTimeCard
           :class="isMobile ? undefined : 'force-bottom'"
           :prepTime="recipeDetails.prepTime"
@@ -49,6 +50,7 @@
 
 <script>
 import { api } from "@/api";
+import FavoriteBadge from "@/components/Recipe/FavoriteBadge";
 import VJsoneditor from "v-jsoneditor";
 import RecipeViewer from "@/components/Recipe/RecipeViewer";
 import PrintView from "@/components/Recipe/PrintView";
@@ -68,6 +70,7 @@ export default {
     RecipeTimeCard,
     PrintView,
     NoRecipe,
+    FavoriteBadge,
   },
   mixins: [user],
   inject: {
@@ -127,6 +130,9 @@ export default {
   },
 
   computed: {
+    loggedIn() {
+      return this.$store.getters.getIsLoggedIn;
+    },
     isMobile() {
       return this.$vuetify.breakpoint.name === "xs";
     },