fix household settings page visuals as well as connected components

frontend/components/Domain/Household/HouseholdPreferencesEditor.vue

@@ -1,9 +1,8 @@
 <template>
 	<div v-if="preferences">
-		<BaseCardSectionTitle class="mt-10" :title="$t('household.household-preferences')" />
+		<BaseCardSectionTitle :title="$t('household.household-preferences')" />
 		<div class="mb-6">
-			<v-checkbox v-model="preferences.privateHousehold" hide-details density="compact"
+			<v-checkbox v-model="preferences.privateHousehold" hide-details density="compact" :label="$t('household.private-household')" color="primary" />
-				:label="$t('household.private-household')" />
 			<div class="ml-8">
 				<p class="text-subtitle-2 my-0 py-0">
 					{{ $t("household.private-household-description") }}
@@ -12,21 +11,28 @@
 			</div>
 		</div>
 		<div class="mb-6">
-			<v-checkbox v-model="preferences.lockRecipeEditsFromOtherHouseholds" hide-details density="compact"
+			<v-checkbox v-model="preferences.lockRecipeEditsFromOtherHouseholds" hide-details density="compact" :label="$t('household.lock-recipe-edits-from-other-households')" color="primary" />
-				:label="$t('household.lock-recipe-edits-from-other-households')" />
 			<div class="ml-8">
 				<p class="text-subtitle-2 my-0 py-0">
 					{{ $t("household.lock-recipe-edits-from-other-households-description") }}
 				</p>
 			</div>
 		</div>
-		<v-select v-model="preferences.firstDayOfWeek" :prepend-icon="$globals.icons.calendarWeekBegin" :items="allDays"
+		<v-select
-			item-title="name" item-value="value" :label="$t('settings.first-day-of-week')" variant="solo-filled" flat />
+			v-model="preferences.firstDayOfWeek"
+			:prepend-icon="$globals.icons.calendarWeekBegin"
+			:items="allDays"
+			item-title="name"
+			item-value="value"
+			:label="$t('settings.first-day-of-week')"
+			variant="underlined"
+			flat
+		/>
 
 		<BaseCardSectionTitle class="mt-5" :title="$t('household.household-recipe-preferences')" />
 		<div class="preference-container">
 			<div v-for="p in recipePreferences" :key="p.key">
-				<v-checkbox v-model="preferences[p.key]" hide-details density="compact" :label="p.label" />
+				<v-checkbox v-model="preferences[p.key]" hide-details density="compact" :label="p.label" color="primary" />
 				<p class="ml-8 text-subtitle-2 my-0 py-0">
 					{{ p.description }}
 				</p>

frontend/components/global/BaseCardSectionTitle.vue

@@ -7,9 +7,9 @@
       'mt-8': section,
     }"
   >
-    <v-card-title class="headline pl-0 py-0">
+    <v-card-title class="text-h5 pl-0 py-0" style="font-weight: normal;">
       <v-icon
-        v-if="icon !== ''"
+        v-if="icon"
         start
       >
         {{ icon }}

frontend/components/global/BasePageTitle.vue

@@ -2,7 +2,7 @@
   <div class="mt-4">
     <section class="d-flex flex-column align-center">
       <slot name="header" />
-      <h2 class="headline">
+      <h2 class="text-h5">
         <slot name="title">
           👋 Here's a Title
         </slot>

frontend/pages/household/index.vue

@@ -16,21 +16,14 @@
       </template>
       {{ $t("profile.household-description") }}
     </BasePageTitle>
-    <v-form ref="refHouseholdEditForm"
+    <v-form ref="refHouseholdEditForm" @submit.prevent="handleSubmit">
-            @submit.prevent="handleSubmit"
+      <v-card variant="outlined" style="border-color: lightgray;">
-    >
-      <v-card variant="outlined">
         <v-card-text>
-          <HouseholdPreferencesEditor v-if="household.preferences"
+          <HouseholdPreferencesEditor v-if="household.preferences" v-model="household.preferences" />
-                                      v-model="household.preferences"
-          />
         </v-card-text>
       </v-card>
       <div class="d-flex pa-2">
-        <BaseButton type="submit"
+        <BaseButton type="submit" edit class="ml-auto">
-                    edit
-                    class="ml-auto"
-        >
           {{ $t("general.update") }}
         </BaseButton>
       </div>

frontend/pages/user/profile/edit.vue

@@ -64,6 +64,7 @@
               <v-card
                 tag="article"
                 variant="outlined"
+                style="border-color: lightgrey;"
               >
                 <v-card-text class="pb-0">
                   <v-form ref="userUpdate">
@@ -72,18 +73,24 @@
                       :label="$t('user.username')"
                       required
                       validate-on="blur"
+                      density="comfortable"
+                      variant="underlined"
                     />
                     <v-text-field
                       v-model="userCopy.fullName"
                       :label="$t('user.full-name')"
                       required
                       validate-on="blur"
+                      density="comfortable"
+                      variant="underlined"
                     />
                     <v-text-field
                       v-model="userCopy.email"
                       :label="$t('user.email')"
                       validate-on="blur"
                       required
+                      density="comfortable"
+                      variant="underlined"
                     />
                   </v-form>
                 </v-card-text>
@@ -115,6 +122,8 @@
                       :type="showPassword ? 'text' : 'password'"
                       :append-icon="showPassword ? $globals.icons.eye : $globals.icons.eyeOff"
                       :rules="[validators.minLength(1)]"
+                      density="comfortable"
+                      variant="underlined"
                       @click:append="showPassword = !showPassword"
                     />
                     <v-text-field
@@ -124,6 +133,8 @@
                       :type="showPassword ? 'text' : 'password'"
                       :append-icon="showPassword ? $globals.icons.eye : $globals.icons.eyeOff"
                       :rules="[validators.minLength(8)]"
+                      density="comfortable"
+                      variant="underlined"
                       @click:append="showPassword = !showPassword"
                     />
                     <v-text-field
@@ -134,6 +145,8 @@
                       validate-on="blur"
                       :type="showPassword ? 'text' : 'password'"
                       :append-icon="showPassword ? $globals.icons.eye : $globals.icons.eyeOff"
+                      density="comfortable"
+                      variant="underlined"
                       @click:append="showPassword = !showPassword"
                     />
                     <UserPasswordStrength :value="password.newOne" />