fix user profile card visuals

This commit is contained in:
Kuchenpirat 2025-05-23 07:58:30 +00:00
commit ba87b92fea
2 changed files with 14 additions and 16 deletions

View file

@ -1,10 +1,11 @@
<template> <template>
<v-card <v-card
variant="text" variant="outlined"
style="border-color: lightgrey;"
nuxt nuxt
:to="link.to" :to="link.to"
height="100%" height="100%"
class="d-flex flex-column" class="d-flex flex-column mt-4"
> >
<div <div
v-if="$vuetify.display.smAndDown" v-if="$vuetify.display.smAndDown"
@ -18,7 +19,7 @@
</div> </div>
<div class="d-flex justify-space-between"> <div class="d-flex justify-space-between">
<div> <div>
<v-card-title class="headline pb-0"> <v-card-title class="text-subtitle-1 pb-0">
<slot name="title" /> <slot name="title" />
</v-card-title> </v-card-title>
<div class="d-flex justify-center align-center"> <div class="d-flex justify-center align-center">

View file

@ -7,7 +7,7 @@
:user-id="user.id" :user-id="user.id"
/> />
<h2 class="headline"> <h2 class="text-h4">
{{ $t('profile.welcome-user', [user.fullName]) }} {{ $t('profile.welcome-user', [user.fullName]) }}
</h2> </h2>
<p class="subtitle-1 mb-0 text-center"> <p class="subtitle-1 mb-0 text-center">
@ -24,20 +24,17 @@
v-if="user.canInvite" v-if="user.canInvite"
variant="outlined" variant="outlined"
rounded rounded
:prepend-icon="$globals.icons.createAlt"
:text="$t('profile.get-invite-link')"
@click="inviteDialog = true" @click="inviteDialog = true"
> />
<v-icon start>
{{ $globals.icons.createAlt }}
</v-icon>
{{ $t('profile.get-invite-link') }}
</v-btn>
</v-card-actions> </v-card-actions>
<UserInviteDialog v-model="inviteDialog" /> <UserInviteDialog v-model="inviteDialog" />
</v-card> </v-card>
</section> </section>
<section class="my-3"> <section class="my-3">
<div> <div>
<h3 class="headline"> <h3 class="text-h5">
{{ $t('profile.account-summary') }} {{ $t('profile.account-summary') }}
</h3> </h3>
<p>{{ $t('profile.account-summary-description') }}</p> <p>{{ $t('profile.account-summary-description') }}</p>
@ -48,8 +45,8 @@
sm="12" sm="12"
md="12" md="12"
> >
<v-card variant="text"> <v-card variant="outlined" style="border-color: lightgray;" class="mt-4">
<v-card-title class="headline pb-0"> <v-card-title class="text-h6 pb-0">
{{ $t('profile.household-statistics') }} {{ $t('profile.household-statistics') }}
</v-card-title> </v-card-title>
<v-card-text class="py-0"> <v-card-text class="py-0">
@ -81,7 +78,7 @@
<v-divider class="my-7" /> <v-divider class="my-7" />
<section> <section>
<div> <div>
<h3 class="headline"> <h3 class="text-h6">
{{ $t('profile.personal') }} {{ $t('profile.personal') }}
</h3> </h3>
<p>{{ $t('profile.personal-description') }}</p> <p>{{ $t('profile.personal-description') }}</p>
@ -124,7 +121,7 @@
<v-divider class="my-7" /> <v-divider class="my-7" />
<section> <section>
<div> <div>
<h3 class="headline"> <h3 class="text-h6">
{{ $t('household.household') }} {{ $t('household.household') }}
</h3> </h3>
<p>{{ $t('profile.household-description') }}</p> <p>{{ $t('profile.household-description') }}</p>
@ -217,7 +214,7 @@
<v-divider class="my-7" /> <v-divider class="my-7" />
<section v-if="user.canManage || user.canOrganize || user.advanced"> <section v-if="user.canManage || user.canOrganize || user.advanced">
<div> <div>
<h3 class="headline"> <h3 class="text-h6">
{{ $t('group.group') }} {{ $t('group.group') }}
</h3> </h3>
<p>{{ $t('profile.group-description') }}</p> <p>{{ $t('profile.group-description') }}</p>