profile: update card style

This commit is contained in:
axolotle 2024-02-21 00:13:03 +01:00
parent 2d652abc2f
commit 19f77c1d0f

View file

@ -78,25 +78,31 @@ const themesAsOptions = [
<div class="lg:flex lg:justify-between"> <div class="lg:flex lg:justify-between">
<section <section
class="lg:w-1/2 lg:me-20 h-full card card-body border border-neutral my-10" class="lg:w-1/2 lg:me-20 h-full card card-bordered border-base-300 my-10"
> >
<h2 class="text-3xl mb-3">{{ t('edit_personal_settings') }}</h2> <div class="card-header bg-base-300 py-4 px-8">
<h2 class="text-3xl">{{ t('edit_personal_settings') }}</h2>
</div>
<UserInfoForm /> <UserInfoForm class="p-8" />
</section> </section>
<section class="lg:w-1/2 card card-body border border-neutral my-10"> <section class="lg:w-1/2 card card-bordered border-base-300 my-10">
<h2 class="text-3xl mb-3">{{ $t('change_password') }}</h2> <div class="card-header bg-base-300 py-4 px-8">
<h2 class="text-3xl">{{ $t('change_password') }}</h2>
</div>
<UserPasswordForm /> <UserPasswordForm class="p-8" />
</section> </section>
</div> </div>
<section class="card card-body border border-neutral my-10"> <section class="card card-bordered border-base-300 my-10">
<h2 class="text-3xl mb-3">{{ t('edit_browser_settings') }}</h2> <div class="card-header bg-base-300 py-4 px-8">
<h2 class="text-3xl">{{ t('edit_browser_settings') }}</h2>
</div>
<form novalidate @submit.prevent> <form class="p-8" novalidate @submit.prevent>
<div role="group" class="flex align mb-3"> <div role="group" class="flex flex-wrap align mb-3">
<!-- eslint-disable-next-line vuejs-accessibility/label-has-for --> <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
<label for="language" class="label me-3">{{ t('language') }}</label> <label for="language" class="label me-3">{{ t('language') }}</label>
<select <select
@ -115,7 +121,7 @@ const themesAsOptions = [
</select> </select>
</div> </div>
<div role="group" class="flex align"> <div role="group" class="flex flex-wrap align">
<!-- eslint-disable-next-line vuejs-accessibility/label-has-for --> <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
<label for="theme" class="label me-3">{{ t('theme') }}</label> <label for="theme" class="label me-3">{{ t('theme') }}</label>
<select <select
@ -216,6 +222,10 @@ const themesAsOptions = [
</template> </template>
<style scoped> <style scoped>
.card .card-header {
border-top-left-radius: var(--rounded-box);
border-top-right-radius: var(--rounded-box);
}
.theme-override input.input { .theme-override input.input {
min-height: 2rem; min-height: 2rem;
height: 2rem; height: 2rem;