visual improvements

frontend/components/Domain/QueryFilterBuilder.vue

@@ -189,6 +189,7 @@
                 :show-add="false"
                 :show-label="false"
                 :show-icon="false"
+                variant="underlined"
                 @update:model-value="setOrganizerValues(field, index, $event)"
               />
               <RecipeOrganizerSelector
@@ -198,6 +199,7 @@
                 :show-add="false"
                 :show-label="false"
                 :show-icon="false"
+                variant="underlined"
                 @update:model-value="setOrganizerValues(field, index, $event)"
               />
               <RecipeOrganizerSelector
@@ -207,6 +209,7 @@
                 :show-add="false"
                 :show-label="false"
                 :show-icon="false"
+                variant="underlined"
                 @update:model-value="setOrganizerValues(field, index, $event)"
               />
               <RecipeOrganizerSelector
@@ -216,6 +219,7 @@
                 :show-add="false"
                 :show-label="false"
                 :show-icon="false"
+                variant="underlined"
                 @update:model-value="setOrganizerValues(field, index, $event)"
               />
               <RecipeOrganizerSelector
@@ -225,6 +229,7 @@
                 :show-add="false"
                 :show-label="false"
                 :show-icon="false"
+                variant="underlined"
                 @update:model-value="setOrganizerValues(field, index, $event)"
               />
             </v-col>

frontend/components/Domain/Recipe/RecipeOrganizerSelector.vue

@@ -9,9 +9,9 @@
     closable-chips
     item-title="name"
     multiple
-    variant="outlined"
+    :variant="variant"
     :prepend-inner-icon="icon"
-    :append-icon="$globals.icons.create"
+    :append-icon="showAdd ? $globals.icons.create : undefined"
     return-object
     auto-select-first
     class="pa-0"
@@ -93,6 +93,10 @@ export default defineNuxtComponent({
       type: Boolean,
       default: true,
     },
+    variant: {
+      type: String as () => "filled" | "underlined" | "outlined" | "plain" | "solo" | "solo-inverted" | "solo-filled",
+      default: "outlined",
+    },
   },
   emits: ["update:modelValue"],
 

frontend/components/Domain/User/UserInviteDialog.vue

@@ -32,11 +32,11 @@
         <v-row>
           <v-col cols="9">
             <v-text-field
+              v-model="generatedSignupLink"
               :label="$t('profile.invite-link')"
               type="text"
               readonly
               variant="filled"
-              :value="generatedSignupLink"
             />
           </v-col>
           <v-col

frontend/components/global/BaseDialog.vue

@@ -29,7 +29,6 @@
           <v-toolbar-title class="headline">
             {{ title }}
           </v-toolbar-title>
-          <v-spacer />
         </v-toolbar>
         <v-progress-linear
           v-if="loading"

frontend/lib/icons/icons.ts

@@ -150,6 +150,7 @@ import {
   mdiCodeTags,
   mdiKnife,
   mdiCookie,
+  mdiBellPlus,
 } from "@mdi/js";
 
 export const icons = {
@@ -174,6 +175,7 @@ export const icons = {
   arrowUpDown: mdiDrag,
   backupRestore: mdiBackupRestore,
   bellAlert: mdiBellAlert,
+  bellPlus: mdiBellPlus,
   broom: mdiBroom,
   calendar: mdiCalendar,
   calendarMinus: mdiCalendarMinus,

frontend/pages/g/[groupSlug]/recipes/timeline.vue

@@ -2,7 +2,7 @@
   <div>
     <BasePageTitle
       v-if="groupName"
-      class="bg-grey-darken-4 mt-n4 pt-8"
+      class="mt-n4 pt-8"
     >
       <template #header>
         <v-img

frontend/pages/group/migrations.vue

@@ -15,11 +15,12 @@
       </template>
       {{ $t('migration.recipe-data-migrations-explanation') }}
     </BasePageTitle>
-    <v-container>
+    <v-container class="px-0">
       <BaseCardSectionTitle :title="$t('migration.new-migration')" />
       <v-card
         variant="outlined"
         :loading="loading"
+        style="border-color: lightgrey;"
       >
         <v-card-title> {{ $t('migration.choose-migration-type') }} </v-card-title>
         <v-card-text
@@ -83,7 +84,7 @@
         </v-card-actions>
       </v-card>
     </v-container>
-    <v-container>
+    <v-container class="px-0">
       <BaseCardSectionTitle :title="$t('migration.previous-migrations')" />
       <ReportTable
         :items="reports"

frontend/pages/household/notifiers.vue

@@ -15,6 +15,7 @@
     <BaseDialog
       v-model="createDialog"
       :title="$t('events.new-notification')"
+      :icon="$globals.icons.bellPlus"
       can-submit
       @submit="createNewNotifier"
     >
@@ -95,7 +96,7 @@
       >
         <v-expansion-panel-title
           disable-icon-rotate
-          class="headline"
+          class="text-h6"
         >
           <div class="d-flex align-center">
             {{ notifier.name }}
@@ -103,6 +104,7 @@
           <template #actions>
             <v-btn
               icon
+              flat
               class="ml-2"
             >
               <v-icon>