feat: ui fixes & backup link on onboarding screen (#7743)

frontend/app/components/Domain/Group/GroupAIProviderDialog.vue

@@ -89,7 +89,7 @@
         </v-expansion-panels>
       </v-form>
     </v-card-text>
-    <AppLoader v-else waiting-text="" />
+    <AppLoader v-else />
   </BaseDialog>
 </template>
 

frontend/app/components/Domain/Recipe/RecipeCardSection.vue

@@ -158,6 +158,7 @@
       <AppLoader
         v-if="loading"
         :loading="loading"
+        :waiting-text="$t('general.loading-recipes')"
       />
     </v-fade-transition>
     <AppScrollToTop />

frontend/app/components/Domain/Recipe/RecipeLastMade.vue

@@ -22,7 +22,7 @@
               rows="4"
             />
             <div v-if="childRecipes?.length">
-              <v-card-text class="pt-6 pb-0">
+              <v-card-text class="pt-6 pb-0 text-title-medium">
                 {{ $t('recipe.include-linked-recipes') }}
               </v-card-text>
               <v-list>
@@ -45,14 +45,13 @@
               </v-list>
             </div>
             <v-container>
-              <v-row>
+              <v-row class="mt-4">
-                <v-col cols="6">
+                <v-col cols="5">
                   <v-menu
                     v-model="datePickerMenu"
                     :close-on-content-click="false"
                     transition="scale-transition"
                     offset-y
-                    max-width="290px"
                   >
                     <template #activator="{ props: activatorProps }">
                       <v-text-field
@@ -60,6 +59,8 @@
                         :prepend-icon="$globals.icons.calendar"
                         v-bind="activatorProps"
                         readonly
+                        density="compact"
+                        min-width="160"
                       />
                     </template>
                     <v-date-picker
@@ -72,7 +73,7 @@
                   </v-menu>
                 </v-col>
                 <v-spacer />
-                <v-col cols="auto" align-self="center">
+                <v-col cols="auto">
                   <AppButtonUpload
                     v-if="!newTimelineEventImage"
                     class="ml-auto"
@@ -93,7 +94,7 @@
                 </v-col>
               </v-row>
               <v-row v-if="newTimelineEventImage && newTimelineEventImagePreviewUrl">
-                <v-col cols="12" align-self="center">
+                <v-col cols="12">
                   <ImageCropper
                     :img="newTimelineEventImagePreviewUrl"
                     cropper-height="20vh"
@@ -115,16 +116,17 @@
               <v-btn
                 rounded
                 variant="outlined"
-                size="x-large"
+                size="large"
                 v-bind="tooltipProps"
+                class="font-weight-400"
                 style="border-color: rgb(var(--v-theme-primary));"
                 @click="madeThisDialog = true"
               >
                 <v-icon start size="large" color="primary">
                   {{ $globals.icons.calendar }}
                 </v-icon>
-                <span class="text-body-1 opacity-80">
+                <span class="opacity-80">
-                  <b>{{ $t("general.last-made") }}</b>
+                  <strong>{{ $t("general.last-made") }}</strong>
                   <br>
                   {{ lastMade ? $d(new Date(lastMade)) : $t("general.never") }}
                 </span>

frontend/app/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue

@@ -6,11 +6,11 @@
         :recipe="recipe"
       />
       <v-card
-        :width="landscape ? '100%' : '50%'"
+        :width="landscape || !recipe.image ? '100%' : '50%'"
         flat
         class="d-flex flex-column justify-center align-center"
       >
-        <v-card-text class="w-100">
+        <v-card-text>
           <div class="d-flex flex-column align-center">
             <v-card-title class="text-h5 font-weight-regular pa-0 text-wrap text-center opacity-80">
               {{ recipe.name }}
@@ -67,7 +67,7 @@
         </v-card-text>
       </v-card>
       <RecipePageInfoCardImage
-        v-if="!landscape"
+        v-if="!landscape && recipe.image"
         :recipe="recipe"
         max-width="50%"
         class="my-auto"

frontend/app/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageOrganizers.vue

@@ -54,7 +54,7 @@
     <!-- Recipe Tools Edit -->
     <v-card
       v-if="isEditForm"
-      class="mt-2"
+      class="mt-4"
     >
       <v-card-title class="py-2">
         {{ $t('tool.required-tools') }}
@@ -64,7 +64,6 @@
         <RecipeOrganizerSelector
           v-model="recipe.tools"
           selector-type="tools"
-          v-bind="$attrs"
         />
       </v-card-text>
     </v-card>

frontend/app/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageParseDialog.vue

@@ -8,7 +8,7 @@
   >
     <v-container fluid class="pa-2 ma-0" style="background-color: rgb(var(--v-theme-background));">
       <div v-if="state.loading.parser" class="my-6">
-        <AppLoader waiting-text="" class="my-6" />
+        <AppLoader class="my-6" />
       </div>
       <div v-else>
         <BaseCardSectionTitle :title="$t('recipe.parser.ingredient-parser')">

frontend/app/components/Domain/Recipe/RecipeTimeCard.vue

@@ -44,7 +44,7 @@
         >
           <v-icon
             :size="small ? 'small' : 'large'"
-            left
+            start
             color="primary"
           >
             {{ $globals.icons.knife }}
@@ -64,7 +64,7 @@
         >
           <v-icon
             :size="small ? 'small' : 'large'"
-            left
+            start
             color="primary"
           >
             {{ $globals.icons.potSteam }}

frontend/app/components/Domain/Recipe/RecipeTimeline.vue

@@ -18,13 +18,11 @@
               bordered
             >
               <v-btn
-                class="rounded-circle"
+                variant="text"
-                size="small"
-                color="info"
                 v-bind="activatorProps"
-                icon
+                :prepend-icon="$globals.icons.filter"
               >
-                <v-icon> {{ $globals.icons.filter }} </v-icon>
+                {{ $t("general.filter") }}
               </v-btn>
             </v-badge>
           </template>
@@ -39,28 +37,24 @@
               <v-list-item
                 v-for="option, idx in eventTypeFilterState"
                 :key="idx"
+                :active="option.checked"
+                :color="option.checked ? 'primary' : undefined"
+                @click="toggleEventTypeOption(option.value)"
               >
-                <v-checkbox
+                <template #prepend>
-                  :model-value="option.checked"
+                  <v-icon>
-                  color="primary"
+                    {{ option.icon }}
-                  readonly
+                  </v-icon>
-                  hide-details
+                </template>
-                  @click="toggleEventTypeOption(option.value)"
+                <v-list-item-title>
-                >
+                  {{ option.label }}
-                  <template #label>
+                </v-list-item-title>
-                    <v-icon start>
-                      {{ option.icon }}
-                    </v-icon>
-                    {{ option.label }}
-                  </template>
-                </v-checkbox>
               </v-list-item>
             </v-list>
           </v-card>
         </v-menu>
       </v-col>
     </v-row>
-    <v-divider class="mx-2" />
     <div
       v-if="timelineEvents.length"
       id="timeline-container"
@@ -213,7 +207,10 @@ async function deleteTimelineEvent(index: number) {
 }
 
 async function getRecipes(recipeIds: string[]): Promise<Recipe[]> {
-  const qf = "id IN [" + recipeIds.map(id => `"${id}"`).join(", ") + "]";
+  let qf = "";
+  if (recipeIds.length) {
+    qf = "id IN [" + recipeIds.map(id => `"${id}"`).join(", ") + "]";
+  }
   const { data } = await api.recipes.getAll(1, -1, { queryFilter: qf });
   return data?.items || [];
 }

frontend/app/components/Domain/Recipe/RecipeTimelineBadge.vue

@@ -31,7 +31,6 @@
         <RecipeTimeline
           v-model="showTimeline"
           :query-filter="timelineAttrs.queryFilter"
-          max-height="60vh"
         />
       </BaseDialog>
     </template>

frontend/app/components/Domain/Recipe/RecipeYield.vue

@@ -9,7 +9,7 @@
       style="font-size: larger;"
     >
       <v-icon
-        size="x-large"
+        size="large"
         start
         color="primary"
       >

frontend/app/components/Layout/LayoutParts/AppScrollToTop.vue

@@ -25,7 +25,7 @@ function onScroll() {
 }
 
 function scrollToTop() {
-  document.documentElement.scrollTop = 0;
+  window.scrollTo({ top: 0, behavior: "smooth" });
 }
 
 onMounted(() => {

frontend/app/components/global/AppLoader.vue

@@ -3,34 +3,21 @@
     class="mx-auto my-3 justify-center"
     style="display: flex;"
   >
-    <div style="display: inline;">
+    <div class="text-center">
       <v-progress-circular
         :width="size.width"
         :size="size.size"
         color="primary-lighten-2"
         indeterminate
       >
-        <div class="text-center">
+        <v-icon
-          <v-icon
+          :size="size.icon"
-            :size="size.icon"
+          color="primary-lighten-2"
-            color="primary-lighten-2"
+        >
-          >
+          {{ $globals.icons.primary }}
-            {{ $globals.icons.primary }}
+        </v-icon>
-          </v-icon>
-          <div
-            v-if="large"
-            class="text-small"
-          >
-            <slot>
-              {{ (small || tiny) ? "" : waitingText }}
-            </slot>
-          </div>
-        </div>
       </v-progress-circular>
-      <div
+      <div :class="large ? 'text-title-large mt-5' : 'text-body-large mt-3'">
-        v-if="!large"
-        class="text-small"
-      >
         <slot>
           {{ (small || tiny) ? "" : waitingTextCalculated }}
         </slot>
@@ -97,5 +84,5 @@ const size = computed(() => {
 });
 
 const i18n = useI18n();
-const waitingTextCalculated = props.waitingText == null ? i18n.t("general.loading-recipes") : props.waitingText;
+const waitingTextCalculated = props.waitingText == null ? i18n.t("general.loading") : props.waitingText;
 </script>

frontend/app/lang/messages/en-US.json

@@ -1399,10 +1399,10 @@
     "setup": {
       "first-time-setup": "First Time Setup",
       "welcome-to-mealie-get-started": "Welcome to Mealie! Let's get started",
+      "previous-mealie-instance": "Did you have a previous Mealie instance?",
       "already-set-up-bring-to-homepage": "I'm already set up, just bring me to the homepage",
       "common-settings-for-new-sites": "Here are some common settings for new sites",
       "setup-complete": "Setup Complete!",
-
       "ai-providers-description": "Optionally configure AI providers for your group. AI providers enable features like creating recipes from images, importing recipes from videos, and enhanced ingredient parsing. You can always configure this later from your group settings.",
       "here-are-a-few-things-to-help-you-get-started": "Here are a few things to help you get started with Mealie",
       "restore-from-v1-backup": "Have a backup from a previous instance of Mealie v1? You can restore it here.",

frontend/app/pages/admin/setup.vue

@@ -81,9 +81,22 @@
           <v-stepper-window-item :value="Pages.LANDING">
             <v-container class="mb-12">
               <AppLogo />
-              <v-card-title class="text-h4 justify-center text-center text-break text-pre-wrap">
+              <v-card-title class="text-headline-medium my-5 justify-center text-center text-break text-pre-wrap">
                 {{ $t('admin.setup.welcome-to-mealie-get-started') }}
               </v-card-title>
+              <p class="text-body-1 text-center">
+                {{ $t('admin.setup.previous-mealie-instance') }}
+              </p>
+              <v-btn
+                to="backups"
+                rounded
+                variant="outlined"
+                color="primary"
+                class="text-subtitle-2 d-flex mx-auto my-3"
+                style="width: fit-content;"
+              >
+                {{ $t('settings.backup.restore-backup') }}
+              </v-btn>
               <v-btn
                 :to="groupSlug ? `/g/${groupSlug}` : '/login'"
                 rounded

frontend/app/pages/admin/site-settings.vue

@@ -248,9 +248,7 @@
           </template>
         </template>
         <template v-else>
-          <div class="mb-3 text-center">
+          <AppLoader />
-            <AppLoader :waiting-text="$t('general.loading')" />
-          </div>
         </template>
       </v-card>
     </section>

frontend/app/pages/g/[groupSlug]/recipes/finder/index.vue

@@ -372,9 +372,7 @@
                 cols="12"
                 class="d-flex justify-center"
               >
-                <div class="text-center">
+                <AppLoader :waiting-text="$t('general.loading-recipes')" />
-                  <AppLoader waiting-text="" />
-                </div>
               </v-col>
             </v-row>
           </v-container>
@@ -402,9 +400,7 @@
           cols="12"
           class="d-flex justify-center"
         >
-          <div class="text-center">
+          <AppLoader :waiting-text="$t('general.loading-recipes')" />
-            <AppLoader waiting-text="" />
-          </div>
         </v-col>
       </v-row>
     </v-container>