UI: Facelift for v3

This commit is contained in:
Darko Gjorgjijoski
2026-04-04 01:52:03 +02:00
parent eb0a588164
commit 7fbe3d85a3
11 changed files with 78 additions and 1150 deletions

View File

@@ -74,9 +74,10 @@
w-8
h-8
ml-2
text-sm text-black
bg-white
rounded
text-sm text-white
bg-white/20
rounded-lg
hover:bg-white/30
md:h-9 md:w-9
"
>
@@ -143,7 +144,7 @@
<template #activator>
<img
:src="previewAvatar"
class="block w-8 h-8 rounded md:h-9 md:w-9 object-cover"
class="block w-8 h-8 rounded-full ring-2 ring-white/30 md:h-9 md:w-9 object-cover"
/>
</template>

View File

@@ -78,7 +78,7 @@
>
<div
v-if="menu[0] && menu[0].group_label"
class="px-4 pt-4 pb-1 text-xs font-semibold text-gray-400 uppercase tracking-wider border-t border-gray-200"
class="px-4 mt-6 mb-2 text-xs font-semibold text-gray-400 uppercase tracking-wider"
>
{{ $t(menu[0].group_label) }}
</div>
@@ -88,9 +88,9 @@
:to="item.link"
:class="[
hasActiveUrl(item.link)
? 'text-primary-500 border-l-primary-500 bg-gray-100 '
: 'text-black border-l-transparent',
'cursor-pointer px-0 pl-4 py-3 flex items-center border-l-4 border-solid text-sm not-italic font-medium',
? 'text-primary-600 bg-primary-50 font-semibold'
: 'text-gray-600 hover:bg-gray-50',
'cursor-pointer mx-3 px-3 py-2.5 flex items-center rounded-lg text-sm not-italic font-medium transition-colors',
]"
@click="globalStore.setSidebarVisibility(false)"
>
@@ -98,9 +98,9 @@
:name="item.icon"
:class="[
hasActiveUrl(item.link)
? 'text-primary-500 '
? 'text-primary-500'
: 'text-gray-400',
'mr-4 shrink-0 h-5 w-5',
'mr-3 shrink-0 h-5 w-5',
]"
@click="globalStore.setSidebarVisibility(false)"
/>
@@ -138,7 +138,7 @@
>
<div
v-if="menu[0] && menu[0].group_label"
class="px-6 pt-4 pb-1 text-xs font-semibold text-gray-400 uppercase tracking-wider border-t border-gray-200"
class="px-6 mt-6 mb-2 text-xs font-semibold text-gray-400 uppercase tracking-wider"
>
{{ $t(menu[0].group_label) }}
</div>
@@ -148,18 +148,18 @@
:to="item.link"
:class="[
hasActiveUrl(item.link)
? 'text-primary-500 border-l-primary-500 bg-gray-100 '
: 'text-black border-l-transparent',
'cursor-pointer px-0 pl-6 hover:bg-gray-50 py-3 group flex items-center border-l-4 border-solid text-sm not-italic font-medium',
? 'text-primary-600 bg-primary-50 font-semibold'
: 'text-gray-600 hover:bg-gray-50',
'cursor-pointer mx-3 px-3 py-2.5 group flex items-center rounded-lg text-sm not-italic font-medium transition-colors',
]"
>
<BaseIcon
:name="item.icon"
:class="[
hasActiveUrl(item.link)
? 'text-primary-500 group-hover:text-primary-500 '
: 'text-gray-400 group-hover:text-black',
'mr-4 shrink-0 h-5 w-5 ',
? 'text-primary-500'
: 'text-gray-400 group-hover:text-gray-600',
'mr-3 shrink-0 h-5 w-5',
]"
/>

View File

@@ -2,7 +2,7 @@
<div>
<div
v-if="dashboardStore.isDashboardDataLoaded"
class="grid grid-cols-10 mt-8 bg-white rounded shadow"
class="grid grid-cols-10 mt-8 bg-white rounded-xl shadow-sm border border-gray-100"
>
<!-- Chart -->
<div

View File

@@ -5,22 +5,24 @@
relative
flex
justify-between
p-3
p-5
bg-white
rounded
shadow
hover:bg-gray-50
xl:p-4
rounded-xl
shadow-sm
border border-gray-100
hover:shadow-md
transition-shadow
xl:p-6
lg:col-span-2
"
:class="{ 'lg:!col-span-3': large }"
:to="route"
>
<div>
<span class="text-xl font-semibold leading-tight text-black xl:text-3xl">
<span class="text-2xl font-bold leading-tight text-gray-900 xl:text-3xl">
<slot />
</span>
<span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg">
<span class="block mt-1 text-sm font-medium leading-tight text-gray-500 xl:text-base">
{{ label }}
</span>
</div>

View File

@@ -7,7 +7,7 @@
class="due-invoices"
>
<div class="relative z-10 flex items-center justify-between mb-3">
<h6 class="mb-0 text-xl font-semibold leading-normal">
<h6 class="mb-0 text-lg font-semibold leading-normal text-gray-900">
{{ $t('dashboard.recent_invoices_card.title') }}
</h6>
@@ -57,7 +57,7 @@
class="recent-estimates"
>
<div class="relative z-10 flex items-center justify-between mb-3">
<h6 class="mb-0 text-xl font-semibold leading-normal">
<h6 class="mb-0 text-lg font-semibold leading-normal text-gray-900">
{{ $t('dashboard.recent_estimate_card.title') }}
</h6>