From f58c3dac378baa3c33bfb0f3972c5cd63ef0eb43 Mon Sep 17 00:00:00 2001
From: Kuchenpirat <jojow@gmx.net>
Date: Fri, 23 May 2025 09:06:32 +0000
Subject: [PATCH] fix household settings page visuals as well as connected
 components

---
 .../Household/HouseholdPreferencesEditor.vue  | 22 ++++++++++++-------
 .../global/BaseCardSectionTitle.vue           |  4 ++--
 frontend/components/global/BasePageTitle.vue  |  2 +-
 frontend/pages/household/index.vue            | 15 ++++---------
 frontend/pages/user/profile/edit.vue          | 13 +++++++++++
 5 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/frontend/components/Domain/Household/HouseholdPreferencesEditor.vue b/frontend/components/Domain/Household/HouseholdPreferencesEditor.vue
index e8520e34a..ea1df3670 100644
--- a/frontend/components/Domain/Household/HouseholdPreferencesEditor.vue
+++ b/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"
-				:label="$t('household.private-household')" />
+			<v-checkbox v-model="preferences.privateHousehold" hide-details density="compact" :label="$t('household.private-household')" color="primary" />
 			<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"
-				:label="$t('household.lock-recipe-edits-from-other-households')" />
+			<v-checkbox v-model="preferences.lockRecipeEditsFromOtherHouseholds" hide-details density="compact" :label="$t('household.lock-recipe-edits-from-other-households')" color="primary" />
 			<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"
-			item-title="name" item-value="value" :label="$t('settings.first-day-of-week')" variant="solo-filled" flat />
+		<v-select
+			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>
diff --git a/frontend/components/global/BaseCardSectionTitle.vue b/frontend/components/global/BaseCardSectionTitle.vue
index 7632ba516..031634819 100644
--- a/frontend/components/global/BaseCardSectionTitle.vue
+++ b/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 }}
diff --git a/frontend/components/global/BasePageTitle.vue b/frontend/components/global/BasePageTitle.vue
index e912fb04f..0e45c30d7 100644
--- a/frontend/components/global/BasePageTitle.vue
+++ b/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>
diff --git a/frontend/pages/household/index.vue b/frontend/pages/household/index.vue
index 2c2655ae6..502909a1a 100644
--- a/frontend/pages/household/index.vue
+++ b/frontend/pages/household/index.vue
@@ -16,21 +16,14 @@
       </template>
       {{ $t("profile.household-description") }}
     </BasePageTitle>
-    <v-form ref="refHouseholdEditForm"
-            @submit.prevent="handleSubmit"
-    >
-      <v-card variant="outlined">
+    <v-form ref="refHouseholdEditForm" @submit.prevent="handleSubmit">
+      <v-card variant="outlined" style="border-color: lightgray;">
         <v-card-text>
-          <HouseholdPreferencesEditor v-if="household.preferences"
-                                      v-model="household.preferences"
-          />
+          <HouseholdPreferencesEditor v-if="household.preferences" v-model="household.preferences" />
         </v-card-text>
       </v-card>
       <div class="d-flex pa-2">
-        <BaseButton type="submit"
-                    edit
-                    class="ml-auto"
-        >
+        <BaseButton type="submit" edit class="ml-auto">
           {{ $t("general.update") }}
         </BaseButton>
       </div>
diff --git a/frontend/pages/user/profile/edit.vue b/frontend/pages/user/profile/edit.vue
index 60caf823d..69a570282 100644
--- a/frontend/pages/user/profile/edit.vue
+++ b/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" />