Add dark mode with CSS custom property theme system

Define 13 semantic color tokens (surface, text, border, hover) with
light/dark values in themes.css. Register with Tailwind via @theme inline.
Migrate all 335 Vue files from hardcoded gray/white classes to semantic
tokens. Add theme toggle (sun/moon/system) in user avatar dropdown.
Replace @tailwindcss/forms with custom form reset using theme vars.
Add status badge and alert tokens for dark mode. Theme-aware chart
grid/labels, skeleton placeholders, and editor. Inline script in
<head> prevents flash of wrong theme on load.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Darko Gjorgjijoski
2026-04-04 02:05:00 +02:00
parent 7fbe3d85a3
commit 88adfe0e50
221 changed files with 1265 additions and 982 deletions

View File

@@ -6,7 +6,7 @@
px-4
py-2
rounded-lg
bg-gray-300/40
bg-surface-muted/40
whitespace-nowrap
flex-col
mt-1
@@ -18,7 +18,7 @@
pr-10
text-sm
font-medium
text-black
text-heading
truncate
select-all select-color
"

View File

@@ -53,13 +53,13 @@
ring-1 ring-black/5
"
>
<div class="relative grid bg-white">
<div class="relative grid bg-surface">
<div class="relative p-4">
<BaseInput
v-model="textSearch"
:placeholder="$t('general.search')"
type="text"
class="text-black"
class="text-heading"
>
</BaseInput>
</div>
@@ -75,9 +75,9 @@
class="
px-6
py-4
border-b border-gray-200 border-solid
border-b border-line-default border-solid
cursor-pointer
hover:bg-gray-100 hover:cursor-pointer
hover:bg-surface-tertiary hover:cursor-pointer
last:border-b-0
"
@click="selectNote(index, close)"
@@ -89,7 +89,7 @@
text-base
font-semibold
leading-tight
text-gray-700
text-body
cursor-pointer
"
>
@@ -98,8 +98,8 @@
</div>
</div>
</div>
<div v-else class="flex justify-center p-5 text-gray-400">
<label class="text-base text-gray-500">
<div v-else class="flex justify-center p-5 text-subtle">
<label class="text-base text-muted">
{{ $t('general.no_note_found') }}
</label>
</div>
@@ -115,7 +115,7 @@
w-full
px-2
py-3
bg-gray-200
bg-surface-muted
border-none
outline-hidden
"

View File

@@ -62,9 +62,23 @@ watchEffect(() => {
onMounted(() => {
let context = graph.value.getContext('2d')
const style = getComputedStyle(document.documentElement)
const gridColor = style.getPropertyValue('--color-line-light').trim() || 'rgba(0,0,0,0.1)'
const tickColor = style.getPropertyValue('--color-muted').trim() || '#6b7280'
let options = reactive({
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
grid: { color: gridColor },
ticks: { color: tickColor },
},
y: {
grid: { color: gridColor },
ticks: { color: tickColor },
},
},
plugins: {
tooltip: {
enabled: true,
@@ -91,16 +105,16 @@ onMounted(() => {
fill: false,
tension: 0.3,
backgroundColor: 'rgba(230, 254, 249)',
borderColor: '#040405',
borderColor: tickColor,
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: '#040405',
pointBackgroundColor: '#fff',
pointBorderColor: tickColor,
pointBackgroundColor: style.getPropertyValue('--color-surface').trim() || '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: '#040405',
pointHoverBackgroundColor: tickColor,
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 4,
@@ -118,7 +132,7 @@ onMounted(() => {
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(2, 201, 156)',
pointBackgroundColor: '#fff',
pointBackgroundColor: style.getPropertyValue('--color-surface').trim() || '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgb(2, 201, 156)',
@@ -139,7 +153,7 @@ onMounted(() => {
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(255,0,0)',
pointBackgroundColor: '#fff',
pointBackgroundColor: style.getPropertyValue('--color-surface').trim() || '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgb(255,0,0)',
@@ -160,7 +174,7 @@ onMounted(() => {
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(88, 81, 216, 1)',
pointBackgroundColor: '#fff',
pointBackgroundColor: style.getPropertyValue('--color-surface').trim() || '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(88, 81, 216, 1)',

View File

@@ -3,7 +3,7 @@
<h6 class="font-medium text-lg text-left">
{{ $t('settings.exchange_rate.title') }}
</h6>
<p class="mt-2 text-sm leading-snug text-gray-500" style="max-width: 680px">
<p class="mt-2 text-sm leading-snug text-muted" style="max-width: 680px">
{{
$t('settings.exchange_rate.description', {
currency: companyStore.selectedCompanyCurrency.name,
@@ -34,12 +34,12 @@
@input="v.exchange_rate.$touch()"
>
<template #right>
<span class="text-gray-500 sm:text-sm">
<span class="text-muted sm:text-sm">
{{ companyStore.selectedCompanyCurrency.code }}
</span>
</template>
</BaseInput>
<span class="text-gray-400 text-xs mt-2 font-light">
<span class="text-subtle text-xs mt-2 font-light">
{{
$t('settings.exchange_rate.exchange_help_text', {
currency: c.code,

View File

@@ -1,14 +1,14 @@
<template>
<BaseDropdown>
<template #activator>
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<router-link :to="`/admin/administration/companies/${row.id}/edit`">
<BaseDropdownItem>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>

View File

@@ -1,14 +1,14 @@
<template>
<BaseDropdown>
<template #activator>
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<router-link :to="`/admin/administration/users/${row.id}/edit`">
<BaseDropdownItem>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -20,7 +20,7 @@
>
<BaseIcon
name="ArrowRightEndOnRectangleIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('administration.users.impersonate') }}
</BaseDropdownItem>

View File

@@ -1,7 +1,7 @@
<template>
<BaseDropdown>
<template #activator>
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<!-- edit customField -->
@@ -11,7 +11,7 @@
>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -23,7 +23,7 @@
>
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>

View File

@@ -4,7 +4,7 @@
<BaseButton v-if="route.name === 'customers.view'" variant="primary">
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
</BaseButton>
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<!-- Edit Customer -->
@@ -15,7 +15,7 @@
<BaseDropdownItem>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -32,7 +32,7 @@
<BaseDropdownItem>
<BaseIcon
name="EyeIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.view') }}
</BaseDropdownItem>
@@ -45,7 +45,7 @@
>
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>

View File

@@ -4,7 +4,7 @@
<BaseButton v-if="route.name === 'estimates.view'" variant="primary">
<BaseIcon name="EllipsisHorizontalIcon" class="text-white" />
</BaseButton>
<BaseIcon v-else class="text-gray-500" name="EllipsisHorizontalIcon" />
<BaseIcon v-else class="text-muted" name="EllipsisHorizontalIcon" />
</template>
<!-- Copy PDF url -->
@@ -14,7 +14,7 @@
>
<BaseIcon
name="LinkIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.copy_pdf_url') }}
</BaseDropdownItem>
@@ -27,7 +27,7 @@
<BaseDropdownItem>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -40,7 +40,7 @@
>
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>
@@ -56,7 +56,7 @@
<BaseDropdownItem>
<BaseIcon
name="EyeIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.view') }}
</BaseDropdownItem>
@@ -69,7 +69,7 @@
>
<BaseIcon
name="DocumentTextIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('estimates.clone_estimate') }}
</BaseDropdownItem>
@@ -81,7 +81,7 @@
>
<BaseIcon
name="DocumentTextIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('estimates.convert_to_invoice') }}
</BaseDropdownItem>
@@ -97,7 +97,7 @@
>
<BaseIcon
name="CheckCircleIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('estimates.mark_as_sent') }}
</BaseDropdownItem>
@@ -113,7 +113,7 @@
>
<BaseIcon
name="PaperAirplaneIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('estimates.send_estimate') }}
</BaseDropdownItem>
@@ -122,7 +122,7 @@
<BaseDropdownItem v-if="canResendEstimate(row)" @click="sendEstimate(row)">
<BaseIcon
name="PaperAirplaneIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('estimates.resend_estimate') }}
</BaseDropdownItem>
@@ -137,7 +137,7 @@
>
<BaseIcon
name="CheckCircleIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('estimates.mark_as_accepted') }}
</BaseDropdownItem>
@@ -152,7 +152,7 @@
>
<BaseIcon
name="XCircleIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('estimates.mark_as_rejected') }}
</BaseDropdownItem>

View File

@@ -7,7 +7,7 @@
>
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
</BaseButton>
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<!-- edit expenseCategory -->
@@ -17,7 +17,7 @@
>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -29,7 +29,7 @@
>
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>

View File

@@ -4,7 +4,7 @@
<BaseButton v-if="route.name === 'expenses.view'" variant="primary">
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
</BaseButton>
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<!-- edit expense -->
@@ -15,7 +15,7 @@
<BaseDropdownItem>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -28,7 +28,7 @@
>
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>

View File

@@ -4,7 +4,7 @@
<BaseButton v-if="route.name === 'invoices.view'" variant="primary">
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
</BaseButton>
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<!-- Edit Invoice -->
@@ -15,7 +15,7 @@
<BaseDropdownItem v-show="row.allow_edit">
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -25,7 +25,7 @@
<BaseDropdownItem v-if="route.name === 'invoices.view'" @click="copyPdfUrl">
<BaseIcon
name="LinkIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.copy_pdf_url') }}
</BaseDropdownItem>
@@ -41,7 +41,7 @@
<BaseDropdownItem>
<BaseIcon
name="EyeIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.view') }}
</BaseDropdownItem>
@@ -51,7 +51,7 @@
<BaseDropdownItem v-if="canSendInvoice(row)" @click="sendInvoice(row)">
<BaseIcon
name="PaperAirplaneIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('invoices.send_invoice') }}
</BaseDropdownItem>
@@ -60,7 +60,7 @@
<BaseDropdownItem v-if="canReSendInvoice(row)" @click="sendInvoice(row)">
<BaseIcon
name="PaperAirplaneIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('invoices.resend_invoice') }}
</BaseDropdownItem>
@@ -72,7 +72,7 @@
>
<BaseIcon
name="CreditCardIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('invoices.record_payment') }}
</BaseDropdownItem>
@@ -82,7 +82,7 @@
<BaseDropdownItem v-if="canSendInvoice(row)" @click="onMarkAsSent(row.id)">
<BaseIcon
name="CheckCircleIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('invoices.mark_as_sent') }}
</BaseDropdownItem>
@@ -94,7 +94,7 @@
>
<BaseIcon
name="DocumentTextIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('invoices.clone_invoice') }}
</BaseDropdownItem>
@@ -106,7 +106,7 @@
>
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>

View File

@@ -4,7 +4,7 @@
<BaseButton v-if="route.name === 'items.view'" variant="primary">
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
</BaseButton>
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<!-- edit item -->
@@ -15,7 +15,7 @@
<BaseDropdownItem>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -28,7 +28,7 @@
>
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>

View File

@@ -4,7 +4,7 @@
<BaseButton v-if="route.name === 'members.view'" variant="primary">
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
</BaseButton>
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<!-- edit user -->
@@ -12,7 +12,7 @@
<BaseDropdownItem>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -22,7 +22,7 @@
<BaseDropdownItem @click="removeUser(row.id)">
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>

View File

@@ -4,7 +4,7 @@
<BaseButton v-if="route.name === 'notes.view'" variant="primary">
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
</BaseButton>
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<!-- edit note -->
@@ -14,7 +14,7 @@
>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -26,7 +26,7 @@
>
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>

View File

@@ -4,7 +4,7 @@
<BaseButton v-if="route.name === 'payments.view'" variant="primary">
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
</BaseButton>
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<!-- Copy pdf url -->
@@ -18,7 +18,7 @@
>
<BaseIcon
name="LinkIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.copy_pdf_url') }}
</BaseDropdown-item>
@@ -31,7 +31,7 @@
<BaseDropdownItem>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -48,7 +48,7 @@
<BaseDropdownItem>
<BaseIcon
name="EyeIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.view') }}
</BaseDropdownItem>
@@ -65,7 +65,7 @@
>
<BaseIcon
name="PaperAirplaneIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('payments.send_payment') }}
</BaseDropdownItem>
@@ -77,7 +77,7 @@
>
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>

View File

@@ -4,14 +4,14 @@
<BaseButton v-if="route.name === 'paymentModes.view'" variant="primary">
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
</BaseButton>
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<!-- edit paymentMode -->
<BaseDropdownItem @click="editPaymentMode(row.id)">
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -20,7 +20,7 @@
<BaseDropdownItem @click="removePaymentMode(row.id)">
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>

View File

@@ -7,7 +7,7 @@
>
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
</BaseButton>
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<!-- Edit Recurring Invoice -->
@@ -18,7 +18,7 @@
<BaseDropdownItem>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -35,7 +35,7 @@
<BaseDropdownItem>
<BaseIcon
name="EyeIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.view') }}
</BaseDropdownItem>
@@ -48,7 +48,7 @@
>
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>

View File

@@ -4,7 +4,7 @@
<BaseButton v-if="route.name === 'roles.view'" variant="primary">
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
</BaseButton>
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<!-- edit role -->
@@ -14,7 +14,7 @@
>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -26,7 +26,7 @@
>
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>

View File

@@ -4,7 +4,7 @@
<BaseButton v-if="route.name === 'tax-types.view'" variant="primary">
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
</BaseButton>
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<!-- edit tax-type -->
@@ -14,7 +14,7 @@
>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -26,7 +26,7 @@
>
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>

View File

@@ -1,5 +1,5 @@
<template>
<tr class="box-border bg-white border border-gray-200 border-solid rounded-b">
<tr class="box-border bg-surface border-b border-line-light">
<td colspan="5" class="p-0 text-left align-top">
<table class="w-full">
<colgroup>
@@ -17,7 +17,7 @@
<td class="px-5 py-4 text-left align-top">
<div class="flex justify-start">
<div
class="flex items-center justify-center w-5 h-5 mt-2 mr-2 text-gray-300 cursor-move handle"
class="flex items-center justify-center w-5 h-5 mt-2 mr-2 text-subtle cursor-move handle"
>
<DragIcon />
</div>
@@ -96,7 +96,7 @@
<BaseIcon
name="ChevronDownIcon"
class="w-4 h-4 ml-1 text-gray-500"
class="w-4 h-4 ml-1 text-muted"
/>
</span>
</BaseButton>
@@ -129,7 +129,7 @@
<div class="flex items-center justify-center w-6 h-10 mx-2">
<BaseIcon
v-if="showRemoveButton"
class="h-5 text-gray-700 cursor-pointer"
class="h-5 text-body cursor-pointer"
name="TrashIcon"
@click="store.removeItem(index)"
/>
@@ -143,7 +143,7 @@
<BaseContentPlaceholders v-if="loading">
<BaseContentPlaceholdersText
:lines="1"
class="w-24 h-8 border border-gray-200 rounded-md"
class="w-24 h-8 border border-line-light rounded-md"
/>
</BaseContentPlaceholders>

View File

@@ -42,7 +42,7 @@
<template v-if="userStore.hasAbilities(ability)" #action>
<button
type="button"
class="flex items-center justify-center w-full px-2 py-2 bg-gray-200 border-none outline-hidden cursor-pointer "
class="flex items-center justify-center w-full px-2 py-2 bg-surface-muted border-none outline-hidden cursor-pointer "
@click="openTaxModal"
>
<BaseIcon name="CheckCircleIcon" class="h-5 text-primary-400" />
@@ -65,7 +65,7 @@
<BaseIcon
v-if="taxes.length && index !== taxes.length - 1"
name="TrashIcon"
class="h-5 text-gray-700 cursor-pointer"
class="h-5 text-body cursor-pointer"
@click="removeTax(index)"
/>
</div>

View File

@@ -1,4 +1,5 @@
<template>
<div class="rounded-xl border border-line-light shadow overflow-hidden bg-surface">
<!-- Tax Included -->
<div
v-if="companyStore.selectedCompanySettings.tax_included === 'YES'"
@@ -9,10 +10,10 @@
w-full
px-6
text-base
border border-b-0 border-gray-200 border-solid
border-b border-line-light
cursor-pointer
text-primary-400
bg-white
bg-surface
"
>
<BaseSwitchSection
@@ -33,7 +34,7 @@
/>
<col style="width: 15%; min-width: 120px" />
</colgroup>
<thead class="bg-white border border-gray-200 border-solid">
<thead class="bg-surface-secondary border-b border-line-light">
<tr>
<th
class="
@@ -43,8 +44,8 @@
not-italic
font-medium
leading-5
text-left text-gray-700
border-t border-b border-gray-200 border-solid
text-left text-body
"
>
<BaseContentPlaceholders v-if="isLoading">
@@ -62,8 +63,8 @@
not-italic
font-medium
leading-5
text-right text-gray-700
border-t border-b border-gray-200 border-solid
text-right text-body
"
>
<BaseContentPlaceholders v-if="isLoading">
@@ -81,8 +82,8 @@
not-italic
font-medium
leading-5
text-left text-gray-700
border-t border-b border-gray-200 border-solid
text-left text-body
"
>
<BaseContentPlaceholders v-if="isLoading">
@@ -101,8 +102,8 @@
not-italic
font-medium
leading-5
text-left text-gray-700
border-t border-b border-gray-200 border-solid
text-left text-body
"
>
<BaseContentPlaceholders v-if="isLoading">
@@ -120,8 +121,8 @@
not-italic
font-medium
leading-5
text-right text-gray-700
border-t border-b border-gray-200 border-solid
text-right text-body
"
>
<BaseContentPlaceholders v-if="isLoading">
@@ -164,7 +165,7 @@
px-6
py-3
text-base
border border-t-0 border-gray-200 border-solid
border-t border-line-light
cursor-pointer
text-primary-400
hover:bg-primary-100
@@ -174,6 +175,7 @@
<BaseIcon name="PlusCircleIcon" class="mr-2" />
{{ $t('general.add_new_item') }}
</div>
</div><!-- end rounded wrapper -->
</template>
<script setup>

View File

@@ -5,7 +5,7 @@
>
<SelectNotePopup :type="type" @select="onSelectNote" />
</div>
<label class="text-gray-800 font-medium mb-4 text-sm">
<label class="text-heading font-medium mb-4 text-sm">
{{ $t('invoices.notes') }}
</label>
<BaseCustomInput

View File

@@ -4,9 +4,9 @@
px-5
py-4
mt-6
bg-white
border border-gray-200 border-solid
rounded
bg-surface
border border-line-light border-solid
rounded-xl shadow
md:min-w-[390px]
min-w-[300px]
lg:mt-7
@@ -18,7 +18,7 @@
</BaseContentPlaceholders>
<label
v-else
class="text-sm font-semibold leading-5 text-gray-400 uppercase"
class="text-sm font-semibold leading-5 text-subtle uppercase"
>
{{ $t('estimates.sub_total') }}
</label>
@@ -29,7 +29,7 @@
<label
v-else
class="flex items-center justify-center m-0 text-lg text-black uppercase "
class="flex items-center justify-center m-0 text-lg text-heading uppercase "
>
<BaseFormatMoney
:amount="store.getSubTotal"
@@ -59,7 +59,7 @@
</BaseContentPlaceholders>
<label
v-else-if="store[storeProp].tax_per_item === 'YES'"
class="m-0 text-sm font-semibold leading-5 text-gray-500 uppercase"
class="m-0 text-sm font-semibold leading-5 text-muted uppercase"
>
<template v-if="tax.calculation_type === 'percentage'">
{{ tax.name }} - {{ tax.percent }}%
@@ -75,7 +75,7 @@
<label
v-else-if="store[storeProp].tax_per_item === 'YES'"
class="flex items-center justify-center m-0 text-lg text-black uppercase "
class="flex items-center justify-center m-0 text-lg text-heading uppercase "
>
<BaseFormatMoney :amount="tax.amount" :currency="defaultCurrency" />
</label>
@@ -93,14 +93,14 @@
</BaseContentPlaceholders>
<label
v-else
class="text-sm font-semibold leading-5 text-gray-400 uppercase"
class="text-sm font-semibold leading-5 text-subtle uppercase"
>
{{ $t('estimates.discount') }}
</label>
<BaseContentPlaceholders v-if="isLoading">
<BaseContentPlaceholdersText
:lines="1"
class="w-24 h-8 border border-gray-200 rounded-md"
class="w-24 h-8 border border-line-light rounded-md"
/>
</BaseContentPlaceholders>
<div v-else class="flex" style="width: 140px" role="group">
@@ -129,7 +129,7 @@
<BaseIcon
name="ChevronDownIcon"
class="w-4 h-4 ml-1 text-gray-500"
class="w-4 h-4 ml-1 text-muted"
/>
</span>
</BaseButton>
@@ -198,14 +198,14 @@
</div>
<div
class="flex items-center justify-between w-full pt-2 mt-5 border-t border-gray-200 border-solid "
class="flex items-center justify-between w-full pt-2 mt-5 border-t border-line-light border-solid "
>
<BaseContentPlaceholders v-if="isLoading">
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
</BaseContentPlaceholders>
<label
v-else
class="m-0 text-sm font-semibold leading-5 text-gray-400 uppercase"
class="m-0 text-sm font-semibold leading-5 text-subtle uppercase"
>{{ $t('estimates.total') }} {{ $t('estimates.amount') }}:</label
>

View File

@@ -1,12 +1,12 @@
<template>
<div class="flex items-center justify-between w-full mt-2 text-sm">
<label v-if="tax.calculation_type === 'percentage'" class="font-semibold leading-5 text-gray-500 uppercase">
<label v-if="tax.calculation_type === 'percentage'" class="font-semibold leading-5 text-muted uppercase">
{{ tax.name }} ({{ tax.percent }} %)
</label>
<label v-else class="font-semibold leading-5 text-gray-500 uppercase">
<label v-else class="font-semibold leading-5 text-muted uppercase">
{{ tax.name }} (<BaseFormatMoney :amount="tax.fixed_amount" :currency="currency" />)
</label>
<label class="flex items-center justify-center text-lg text-black">
<label class="flex items-center justify-center text-lg text-heading">
<BaseFormatMoney :amount="tax.amount" :currency="currency" />
<BaseIcon

View File

@@ -28,12 +28,12 @@
@input="v.exchange_rate.$touch()"
>
<template #right>
<span class="text-gray-500 sm:text-sm">
<span class="text-muted sm:text-sm">
{{ companyCurrency.code }}
</span>
</template>
</BaseInput>
<span class="text-gray-400 text-xs mt-2 font-light">
<span class="text-subtle text-xs mt-2 font-light">
{{
$t('settings.exchange_rate.exchange_help_text', {
currency: selectedCurrency.code,

View File

@@ -8,7 +8,7 @@
</BaseContentPlaceholders>
<label
v-else
class="text-sm font-semibold leading-5 text-gray-500 uppercase"
class="text-sm font-semibold leading-5 text-muted uppercase"
>
{{ $t('estimates.net_total') }}
</label>
@@ -19,7 +19,7 @@
<label
v-else
class="flex items-center justify-center m-0 text-lg text-black uppercase "
class="flex items-center justify-center m-0 text-lg text-heading uppercase "
>
<BaseFormatMoney
:amount="store.getNetTotal"

View File

@@ -44,13 +44,13 @@
>
<!-- Tax Search Input -->
<div class="relative bg-white">
<div class="relative bg-surface">
<div class="relative p-4">
<BaseInput
v-model="textSearch"
:placeholder="$t('general.search')"
type="text"
class="text-black"
class="text-heading"
>
</BaseInput>
</div>
@@ -64,14 +64,14 @@
overflow-auto
list
max-h-36
border-t border-gray-200
border-t border-line-default
"
>
<div
v-for="(taxType, index) in filteredTaxType"
:key="index"
:class="{
'bg-gray-100 cursor-not-allowed opacity-50 pointer-events-none':
'bg-surface-tertiary cursor-not-allowed opacity-50 pointer-events-none':
taxes.find((val) => {
return val.tax_type_id === taxType.id
}),
@@ -80,9 +80,9 @@
class="
px-6
py-4
border-b border-gray-200 border-solid
border-b border-line-default border-solid
cursor-pointer
hover:bg-gray-100 hover:cursor-pointer
hover:bg-surface-tertiary hover:cursor-pointer
last:border-b-0
"
@click="selectTaxType(taxType, close)"
@@ -94,7 +94,7 @@
text-base
font-semibold
leading-tight
text-gray-700
text-body
cursor-pointer
"
>
@@ -106,7 +106,7 @@
m-0
text-base
font-semibold
text-gray-700
text-body
cursor-pointer
"
>
@@ -121,8 +121,8 @@
</div>
</div>
<div v-else class="flex justify-center p-5 text-gray-400">
<label class="text-base text-gray-500 cursor-pointer">
<div v-else class="flex justify-center p-5 text-subtle">
<label class="text-base text-muted cursor-pointer">
{{ $t('general.no_tax_found') }}
</label>
</div>
@@ -140,7 +140,7 @@
h-10
px-2
py-3
bg-gray-200
bg-surface-muted
border-none
outline-hidden
"

View File

@@ -1,12 +1,12 @@
<template>
<div>
<label class="flex text-gray-800 font-medium text-sm mb-2">
<label class="flex text-heading font-medium text-sm mb-2">
{{ $t('general.select_template') }}
<span class="text-sm text-red-500"> *</span>
</label>
<BaseButton
type="button"
class="flex justify-center w-full text-sm lg:w-auto hover:bg-gray-200"
class="flex justify-center w-full text-sm lg:w-auto hover:bg-surface-muted"
variant="gray"
@click="openTemplateModal"
>

View File

@@ -5,7 +5,7 @@
{{ modalStore.title }}
<BaseIcon
name="XMarkIcon"
class="w-6 h-6 text-gray-500 cursor-pointer"
class="w-6 h-6 text-muted cursor-pointer"
@click="onCancel"
/>
</div>
@@ -58,7 +58,7 @@
</BaseInputGrid>
</div>
<div
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
>
<BaseButton
class="mr-3"

View File

@@ -5,7 +5,7 @@
{{ modalStore.title }}
<BaseIcon
name="XMarkIcon"
class="w-6 h-6 text-gray-500 cursor-pointer"
class="w-6 h-6 text-muted cursor-pointer"
@click="closeCategoryModal"
/>
</div>
@@ -53,7 +53,7 @@
flex
justify-end
p-4
border-t border-gray-200 border-solid
border-t border-line-default border-solid
"
>
<BaseButton

View File

@@ -6,7 +6,7 @@
<BaseIcon
name="XMarkIcon"
class="w-6 h-6 text-gray-500 cursor-pointer"
class="w-6 h-6 text-muted cursor-pointer"
@click="closeCompanyModal"
/>
</div>
@@ -98,7 +98,7 @@
</BaseInputGrid>
</div>
<div class="z-0 flex justify-end p-4 bg-gray-50 border-t border-gray-200">
<div class="z-0 flex justify-end p-4 bg-surface-secondary border-t border-line-default">
<BaseButton
class="mr-3 text-sm"
variant="primary-outline"

View File

@@ -10,7 +10,7 @@
<BaseIcon
name="XMarkIcon"
class="h-6 w-6 text-gray-500 cursor-pointer"
class="h-6 w-6 text-muted cursor-pointer"
@click="closeCustomerModal"
/>
</div>
@@ -131,7 +131,7 @@
<BaseTab :title="$t('customers.portal_access')">
<BaseInputGrid class="col-span-5 lg:col-span-4">
<div class="md:col-span-2">
<p class="text-sm text-gray-500">
<p class="text-sm text-muted">
{{ $t('customers.portal_access_text') }}
</p>
@@ -168,7 +168,7 @@
<template #right>
<BaseIcon
:name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
class="mr-1 text-gray-500 cursor-pointer"
class="mr-1 text-muted cursor-pointer"
@click="isShowPassword = !isShowPassword"
/>
</template>
@@ -194,7 +194,7 @@
<template #right>
<BaseIcon
:name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
class="mr-1 text-gray-500 cursor-pointer"
class="mr-1 text-muted cursor-pointer"
@click="isShowConfirmPassword = !isShowConfirmPassword"
/>
</template>
@@ -423,7 +423,7 @@
</div>
<div
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
>
<BaseButton
class="mr-3 text-sm"

View File

@@ -6,7 +6,7 @@
{{ modalStore.title }}
</h6>
<p
class="mt-2 text-sm leading-snug text-gray-500"
class="mt-2 text-sm leading-snug text-muted"
style="max-width: 680px"
>
{{
@@ -38,7 +38,7 @@
</BaseInputGroup>
</div>
<div class="z-0 flex justify-end p-4 bg-gray-50 border-t border-gray-200">
<div class="z-0 flex justify-end p-4 bg-surface-secondary border-t border-line-default">
<BaseButton
class="mr-3 text-sm"
variant="primary-outline"

View File

@@ -10,7 +10,7 @@
<BaseIcon
name="XMarkIcon"
class="w-6 h-6 text-gray-500 cursor-pointer"
class="w-6 h-6 text-muted cursor-pointer"
@click="closeExchangeRateModal"
/>
</div>
@@ -151,7 +151,7 @@
/>
</div>
<div
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
>
<BaseButton
class="mr-3"

View File

@@ -5,7 +5,7 @@
{{ modalStore.title }}
<BaseIcon
name="XMarkIcon"
class="h-6 w-6 text-gray-500 cursor-pointer"
class="h-6 w-6 text-muted cursor-pointer"
@click="closeDiskModal"
/>
</div>
@@ -21,7 +21,7 @@
>
<template #default="slotProps">
<div
class="z-0 flex justify-end p-4 border-t border-solid border-gray-200"
class="z-0 flex justify-end p-4 border-t border-solid border-line-default"
>
<BaseButton
class="mr-3 text-sm"

View File

@@ -5,7 +5,7 @@
{{ $t('members.invite_member') }}
<BaseIcon
name="XMarkIcon"
class="w-6 h-6 text-gray-500 cursor-pointer"
class="w-6 h-6 text-muted cursor-pointer"
@click="$emit('close')"
/>
</div>
@@ -42,7 +42,7 @@
</BaseInputGroup>
</div>
<div class="flex justify-end p-4 border-t border-gray-200">
<div class="flex justify-end p-4 border-t border-line-default">
<BaseButton
variant="primary-outline"
class="mr-3"

View File

@@ -5,7 +5,7 @@
{{ modalStore.title }}
<BaseIcon
name="XMarkIcon"
class="h-6 w-6 text-gray-500 cursor-pointer"
class="h-6 w-6 text-muted cursor-pointer"
@click="closeItemModal"
/>
</div>
@@ -90,7 +90,7 @@
</BaseInputGrid>
</div>
<div
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
>
<BaseButton
class="mr-3"

View File

@@ -8,7 +8,7 @@
{{ modalStore.title }}
<BaseIcon
name="XMarkIcon"
class="w-6 h-6 text-gray-500 cursor-pointer"
class="w-6 h-6 text-muted cursor-pointer"
@click="closeItemUnitModal"
/>
</div>
@@ -37,7 +37,7 @@
flex
justify-end
p-4
border-t border-gray-200 border-solid
border-t border-line-default border-solid
"
>
<BaseButton

View File

@@ -5,7 +5,7 @@
{{ modalStore.title }}
<BaseIcon
name="XMarkIcon"
class="w-6 h-6 text-gray-500 cursor-pointer"
class="w-6 h-6 text-muted cursor-pointer"
@click="closeTestModal"
/>
</div>
@@ -63,7 +63,7 @@
</BaseInputGrid>
</div>
<div
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
>
<BaseButton
variant="primary-outline"

View File

@@ -5,7 +5,7 @@
{{ modalStore.title }}
<BaseIcon
name="XMarkIcon"
class="h-6 w-6 text-gray-500 cursor-pointer"
class="h-6 w-6 text-muted cursor-pointer"
@click="closeNoteModal"
/>
</div>
@@ -75,7 +75,7 @@ _ />
justify-end
px-4
py-4
border-t border-solid border-gray-200
border-t border-solid border-line-default
"
>
<BaseButton

View File

@@ -5,7 +5,7 @@
{{ modalStore.title }}
<BaseIcon
name="XMarkIcon"
class="w-6 h-6 text-gray-500 cursor-pointer"
class="w-6 h-6 text-muted cursor-pointer"
@click="closePaymentModeModal"
/>
</div>
@@ -30,7 +30,7 @@
</div>
<div
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
>
<BaseButton
variant="primary-outline"

View File

@@ -6,7 +6,7 @@
<BaseIcon
name="XMarkIcon"
class="w-6 h-6 text-gray-500 cursor-pointer"
class="w-6 h-6 text-muted cursor-pointer"
@click="closeRolesModal"
/>
</div>
@@ -36,7 +36,7 @@
text-sm
not-italic
font-medium
text-gray-800
text-heading
px-4
md:px-8
py-1.5
@@ -50,7 +50,7 @@
text-sm
not-italic
font-medium
text-gray-300
text-subtle
px-4
md:px-8
py-1.5
@@ -72,7 +72,7 @@
</div>
</div>
<div class="border-t border-gray-200 py-3">
<div class="border-t border-line-default py-3">
<div
class="
grid grid-cols-1
@@ -89,7 +89,7 @@
:key="gIndex"
class="flex flex-col space-y-1"
>
<p class="text-sm text-gray-500 border-b border-gray-200 pb-1 mb-2">
<p class="text-sm text-muted border-b border-line-default pb-1 mb-2">
{{ gIndex }}
</p>
<div
@@ -122,7 +122,7 @@
flex
justify-end
p-4
border-t border-solid border-gray-200
border-t border-solid border-line-default
"
>
<BaseButton

View File

@@ -5,7 +5,7 @@
{{ modalTitle }}
<BaseIcon
name="XMarkIcon"
class="h-6 w-6 text-gray-500 cursor-pointer"
class="h-6 w-6 text-muted cursor-pointer"
@click="closeModal"
/>
</div>
@@ -26,7 +26,7 @@
relative
flex flex-col
m-2
border border-gray-200 border-solid
border border-line-default border-solid
cursor-pointer
hover:border-primary-300
"
@@ -46,11 +46,11 @@
/>
<span
:class="[
'w-full p-1 bg-gray-200 text-sm text-center absolute bottom-0 left-0',
'w-full p-1 bg-surface-muted text-sm text-center absolute bottom-0 left-0',
{
'text-primary-500 bg-primary-100':
selectedTemplate === template.name,
'text-gray-600': selectedTemplate != template.name,
'text-body': selectedTemplate != template.name,
},
]"
>
@@ -70,7 +70,7 @@
</div>
</div>
<div class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid">
<div class="z-0 flex justify-end p-4 border-t border-line-default border-solid">
<BaseButton class="mr-3" variant="primary-outline" @click="closeModal">
{{ $t('general.cancel') }}
</BaseButton>

View File

@@ -9,7 +9,7 @@
{{ modalStore.title }}
<BaseIcon
name="XMarkIcon"
class="h-6 w-6 text-gray-500 cursor-pointer"
class="h-6 w-6 text-muted cursor-pointer"
@click="closeSendEstimateModal"
/>
</div>
@@ -87,7 +87,7 @@
</BaseInputGrid>
</div>
<div
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
>
<BaseButton
class="mr-3"
@@ -112,7 +112,7 @@
</div>
</form>
<div v-else>
<div class="my-6 mx-4 border border-gray-200 relative">
<div class="my-6 mx-4 border border-line-default relative">
<BaseButton
class="absolute top-4 right-4"
:disabled="isLoading"
@@ -131,7 +131,7 @@
</div>
<div
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
>
<BaseButton
class="mr-3"

View File

@@ -9,7 +9,7 @@
{{ modalTitle }}
<BaseIcon
name="XMarkIcon"
class="w-6 h-6 text-gray-500 cursor-pointer"
class="w-6 h-6 text-muted cursor-pointer"
@click="closeSendInvoiceModal"
/>
</div>
@@ -90,7 +90,7 @@
</BaseInputGrid>
</div>
<div
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
>
<BaseButton
class="mr-3"
@@ -120,7 +120,7 @@
</div>
</form>
<div v-else>
<div class="my-6 mx-4 border border-gray-200 relative">
<div class="my-6 mx-4 border border-line-default relative">
<BaseButton
class="absolute top-4 right-4"
:disabled="isLoading"
@@ -139,7 +139,7 @@
></iframe>
</div>
<div
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
>
<BaseButton
class="mr-3"

View File

@@ -9,7 +9,7 @@
{{ modalTitle }}
<BaseIcon
name="XMarkIcon"
class="w-6 h-6 text-gray-500 cursor-pointer"
class="w-6 h-6 text-muted cursor-pointer"
@click="closeSendPaymentModal"
/>
</div>
@@ -90,7 +90,7 @@
</BaseInputGrid>
</div>
<div
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
>
<BaseButton
class="mr-3"
@@ -120,7 +120,7 @@
</div>
</form>
<div v-else>
<div class="my-6 mx-4 border border-gray-200 relative">
<div class="my-6 mx-4 border border-line-default relative">
<BaseButton
class="absolute top-4 right-4"
:disabled="isLoading"
@@ -139,7 +139,7 @@
></iframe>
</div>
<div
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
>
<BaseButton
class="mr-3"

View File

@@ -8,7 +8,7 @@
{{ modalStore.title }}
<BaseIcon
name="XMarkIcon"
class="h-6 w-6 text-gray-500 cursor-pointer"
class="h-6 w-6 text-muted cursor-pointer"
@click="closeTaxTypeModal"
/>
</div>
@@ -106,7 +106,7 @@
flex
justify-end
p-4
border-t border-solid border-gray-200
border-t border-solid border-line-default
"
>
<BaseButton

View File

@@ -5,13 +5,13 @@
<div class="flex flex-col">
{{ modalStore.title }}
<p class="text-sm text-gray-500 mt-1">
<p class="text-sm text-muted mt-1">
{{ modalStore.content }}
</p>
</div>
<BaseIcon
name="XMarkIcon"
class="h-6 w-6 text-gray-500 cursor-pointer"
class="h-6 w-6 text-muted cursor-pointer"
@click="closeModal"
/>
</div>
@@ -88,7 +88,7 @@
</div>
<div
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
>
<BaseButton
class="mr-3 text-sm"

View File

@@ -6,7 +6,7 @@
<BaseIcon
name="XMarkIcon"
class="w-6 h-6 text-gray-500 cursor-pointer"
class="w-6 h-6 text-muted cursor-pointer"
@click="closeCustomFieldModal"
/>
</div>
@@ -123,7 +123,7 @@
class="ml-1 cursor-pointer"
:class="
customFieldStore.currentCustomField.in_use
? 'text-gray-300'
? 'text-subtle'
: 'text-red-300'
"
@click="removeOption(index)"
@@ -179,7 +179,7 @@
flex
justify-end
p-4
border-t border-solid border-gray-200
border-t border-solid border-line-default
"
>
<BaseButton

View File

@@ -153,7 +153,7 @@
<BaseSwitch v-model="set_as_default" class="flex" />
</div>
<div class="ml-4 right">
<p class="p-0 mb-1 text-base leading-snug text-black box-title">
<p class="p-0 mb-1 text-base leading-snug text-heading box-title">
{{ $t('settings.disk.is_default') }}
</p>
</div>

View File

@@ -132,7 +132,7 @@
<BaseSwitch v-model="set_as_default" class="flex" />
</div>
<div class="ml-4 right">
<p class="p-0 mb-1 text-base leading-snug text-black box-title">
<p class="p-0 mb-1 text-base leading-snug text-heading box-title">
{{ $t('settings.disk.is_default') }}
</p>
</div>

View File

@@ -63,7 +63,7 @@
</div>
<div class="ml-4 right">
<p class="p-0 mb-1 text-base leading-snug text-black box-title">
<p class="p-0 mb-1 text-base leading-snug text-heading box-title">
{{ $t('settings.disk.is_default') }}
</p>
</div>

View File

@@ -152,7 +152,7 @@
<BaseSwitch v-model="set_as_default" class="flex" />
</div>
<div class="ml-4 right">
<p class="p-0 mb-1 text-base leading-snug text-black box-title">
<p class="p-0 mb-1 text-base leading-snug text-heading box-title">
{{ $t('settings.disk.is_default') }}
</p>
</div>

View File

@@ -134,7 +134,7 @@
<BaseSwitch v-model="set_as_default" class="flex" />
</div>
<div class="ml-4 right">
<p class="p-0 mb-1 text-base leading-snug text-black box-title">
<p class="p-0 mb-1 text-base leading-snug text-heading box-title">
{{ $t('settings.disk.is_default') }}
</p>
</div>

View File

@@ -1,5 +1,5 @@
<template>
<div class="grid h-screen grid-cols-12 overflow-y-hidden bg-gray-100">
<div class="grid h-screen grid-cols-12 overflow-y-hidden bg-surface-tertiary">
<NotificationRoot />
<div
@@ -12,7 +12,7 @@
col-span-12
p-4
mx-auto
text-gray-900
text-heading
md:p-8 md:col-span-6
lg:col-span-4
flex-2
@@ -41,7 +41,7 @@
not-italic
font-medium
leading-relaxed
text-left text-gray-400
text-left text-subtle
md:pt-40
"
>

View File

@@ -47,16 +47,16 @@
overflow-visible
text-sm
ease-linear
bg-white
bg-surface
border-0
rounded
cursor-pointer
md:hidden md:ml-0
hover:bg-gray-100
hover:bg-hover-strong
"
@click.prevent="onToggle"
>
<BaseIcon name="Bars3Icon" class="!w-6 !h-6 text-gray-500" />
<BaseIcon name="Bars3Icon" class="!w-6 !h-6 text-muted" />
</div>
<ul class="flex float-right h-8 m-0 list-none md:h-9">
@@ -81,7 +81,7 @@
md:h-9 md:w-9
"
>
<BaseIcon name="PlusIcon" class="w-5 h-5 text-gray-600" />
<BaseIcon name="PlusIcon" class="w-5 h-5 text-body" />
</div>
</template>
@@ -91,7 +91,7 @@
>
<BaseIcon
name="DocumentTextIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
aria-hidden="true"
/>
{{ $t('invoices.new_invoice') }}
@@ -103,7 +103,7 @@
>
<BaseIcon
name="DocumentIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
aria-hidden="true"
/>
{{ $t('estimates.new_estimate') }}
@@ -116,7 +116,7 @@
>
<BaseIcon
name="UserIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
aria-hidden="true"
/>
{{ $t('customers.new_customer') }}
@@ -148,11 +148,30 @@
/>
</template>
<!-- Theme Toggle -->
<div class="px-3 py-2">
<div class="flex items-center justify-between rounded-lg bg-surface-secondary p-1">
<button
v-for="opt in themeOptions"
:key="opt.value"
:class="[
'flex items-center justify-center rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors',
currentTheme === opt.value
? 'bg-surface text-heading shadow-sm'
: 'text-muted hover:text-body',
]"
@click.stop="setTheme(opt.value)"
>
<BaseIcon :name="opt.icon" class="w-3.5 h-3.5" />
</button>
</div>
</div>
<router-link to="/admin/user-settings">
<BaseDropdownItem>
<BaseIcon
name="CogIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
aria-hidden="true"
/>
{{ $t('navigation.settings') }}
@@ -162,7 +181,7 @@
<BaseDropdownItem @click="logout">
<BaseIcon
name="ArrowRightOnRectangleIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
aria-hidden="true"
/>
{{ $t('navigation.logout') }}
@@ -176,7 +195,7 @@
<script setup>
import { useAuthStore } from '@/scripts/admin/stores/auth'
import { useRouter } from 'vue-router'
import { computed } from 'vue'
import { computed, ref, onMounted } from 'vue'
import { useUserStore } from '@/scripts/admin/stores/user'
import { useGlobalStore } from '@/scripts/admin/stores/global'
@@ -228,4 +247,35 @@ async function logout() {
function onToggle() {
globalStore.setSidebarVisibility(true)
}
const themeOptions = [
{ value: 'light', icon: 'SunIcon' },
{ value: 'dark', icon: 'MoonIcon' },
{ value: 'system', icon: 'ComputerDesktopIcon' },
]
const currentTheme = ref(localStorage.getItem('theme') || 'system')
function applyTheme(theme) {
if (theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.setAttribute('data-theme', 'dark')
} else {
document.documentElement.removeAttribute('data-theme')
}
}
function setTheme(theme) {
currentTheme.value = theme
localStorage.setItem('theme', theme)
applyTheme(theme)
}
onMounted(() => {
applyTheme(currentTheme.value)
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
if (currentTheme.value === 'system') {
applyTheme('system')
}
})
})
</script>

View File

@@ -27,7 +27,7 @@
leave-from="translate-x-0"
leave-to="-translate-x-full"
>
<div class="relative flex flex-col flex-1 w-full max-w-xs bg-white">
<div class="relative flex flex-col flex-1 w-full max-w-xs bg-surface">
<TransitionChild
as="template"
enter="ease-in-out duration-300"
@@ -78,7 +78,7 @@
>
<div
v-if="menu[0] && menu[0].group_label"
class="px-4 mt-6 mb-2 text-xs font-semibold text-gray-400 uppercase tracking-wider"
class="px-4 mt-6 mb-2 text-xs font-semibold text-subtle uppercase tracking-wider"
>
{{ $t(menu[0].group_label) }}
</div>
@@ -89,7 +89,7 @@
:class="[
hasActiveUrl(item.link)
? 'text-primary-600 bg-primary-50 font-semibold'
: 'text-gray-600 hover:bg-gray-50',
: 'text-body hover:bg-hover',
'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)"
@@ -99,7 +99,7 @@
:class="[
hasActiveUrl(item.link)
? 'text-primary-500'
: 'text-gray-400',
: 'text-subtle',
'mr-3 shrink-0 h-5 w-5',
]"
@click="globalStore.setSidebarVisibility(false)"
@@ -124,8 +124,8 @@
h-screen
pb-32
overflow-y-auto
bg-white
border-r border-gray-200 border-solid
bg-surface
border-r border-line-default border-solid
xl:w-64
md:fixed md:flex md:flex-col md:inset-y-0
pt-16
@@ -138,7 +138,7 @@
>
<div
v-if="menu[0] && menu[0].group_label"
class="px-6 mt-6 mb-2 text-xs font-semibold text-gray-400 uppercase tracking-wider"
class="px-6 mt-6 mb-2 text-xs font-semibold text-subtle uppercase tracking-wider"
>
{{ $t(menu[0].group_label) }}
</div>
@@ -149,7 +149,7 @@
:class="[
hasActiveUrl(item.link)
? 'text-primary-600 bg-primary-50 font-semibold'
: 'text-gray-600 hover:bg-gray-50',
: 'text-body hover:bg-hover',
'cursor-pointer mx-3 px-3 py-2.5 group flex items-center rounded-lg text-sm not-italic font-medium transition-colors',
]"
>
@@ -158,7 +158,7 @@
:class="[
hasActiveUrl(item.link)
? 'text-primary-500'
: 'text-gray-400 group-hover:text-gray-600',
: 'text-subtle group-hover:text-body',
'mr-3 shrink-0 h-5 w-5',
]"
/>

View File

@@ -4,12 +4,12 @@
<div class="text-center mb-8">
<BaseIcon
name="BuildingOfficeIcon"
class="w-16 h-16 mx-auto text-gray-300 mb-4"
class="w-16 h-16 mx-auto text-subtle mb-4"
/>
<h1 class="text-2xl font-semibold text-gray-900">
<h1 class="text-2xl font-semibold text-heading">
{{ $t('general.welcome') }}, {{ userStore.currentUser.name }}
</h1>
<p class="mt-2 text-sm text-gray-500">
<p class="mt-2 text-sm text-muted">
{{ $t('general.no_company_description') }}
</p>
</div>
@@ -17,7 +17,7 @@
<!-- Pending Invitations -->
<div v-if="invitationStore.pendingInvitations.length > 0">
<h2
class="text-sm font-semibold uppercase tracking-wide text-gray-400 mb-3"
class="text-sm font-semibold uppercase tracking-wide text-subtle mb-3"
>
{{ $t('members.pending_invitations') }}
</h2>
@@ -25,13 +25,13 @@
<div
v-for="invitation in invitationStore.pendingInvitations"
:key="invitation.id"
class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"
class="flex items-center justify-between p-4 bg-surface rounded-lg border border-line-default"
>
<div>
<p class="font-medium text-gray-900">
<p class="font-medium text-heading">
{{ invitation.company?.name }}
</p>
<p class="text-sm text-gray-500">
<p class="text-sm text-muted">
{{ invitation.role?.title }} &middot;
{{ $t('members.invited_by') }}:
{{ invitation.invited_by?.name }}

View File

@@ -41,13 +41,13 @@
<base-dropdown width-class="w-48" margin-class="mt-1">
<template #activator>
<div class="flex items-center justify-center">
<EllipsisHorizontalIcon class="w-6 h-6 text-gray-600" />
<EllipsisHorizontalIcon class="w-6 h-6 text-body" />
</div>
</template>
<base-dropdown-item>
<document-text-icon
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
aria-hidden="true"
/>
New Invoice
@@ -55,7 +55,7 @@
<base-dropdown-item>
<document-icon
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
aria-hidden="true"
/>
New Estimate
@@ -63,7 +63,7 @@
<base-dropdown-item>
<user-icon
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
aria-hidden="true"
/>
New Customer
@@ -111,7 +111,7 @@ export default {
key: 'name',
label: 'Name',
thClass: 'extra',
tdClass: 'font-medium text-gray-900',
tdClass: 'font-medium text-heading',
},
{ key: 'age', label: 'Age' },
{ key: 'image', label: 'Image' },
@@ -131,7 +131,7 @@ export default {
key: 'name',
label: 'Name',
thClass: 'extra',
tdClass: 'font-medium text-gray-900',
tdClass: 'font-medium text-heading',
},
{ key: 'price', label: 'Price' },
{ key: 'created_at', label: 'Created At' },

View File

@@ -19,11 +19,11 @@
<BaseCard>
<template #header>
<div class="flex items-center">
<BaseIcon name="ServerIcon" class="w-5 h-5 mr-2 text-gray-400" />
<span class="font-medium text-gray-700">{{ $t('general.app_version') }}</span>
<BaseIcon name="ServerIcon" class="w-5 h-5 mr-2 text-subtle" />
<span class="font-medium text-body">{{ $t('general.app_version') }}</span>
</div>
</template>
<p class="text-2xl font-semibold text-gray-900">
<p class="text-2xl font-semibold text-heading">
{{ data.app_version }}
</p>
</BaseCard>
@@ -32,11 +32,11 @@
<BaseCard>
<template #header>
<div class="flex items-center">
<BaseIcon name="CodeBracketIcon" class="w-5 h-5 mr-2 text-gray-400" />
<span class="font-medium text-gray-700">PHP</span>
<BaseIcon name="CodeBracketIcon" class="w-5 h-5 mr-2 text-subtle" />
<span class="font-medium text-body">PHP</span>
</div>
</template>
<p class="text-2xl font-semibold text-gray-900">
<p class="text-2xl font-semibold text-heading">
{{ data.php_version }}
</p>
</BaseCard>
@@ -45,14 +45,14 @@
<BaseCard>
<template #header>
<div class="flex items-center">
<BaseIcon name="CircleStackIcon" class="w-5 h-5 mr-2 text-gray-400" />
<span class="font-medium text-gray-700">{{ $t('general.database') }}</span>
<BaseIcon name="CircleStackIcon" class="w-5 h-5 mr-2 text-subtle" />
<span class="font-medium text-body">{{ $t('general.database') }}</span>
</div>
</template>
<p class="text-2xl font-semibold text-gray-900">
<p class="text-2xl font-semibold text-heading">
{{ data.database?.driver?.toUpperCase() }}
</p>
<p class="text-sm text-gray-500 mt-1">
<p class="text-sm text-muted mt-1">
{{ data.database?.version }}
</p>
</BaseCard>
@@ -61,11 +61,11 @@
<BaseCard>
<template #header>
<div class="flex items-center">
<BaseIcon name="BuildingOfficeIcon" class="w-5 h-5 mr-2 text-gray-400" />
<span class="font-medium text-gray-700">{{ $t('navigation.companies') }}</span>
<BaseIcon name="BuildingOfficeIcon" class="w-5 h-5 mr-2 text-subtle" />
<span class="font-medium text-body">{{ $t('navigation.companies') }}</span>
</div>
</template>
<p class="text-2xl font-semibold text-gray-900">
<p class="text-2xl font-semibold text-heading">
{{ data.counts?.companies }}
</p>
</BaseCard>
@@ -74,11 +74,11 @@
<BaseCard>
<template #header>
<div class="flex items-center">
<BaseIcon name="UsersIcon" class="w-5 h-5 mr-2 text-gray-400" />
<span class="font-medium text-gray-700">{{ $t('navigation.all_users') }}</span>
<BaseIcon name="UsersIcon" class="w-5 h-5 mr-2 text-subtle" />
<span class="font-medium text-body">{{ $t('navigation.all_users') }}</span>
</div>
</template>
<p class="text-2xl font-semibold text-gray-900">
<p class="text-2xl font-semibold text-heading">
{{ data.counts?.users }}
</p>
</BaseCard>

View File

@@ -65,7 +65,7 @@
<BaseDivider class="my-6" />
<h3 class="text-lg font-medium text-gray-900 mb-4">
<h3 class="text-lg font-medium text-heading mb-4">
{{ $t('administration.companies.address') }}
</h3>

View File

@@ -46,7 +46,7 @@
:title="$t('administration.companies.no_companies')"
:description="$t('administration.companies.list_description')"
>
<BaseIcon name="BuildingOfficeIcon" class="mt-5 mb-4 h-16 w-16 text-gray-300" />
<BaseIcon name="BuildingOfficeIcon" class="mt-5 mb-4 h-16 w-16 text-subtle" />
</BaseEmptyPlaceholder>
<div v-show="!showEmptyScreen" class="relative table-container">
@@ -70,12 +70,12 @@
<template #cell-owner="{ row }">
<span v-if="row.data.owner">{{ row.data.owner.name }}</span>
<span v-else class="text-gray-400">-</span>
<span v-else class="text-subtle">-</span>
</template>
<template #cell-owner_email="{ row }">
<span v-if="row.data.owner">{{ row.data.owner.email }}</span>
<span v-else class="text-gray-400">-</span>
<span v-else class="text-subtle">-</span>
</template>
<template #cell-actions="{ row }">
@@ -113,7 +113,7 @@ const companyTableColumns = computed(() => {
key: 'name',
label: t('administration.companies.company_name'),
thClass: 'extra',
tdClass: 'font-medium text-gray-900',
tdClass: 'font-medium text-heading',
},
{
key: 'owner',

View File

@@ -24,7 +24,7 @@
/>
</div>
<div class="flex">
<div class="flex gap-8">
<div class="hidden mt-1 xl:block min-w-[240px]">
<BaseList>
<BaseListItem

View File

@@ -61,7 +61,7 @@
</BaseInputGroup>
</BaseInputGrid>
<div v-if="userData" class="mt-6 text-sm text-gray-500">
<div v-if="userData" class="mt-6 text-sm text-muted">
<p>
<strong>{{ $t('administration.users.role') }}:</strong>
{{ userData.role }}

View File

@@ -66,7 +66,7 @@
>
<BaseIcon
name="UsersIcon"
class="mt-5 mb-4 h-16 w-16 text-gray-300"
class="mt-5 mb-4 h-16 w-16 text-subtle"
/>
</BaseEmptyPlaceholder>
@@ -107,18 +107,18 @@
<span
v-for="company in row.data.companies.slice(0, 3)"
:key="company.id"
class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-700"
class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-surface-tertiary text-body"
>
{{ company.name }}
</span>
<span
v-if="row.data.companies.length > 3"
class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-500"
class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-surface-tertiary text-muted"
>
+{{ row.data.companies.length - 3 }}
</span>
</div>
<span v-else class="text-gray-400">-</span>
<span v-else class="text-subtle">-</span>
</template>
<template #cell-actions="{ row }">
@@ -158,7 +158,7 @@ const userTableColumns = computed(() => {
key: 'name',
label: t('users.name'),
thClass: 'extra',
tdClass: 'font-medium text-gray-900',
tdClass: 'font-medium text-heading',
},
{
key: 'email',
@@ -232,7 +232,7 @@ function getRoleBadgeClass(role) {
case 'admin':
return 'bg-blue-100 text-blue-800'
default:
return 'bg-gray-100 text-gray-800'
return 'bg-surface-tertiary text-heading'
}
}

View File

@@ -32,7 +32,7 @@
<div class="mt-4 mb-4 text-sm">
<router-link
to="/login"
class="text-sm text-primary-400 hover:text-gray-700"
class="text-sm text-primary-400 hover:text-body"
>
{{ $t('general.back_to_login') }}
</router-link>

View File

@@ -32,7 +32,7 @@
<template #right>
<BaseIcon
:name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
class="mr-1 text-gray-500 cursor-pointer"
class="mr-1 text-muted cursor-pointer"
@click="isShowPassword = !isShowPassword"
/>
</template>
@@ -43,7 +43,7 @@
<div class="mb-4">
<router-link
to="forgot-password"
class="text-sm text-primary-400 hover:text-gray-700"
class="text-sm text-primary-400 hover:text-body"
>
{{ $t('login.forgot_password') }}
</router-link>

View File

@@ -1,5 +1,5 @@
<template>
<div class="flex items-center justify-center min-h-screen bg-gray-50">
<div class="flex items-center justify-center min-h-screen bg-surface-secondary">
<div class="w-full max-w-md p-8">
<!-- Logo -->
<div class="mb-8 text-center">
@@ -16,7 +16,7 @@
<!-- Loading -->
<div v-if="isLoading" class="text-center">
<p class="text-gray-500">Loading invitation details...</p>
<p class="text-muted">Loading invitation details...</p>
</div>
<!-- Invalid/Expired -->
@@ -25,10 +25,10 @@
name="ExclamationCircleIcon"
class="w-16 h-16 mx-auto text-red-400 mb-4"
/>
<h1 class="text-xl font-semibold text-gray-900 mb-2">
<h1 class="text-xl font-semibold text-heading mb-2">
Invalid Invitation
</h1>
<p class="text-gray-500">{{ error }}</p>
<p class="text-muted">{{ error }}</p>
<router-link to="/login" class="text-primary-500 mt-4 inline-block">
Go to Login
</router-link>
@@ -37,10 +37,10 @@
<!-- Registration Form -->
<div v-else>
<div class="text-center mb-6">
<h1 class="text-2xl font-semibold text-gray-900">
<h1 class="text-2xl font-semibold text-heading">
Create Your Account
</h1>
<p class="text-gray-500 mt-2">
<p class="text-muted mt-2">
You've been invited to join
<strong>{{ invitationDetails.company_name }}</strong> as
<strong>{{ invitationDetails.role_name }}</strong>
@@ -112,7 +112,7 @@
</BaseCard>
<div class="text-center mt-4">
<router-link to="/login" class="text-sm text-gray-500 hover:text-primary-500">
<router-link to="/login" class="text-sm text-muted hover:text-primary-500">
Already have an account? Log in
</router-link>
</div>

View File

@@ -184,7 +184,7 @@
<BaseInputGrid class="col-span-5 lg:col-span-4">
<div class="md:col-span-2">
<p class="text-sm text-gray-500">
<p class="text-sm text-muted">
{{ $t('customers.portal_access_text') }}
</p>
@@ -224,7 +224,7 @@
<template #right>
<BaseIcon
:name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
class="mr-1 text-gray-500 cursor-pointer"
class="mr-1 text-muted cursor-pointer"
@click="isShowPassword = !isShowPassword"
/>
</template>
@@ -251,7 +251,7 @@
<template #right>
<BaseIcon
:name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
class="mr-1 text-gray-500 cursor-pointer"
class="mr-1 text-muted cursor-pointer"
@click="isShowConfirmPassword = !isShowConfirmPassword"
/>
</template>

View File

@@ -113,7 +113,7 @@
</span>
</template>
<BaseDropdownItem @click="removeMultipleCustomers">
<BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
<BaseIcon name="TrashIcon" class="mr-3 text-body" />
{{ $t('general.delete') }}
</BaseDropdownItem>
</BaseDropdown>
@@ -158,7 +158,7 @@
<BaseText
:text="row.data.contact_name ? row.data.contact_name : ''"
tag="span"
class="text-xs text-gray-400"
class="text-xs text-subtle"
/>
</router-link>
</template>
@@ -247,13 +247,13 @@ const customerColumns = computed(() => {
key: 'status',
thClass: 'extra w-10 pr-0',
sortable: false,
tdClass: 'font-medium text-gray-900 pr-0',
tdClass: 'font-medium text-heading pr-0',
},
{
key: 'name',
label: t('customers.name'),
thClass: 'extra',
tdClass: 'font-medium text-gray-900',
tdClass: 'font-medium text-heading',
},
{ key: 'phone', label: t('customers.phone') },
{ key: 'due_amount', label: t('customers.amount_due') },

View File

@@ -35,7 +35,7 @@
:to="`/admin/estimates/create?customer=${$route.params.id}`"
>
<BaseDropdownItem class="">
<BaseIcon name="DocumentIcon" class="mr-3 text-gray-600" />
<BaseIcon name="DocumentIcon" class="mr-3 text-body" />
{{ $t('estimates.new_estimate') }}
</BaseDropdownItem>
</router-link>
@@ -45,7 +45,7 @@
:to="`/admin/invoices/create?customer=${$route.params.id}`"
>
<BaseDropdownItem>
<BaseIcon name="DocumentTextIcon" class="mr-3 text-gray-600" />
<BaseIcon name="DocumentTextIcon" class="mr-3 text-body" />
{{ $t('invoices.new_invoice') }}
</BaseDropdownItem>
</router-link>
@@ -55,7 +55,7 @@
:to="`/admin/payments/create?customer=${$route.params.id}`"
>
<BaseDropdownItem>
<BaseIcon name="CreditCardIcon" class="mr-3 text-gray-600" />
<BaseIcon name="CreditCardIcon" class="mr-3 text-body" />
{{ $t('payments.new_payment') }}
</BaseDropdownItem>
</router-link>
@@ -65,7 +65,7 @@
:to="`/admin/expenses/create?customer=${$route.params.id}`"
>
<BaseDropdownItem>
<BaseIcon name="CalculatorIcon" class="mr-3 text-gray-600" />
<BaseIcon name="CalculatorIcon" class="mr-3 text-body" />
{{ $t('expenses.new_expense') }}
</BaseDropdownItem>
</router-link>

View File

@@ -1,5 +1,5 @@
<template>
<div class="pt-6 mt-5 border-t border-solid lg:pt-8 md:pt-4 border-gray-200">
<div class="pt-6 mt-5 border-t border-solid lg:pt-8 md:pt-4 border-line-default">
<!-- Basic Info -->
<BaseHeading>
{{ $t('customers.basic_info') }}
@@ -92,12 +92,12 @@
>
<p
v-if="field.type === 'Switch'"
class="text-sm font-bold leading-5 text-black non-italic"
class="text-sm font-bold leading-5 text-heading non-italic"
>
<span v-if="field.default_answer === 1"> {{ $t('general.yes') }} </span>
<span v-else> {{ $t('general.no') }} </span>
</p>
<p v-else class="text-sm font-bold leading-5 text-black non-italic">
<p v-else class="text-sm font-bold leading-5 text-heading non-italic">
{{ field.default_answer }}
</p>
</BaseDescriptionListItem>

View File

@@ -9,7 +9,7 @@
pt-16
pb-[6.6rem]
ml-56
bg-white
bg-surface
xl:ml-64
w-88
xl:block
@@ -23,7 +23,7 @@
px-4
pt-8
pb-2
border border-gray-200 border-solid
border border-line-default border-solid
height-full
"
>
@@ -35,7 +35,7 @@
variant="gray"
@input="onSearch()"
>
<BaseIcon name="MagnifyingGlassIcon" class="text-gray-500" />
<BaseIcon name="MagnifyingGlassIcon" class="text-muted" />
</BaseInput>
<div class="flex mb-6 ml-3" role="group" aria-label="First group">
@@ -58,7 +58,7 @@
pb-2
mb-2
text-sm
border-b border-gray-200 border-solid
border-b border-line-default border-solid
"
>
{{ $t('general.sort_by') }}
@@ -111,7 +111,7 @@
class="
h-full
overflow-y-scroll
border-l border-gray-200 border-solid
border-l border-line-default border-solid
sidebar
base-scroll
"
@@ -122,9 +122,9 @@
:id="'customer-' + customer.id"
:to="`/admin/customers/${customer.id}/view`"
:class="[
'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-l-transparent',
'flex justify-between p-4 items-center cursor-pointer hover:bg-hover-strong border-l-4 border-l-transparent',
{
'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
hasActiveUrl(customer.id),
},
]"
@@ -139,7 +139,7 @@
not-italic
font-normal
leading-5
text-black
text-heading
capitalize
truncate
"
@@ -154,7 +154,7 @@
not-italic
font-medium
leading-5
text-gray-600
text-body
"
/>
</div>
@@ -173,7 +173,7 @@
</div>
<p
v-if="!customerList?.length && !isFetching"
class="flex justify-center px-4 mt-5 text-sm text-gray-600"
class="flex justify-center px-4 mt-5 text-sm text-body"
>
{{ $t('customers.no_matching_customers') }}
</p>

View File

@@ -2,7 +2,7 @@
<div>
<div
v-if="dashboardStore.isDashboardDataLoaded"
class="grid grid-cols-10 mt-8 bg-white rounded-xl shadow-sm border border-gray-100"
class="grid grid-cols-10 mt-8 bg-surface rounded-xl shadow border border-line-light"
>
<!-- Chart -->
<div
@@ -50,7 +50,7 @@
grid grid-cols-3
col-span-10
text-center
border-t border-l border-gray-200 border-solid
border-t border-l border-line-default border-solid
lg:border-t-0 lg:text-right lg:col-span-3
xl:col-span-2
lg:grid-cols-1
@@ -116,7 +116,7 @@
class="
col-span-3
p-6
border-t border-gray-200 border-solid
border-t border-line-default border-solid
lg:col-span-1
"
>

View File

@@ -1,6 +1,6 @@
<template>
<BaseContentPlaceholders
class="grid grid-cols-10 mt-8 bg-white rounded shadow"
class="grid grid-cols-10 mt-8 bg-surface rounded shadow"
>
<!-- Chart -->
<div
@@ -27,7 +27,7 @@
grid grid-cols-3
col-span-10
text-center
border-t border-l border-gray-200 border-solid
border-t border-l border-line-default border-solid
lg:border-t-0 lg:text-right lg:col-span-3
xl:col-span-2
lg:grid-cols-1
@@ -76,7 +76,7 @@
justify-center
col-span-3
p-6
border-t border-gray-200 border-solid
border-t border-line-default border-solid
lg:justify-end lg:items-end lg:col-span-1
"
>

View File

@@ -6,10 +6,10 @@
flex
justify-between
p-5
bg-white
bg-surface
rounded-xl
shadow-sm
border border-gray-100
shadow
border border-line-light
hover:shadow-md
transition-shadow
xl:p-6
@@ -19,10 +19,10 @@
:to="route"
>
<div>
<span class="text-2xl font-bold leading-tight text-gray-900 xl:text-3xl">
<span class="text-2xl font-bold leading-tight text-heading xl:text-3xl">
<slot />
</span>
<span class="block mt-1 text-sm font-medium leading-tight text-gray-500 xl:text-base">
<span class="block mt-1 text-sm font-medium leading-tight text-muted xl:text-base">
{{ label }}
</span>
</div>

View File

@@ -1,7 +1,7 @@
<template>
<BaseContentPlaceholders
:rounded="true"
class="relative flex justify-between w-full p-3 bg-white rounded shadow lg:col-span-3 xl:p-4"
class="relative flex justify-between w-full p-3 bg-surface rounded shadow lg:col-span-3 xl:p-4"
>
<div>
<BaseContentPlaceholdersText

View File

@@ -7,7 +7,7 @@
justify-between
w-full
p-3
bg-white
bg-surface
rounded
shadow
lg:col-span-2

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-lg font-semibold leading-normal text-gray-900">
<h6 class="mb-0 text-lg font-semibold leading-normal text-heading">
{{ $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-lg font-semibold leading-normal text-gray-900">
<h6 class="mb-0 text-lg font-semibold leading-normal text-heading">
{{ $t('dashboard.recent_estimate_card.title') }}
</h6>

View File

@@ -129,7 +129,7 @@
h-10
mt-5
list-none
border-b-2 border-gray-200 border-solid
border-b-2 border-line-default border-solid
"
>
<!-- Tabs -->
@@ -163,7 +163,7 @@
</template>
<BaseDropdownItem @click="removeMultipleEstimates">
<BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
<BaseIcon name="TrashIcon" class="mr-3 text-body" />
{{ $t('general.delete') }}
</BaseDropdownItem>
</BaseDropdown>
@@ -298,13 +298,13 @@ const estimateColumns = computed(() => {
key: 'checkbox',
thClass: 'extra w-10 pr-0',
sortable: false,
tdClass: 'font-medium text-gray-900 pr-0',
tdClass: 'font-medium text-heading pr-0',
},
{
key: 'estimate_date',
label: t('estimates.date'),
thClass: 'extra',
tdClass: 'font-medium text-gray-500',
tdClass: 'font-medium text-muted',
},
{ key: 'estimate_number', label: t('estimates.number', 2) },
{ key: 'name', label: t('estimates.customer') },
@@ -312,7 +312,7 @@ const estimateColumns = computed(() => {
{
key: 'total',
label: t('estimates.total'),
tdClass: 'font-medium text-gray-900',
tdClass: 'font-medium text-heading',
},
{
key: 'actions',

View File

@@ -46,7 +46,7 @@
pt-16
pb-[6.4rem]
ml-56
bg-white
bg-surface
xl:ml-64
w-88
xl:block
@@ -60,7 +60,7 @@
px-4
pt-8
pb-2
border border-gray-200 border-solid
border border-line-default border-solid
height-full
"
>
@@ -73,7 +73,7 @@
@input="onSearched()"
>
<template #right>
<BaseIcon name="MagnifyingGlassIcon" class="text-gray-400" />
<BaseIcon name="MagnifyingGlassIcon" class="text-subtle" />
</template>
</BaseInput>
</div>
@@ -98,7 +98,7 @@
pb-2
mb-1 mb-2
text-sm
border-b border-gray-200 border-solid
border-b border-line-default border-solid
"
>
{{ $t('general.sort_by') }}
@@ -159,7 +159,7 @@
class="
h-full
overflow-y-scroll
border-l border-gray-200 border-solid
border-l border-line-default border-solid
base-scroll
"
>
@@ -169,9 +169,9 @@
:id="'estimate-' + estimate.id"
:to="`/admin/estimates/${estimate.id}/view`"
:class="[
'flex justify-between side-estimate p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-l-transparent',
'flex justify-between side-estimate p-4 cursor-pointer hover:bg-hover-strong items-center border-l-4 border-l-transparent',
{
'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
hasActiveUrl(estimate.id),
},
]"
@@ -187,7 +187,7 @@
not-italic
font-normal
leading-5
text-black
text-heading
capitalize
truncate
"
@@ -201,7 +201,7 @@
not-italic
font-medium
leading-5
text-gray-600
text-body
"
>
{{ estimate.estimate_number }}
@@ -226,7 +226,7 @@
not-italic
font-semibold
leading-8
text-right text-gray-900
text-right text-heading
"
/>
@@ -236,7 +236,7 @@
not-italic
font-normal
leading-5
text-right text-gray-600
text-right text-body
est-date
"
>
@@ -250,7 +250,7 @@
</div>
<p
v-if="!estimateList?.length && !isLoading"
class="flex justify-center px-4 mt-5 text-sm text-gray-600"
class="flex justify-center px-4 mt-5 text-sm text-body"
>
{{ $t('estimates.no_matching_estimates') }}
</p>
@@ -267,7 +267,7 @@
flex-1
border border-gray-400 border-solid
rounded-md
bg-white
bg-surface
frame-style
"
/>

View File

@@ -135,7 +135,7 @@
v-if="userStore.hasAbilities(abilities.DELETE_EXPENSE)"
@click="removeMultipleExpenses"
>
<BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600" />
<BaseIcon name="TrashIcon" class="h-5 mr-3 text-body" />
{{ $t('general.delete') }}
</BaseDropdownItem>
</BaseDropdown>
@@ -275,7 +275,7 @@ const expenseColumns = computed(() => {
{
key: 'status',
thClass: 'extra w-10',
tdClass: 'font-medium text-gray-900',
tdClass: 'font-medium text-heading',
placeholderClass: 'w-10',
sortable: false,
},
@@ -283,13 +283,13 @@ const expenseColumns = computed(() => {
key: 'expense_date',
label: t('expenses.date'),
thClass: 'extra',
tdClass: 'font-medium text-gray-900',
tdClass: 'font-medium text-heading',
},
{
key: 'expense_number',
label: t('expenses.expense_number'),
thClass: 'extra',
tdClass: 'font-medium text-gray-900',
tdClass: 'font-medium text-heading',
},
{
key: 'name',

View File

@@ -7,7 +7,7 @@
<div class="mb-6">
<div
v-if="phpSupportInfo"
class="grid grid-flow-row grid-cols-3 p-3 border border-gray-200 lg:gap-24 sm:gap-4"
class="grid grid-flow-row grid-cols-3 p-3 border border-line-default lg:gap-24 sm:gap-4"
>
<div class="col-span-2 text-sm">
{{
@@ -32,7 +32,7 @@
<div
v-for="(requirement, index) in requirements"
:key="index"
class="grid grid-flow-row grid-cols-3 p-3 border border-gray-200 lg:gap-24 sm:gap-4"
class="grid grid-flow-row grid-cols-3 p-3 border border-line-default lg:gap-24 sm:gap-4"
>
<div class="col-span-2 text-sm">
{{ index }}

View File

@@ -12,7 +12,7 @@
grid grid-flow-row grid-cols-3
lg:gap-24
sm:gap-4
border border-gray-200
border border-line-default
"
>
<BaseContentPlaceholdersText :lines="1" class="col-span-4 p-3" />
@@ -29,7 +29,7 @@
<div
v-for="(permission, index) in permissions"
:key="index"
class="border border-gray-200"
class="border border-line-default"
>
<div class="grid grid-flow-row grid-cols-3 lg:gap-24 sm:gap-4">
<div class="col-span-2 p-3">

View File

@@ -2,7 +2,7 @@
<BaseWizardStep
:title="$t('wizard.database.database')"
:description="$t('wizard.database.desc')"
step-container="w-full p-8 mb-8 bg-white border border-gray-200 border-solid rounded md:w-full"
step-container="w-full p-8 mb-8 bg-surface border border-line-default border-solid rounded md:w-full"
>
<component
:is="databaseData.database_connection"

View File

@@ -18,16 +18,16 @@
</BaseInputGroup>
</div>
<p class="mt-4 mb-0 text-sm text-gray-600">{{ $t('wizard.verify_domain.notes.notes') }}</p>
<ul class="w-full text-gray-600 list-disc list-inside">
<p class="mt-4 mb-0 text-sm text-body">{{ $t('wizard.verify_domain.notes.notes') }}</p>
<ul class="w-full text-body list-disc list-inside">
<li class="text-sm leading-8">
{{ $t('wizard.verify_domain.notes.not_contain') }}
<b class="inline-block px-1 bg-gray-100 rounded-xs">https://</b> {{ $t('wizard.verify_domain.notes.or') }}
<b class="inline-block px-1 bg-gray-100 rounded-xs">http</b> {{ $t('wizard.verify_domain.notes.in_front') }}
<b class="inline-block px-1 bg-surface-tertiary rounded-xs">https://</b> {{ $t('wizard.verify_domain.notes.or') }}
<b class="inline-block px-1 bg-surface-tertiary rounded-xs">http</b> {{ $t('wizard.verify_domain.notes.in_front') }}
</li>
<li class="text-sm leading-8">
{{ $t('wizard.verify_domain.notes.if_you') }}
<b class="inline-block px-1 bg-gray-100">localhost:8080</b>
<b class="inline-block px-1 bg-surface-tertiary">localhost:8080</b>
</li>
</ul>

View File

@@ -70,7 +70,7 @@
<template #right>
<BaseIcon
:name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
class="mr-1 text-gray-500 cursor-pointer"
class="mr-1 text-muted cursor-pointer"
@click="isShowPassword = !isShowPassword"
/>
</template>
@@ -95,7 +95,7 @@
<template #right>
<BaseIcon
:name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
class="mr-1 text-gray-500 cursor-pointer"
class="mr-1 text-muted cursor-pointer"
@click="isShowConfirmPassword = !isShowConfirmPassword"
/>
</template>

View File

@@ -2,7 +2,7 @@
<BaseWizardStep
:title="$t('wizard.company_info')"
:description="$t('wizard.company_info_desc')"
step-container="bg-white border border-gray-200 border-solid mb-8 md:w-full p-8 rounded w-full"
step-container="bg-surface border border-line-default border-solid mb-8 md:w-full p-8 rounded w-full"
>
<form action="" @submit.prevent="next">
<div class="grid grid-cols-1 mb-4 md:grid-cols-2 md:mb-6">

View File

@@ -2,7 +2,7 @@
<BaseWizardStep
:title="$t('wizard.preferences')"
:description="$t('wizard.preferences_desc')"
step-container="bg-white border border-gray-200 border-solid mb-8 md:w-full p-8 rounded w-full"
step-container="bg-surface border border-line-default border-solid mb-8 md:w-full p-8 rounded w-full"
>
<form action="" @submit.prevent="next">
<div>

View File

@@ -63,7 +63,7 @@
<template #right>
<BaseIcon
:name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
class="mr-1 text-gray-500 cursor-pointer"
class="mr-1 text-muted cursor-pointer"
@click="isShowPassword = !isShowPassword"
/>
</template>

View File

@@ -161,7 +161,7 @@
<template #right>
<BaseIcon
:name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
class="mr-1 text-gray-500 cursor-pointer"
class="mr-1 text-muted cursor-pointer"
@click="isShowPassword = !isShowPassword"
/>
</template>

View File

@@ -68,7 +68,7 @@
<template #right>
<BaseIcon
:name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
class="mr-1 text-gray-500 cursor-pointer"
class="mr-1 text-muted cursor-pointer"
@click="isShowPassword = !isShowPassword"
/>
</template>

View File

@@ -126,7 +126,7 @@
h-10
mt-5
list-none
border-b-2 border-gray-200 border-solid
border-b-2 border-line-default border-solid
"
>
<!-- Tabs -->
@@ -161,7 +161,7 @@
</template>
<BaseDropdownItem @click="removeMultipleInvoices">
<BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
<BaseIcon name="TrashIcon" class="mr-3 text-body" />
{{ $t('general.delete') }}
</BaseDropdownItem>
</BaseDropdown>
@@ -341,7 +341,7 @@ const invoiceColumns = computed(() => {
{
key: 'checkbox',
thClass: 'extra w-10',
tdClass: 'font-medium text-gray-900',
tdClass: 'font-medium text-heading',
placeholderClass: 'w-10',
sortable: false,
},
@@ -361,7 +361,7 @@ const invoiceColumns = computed(() => {
{
key: 'total',
label: t('invoices.total'),
tdClass: 'font-medium text-gray-900',
tdClass: 'font-medium text-heading',
},
{

View File

@@ -295,7 +295,7 @@ onSearched = debounce(onSearched, 500)
pt-16
pb-[6.4rem]
ml-56
bg-white
bg-surface
xl:ml-64
w-88
xl:block
@@ -309,7 +309,7 @@ onSearched = debounce(onSearched, 500)
px-4
pt-8
pb-2
border border-gray-200 border-solid
border border-line-default border-solid
height-full
"
>
@@ -322,7 +322,7 @@ onSearched = debounce(onSearched, 500)
@input="onSearched()"
>
<template #right>
<BaseIcon name="MagnifyingGlassIcon" class="h-5 text-gray-400" />
<BaseIcon name="MagnifyingGlassIcon" class="h-5 text-subtle" />
</template>
</BaseInput>
</div>
@@ -341,7 +341,7 @@ onSearched = debounce(onSearched, 500)
pb-2
mb-1 mb-2
text-sm
border-b border-gray-200 border-solid
border-b border-line-default border-solid
"
>
{{ $t('general.sort_by') }}
@@ -402,7 +402,7 @@ onSearched = debounce(onSearched, 500)
class="
h-full
overflow-y-scroll
border-l border-gray-200 border-solid
border-l border-line-default border-solid
base-scroll
"
>
@@ -412,9 +412,9 @@ onSearched = debounce(onSearched, 500)
:id="'invoice-' + invoice.id"
:to="`/admin/invoices/${invoice.id}/view`"
:class="[
'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-l-transparent',
'flex justify-between side-invoice p-4 cursor-pointer hover:bg-hover-strong items-center border-l-4 border-l-transparent',
{
'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
hasActiveUrl(invoice.id),
},
]"
@@ -430,7 +430,7 @@ onSearched = debounce(onSearched, 500)
not-italic
font-normal
leading-5
text-black
text-heading
capitalize
truncate
"
@@ -444,7 +444,7 @@ onSearched = debounce(onSearched, 500)
not-italic
font-medium
leading-5
text-gray-600
text-body
"
>
{{ invoice.invoice_number }}
@@ -465,7 +465,7 @@ onSearched = debounce(onSearched, 500)
not-italic
font-semibold
leading-8
text-right text-gray-900
text-right text-heading
block
"
:amount="invoice.total"
@@ -477,7 +477,7 @@ onSearched = debounce(onSearched, 500)
not-italic
font-normal
leading-5
text-right text-gray-600
text-right text-body
est-date
"
>
@@ -491,7 +491,7 @@ onSearched = debounce(onSearched, 500)
</div>
<p
v-if="!invoiceList?.length && !isLoading"
class="flex justify-center px-4 mt-5 text-sm text-gray-600"
class="flex justify-center px-4 mt-5 text-sm text-body"
>
{{ $t('invoices.no_matching_invoices') }}
</p>
@@ -507,7 +507,7 @@ onSearched = debounce(onSearched, 500)
class="
flex-1
border border-gray-400 border-solid
bg-white
bg-surface
rounded-md
frame-style
"

View File

@@ -97,7 +97,7 @@
items-center
justify-end
h-5
border-gray-200 border-solid
border-line-default border-solid
"
>
<BaseDropdown v-if="itemStore.selectedItems.length">
@@ -117,7 +117,7 @@
</span>
</template>
<BaseDropdownItem @click="removeMultipleItems">
<BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
<BaseIcon name="TrashIcon" class="mr-3 text-body" />
{{ $t('general.delete') }}
</BaseDropdownItem>
</BaseDropdown>
@@ -237,7 +237,7 @@ const itemColumns = computed(() => {
{
key: 'status',
thClass: 'extra w-10',
tdClass: 'font-medium text-gray-900',
tdClass: 'font-medium text-heading',
placeholderClass: 'w-10',
sortable: false,
},
@@ -245,7 +245,7 @@ const itemColumns = computed(() => {
key: 'name',
label: t('items.name'),
thClass: 'extra',
tdClass: 'font-medium text-gray-900',
tdClass: 'font-medium text-heading',
},
{ key: 'unit_name', label: t('items.unit') },
{ key: 'price', label: t('items.price') },

View File

@@ -102,7 +102,7 @@
items-center
justify-end
h-5
border-gray-200 border-solid
border-line-default border-solid
"
>
<BaseDropdown v-if="usersStore.selectedUsers.length">
@@ -122,7 +122,7 @@
</span>
</template>
<BaseDropdownItem @click="removeMultipleUsers">
<BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600" />
<BaseIcon name="TrashIcon" class="h-5 mr-3 text-body" />
{{ $t('general.delete') }}
</BaseDropdownItem>
</BaseDropdown>
@@ -191,21 +191,21 @@
v-if="userStore.currentUser.is_owner && usersStore.pendingInvitations.length > 0"
class="mt-8"
>
<h3 class="text-lg font-medium text-gray-900 mb-4">
<h3 class="text-lg font-medium text-heading mb-4">
{{ $t('members.pending_invitations') }}
</h3>
<BaseCard>
<div class="divide-y divide-gray-200">
<div class="divide-y divide-line-default">
<div
v-for="invitation in usersStore.pendingInvitations"
:key="invitation.id"
class="flex items-center justify-between px-6 py-4"
>
<div>
<p class="text-sm font-medium text-gray-900">
<p class="text-sm font-medium text-heading">
{{ invitation.email }}
</p>
<p class="text-sm text-gray-500">
<p class="text-sm text-muted">
{{ invitation.role?.title }} &middot;
{{ $t('members.invited_by') }}: {{ invitation.invited_by?.name }}
</p>
@@ -269,14 +269,14 @@ const userTableColumns = computed(() => {
{
key: 'status',
thClass: 'extra',
tdClass: 'font-medium text-gray-900',
tdClass: 'font-medium text-heading',
sortable: false,
},
{
key: 'name',
label: t('members.name'),
thClass: 'extra',
tdClass: 'font-medium text-gray-900',
tdClass: 'font-medium text-heading',
},
{ key: 'email', label: 'Email' },
{

View File

@@ -53,7 +53,7 @@
</div>
</div>
<div v-else class="mt-24">
<label class="flex items-center justify-center text-gray-500">
<label class="flex items-center justify-center text-muted">
{{ $t('modules.no_modules_installed') }}
</label>
</div>
@@ -61,10 +61,10 @@
</div>
<BaseCard v-else class="mt-6">
<h6 class="text-gray-900 text-lg font-medium">
<h6 class="text-heading text-lg font-medium">
{{ $t('modules.connect_installation') }}
</h6>
<p class="mt-1 text-sm text-gray-500">
<p class="mt-1 text-sm text-muted">
{{
$t('modules.api_token_description', {
url: globalStore.config.base_url.replace(/^http:\/\//, ''),

View File

@@ -1,6 +1,6 @@
<template>
<ModulePlaceholder v-if="isFetchingInitialData" />
<BasePage v-else class="bg-white">
<BasePage v-else class="bg-surface">
<BasePageHeader :title="moduleData.name">
<BaseBreadcrumb>
<BaseBreadcrumbItem :title="$t('general.home')" to="dashboard" />
@@ -30,7 +30,7 @@
<button
v-if="thumbnail && videoUrl"
:class="[
'relative md:h-24 lg:h-36 rounded hover:bg-gray-50',
'relative md:h-24 lg:h-36 rounded hover:bg-hover',
{
'outline-hidden ring-3 ring-offset-1 ring-primary-500':
displayVideo,
@@ -64,7 +64,7 @@
id="tabs-1-tab-1"
:key="ssIndx"
:class="[
'relative md:h-24 lg:h-36 rounded hover:bg-gray-50',
'relative md:h-24 lg:h-36 rounded hover:bg-hover',
{
'outline-hidden ring-3 ring-offset-1 ring-primary-500':
displayImage === screenshot.url,
@@ -108,7 +108,7 @@
<div
v-else
class="aspect-w-4 aspect-h-3 rounded-lg bg-gray-100 overflow-hidden"
class="aspect-w-4 aspect-h-3 rounded-lg bg-surface-tertiary overflow-hidden"
>
<img
:src="displayImage"
@@ -146,7 +146,7 @@
text-2xl
font-extrabold
tracking-tight
text-gray-900
text-heading
sm:text-3xl
"
>
@@ -159,7 +159,7 @@
<p
v-if="moduleData.latest_module_version"
class="text-sm text-gray-500 mt-2"
class="text-sm text-muted mt-2"
>
{{ $t('modules.version') }}
{{ moduleVersion }} ({{ $t('modules.last_updated') }}
@@ -170,7 +170,7 @@
<!-- Module Description -->
<div
class="prose prose-sm max-w-none text-gray-500 text-sm my-10"
class="prose prose-sm max-w-none text-muted text-sm my-10"
v-html="moduleData.long_description"
/>
@@ -178,7 +178,7 @@
<div v-if="!moduleData.purchased">
<RadioGroup v-model="selectedPlan">
<RadioGroupLabel class="sr-only"> Pricing plans </RadioGroupLabel>
<div class="relative bg-white rounded-md -space-y-px">
<div class="relative bg-surface rounded-md -space-y-px">
<RadioGroupOption
v-for="(size, sizeIdx) in modulePrice"
:key="size.name"
@@ -194,7 +194,7 @@
: '',
checked
? 'bg-primary-50 border-primary-200 z-10'
: 'border-gray-200',
: 'border-line-default',
'relative border p-4 flex flex-col cursor-pointer md:pl-4 md:pr-6 md:grid md:grid-cols-2 focus:outline-hidden',
]"
>
@@ -203,18 +203,18 @@
:class="[
checked
? 'bg-primary-600 border-transparent'
: 'bg-white border-gray-300',
: 'bg-surface border-line-strong',
active ? 'ring-2 ring-offset-2 ring-primary-500' : '',
'h-4 w-4 rounded-full border flex items-center justify-center',
]"
aria-hidden="true"
>
<span class="rounded-full bg-white w-1.5 h-1.5" />
<span class="rounded-full bg-surface w-1.5 h-1.5" />
</span>
<RadioGroupLabel
as="span"
:class="[
checked ? 'text-primary-900' : 'text-gray-900',
checked ? 'text-primary-900' : 'text-heading',
'ml-3 font-medium',
]"
>
@@ -226,7 +226,7 @@
>
<span
:class="[
checked ? 'text-primary-900' : 'text-gray-900',
checked ? 'text-primary-900' : 'text-heading',
'font-medium',
]"
>
@@ -328,18 +328,18 @@
<div class="mt-10"></div>
<!-- HighLights -->
<div class="border-t border-gray-200 mt-10 pt-10">
<h3 class="text-sm font-medium text-gray-900">
<div class="border-t border-line-default mt-10 pt-10">
<h3 class="text-sm font-medium text-heading">
{{ $t('modules.what_you_get') }}
</h3>
<div class="mt-4 prose prose-sm max-w-none text-gray-500">
<div class="mt-4 prose prose-sm max-w-none text-muted">
<div
class="prose prose-sm max-w-none text-gray-500 text-sm"
class="prose prose-sm max-w-none text-muted text-sm"
v-html="moduleData.highlights"
/>
</div>
</div>
<div class="border-t border-gray-200 mt-10 pt-10">
<div class="border-t border-line-default mt-10 pt-10">
<div
v-for="(link, key) in moduleData.links"
:key="key"
@@ -352,7 +352,7 @@
</div>
</div>
<!-- Installation Steps -->
<div v-if="isInstalling" class="border-t border-gray-200 mt-10 pt-10">
<div v-if="isInstalling" class="border-t border-line-default mt-10 pt-10">
<ul class="w-full p-0 list-none">
<li
v-for="step in installationSteps"
@@ -362,7 +362,7 @@
justify-between
w-full
py-3
border-b border-gray-200 border-solid
border-b border-line-default border-solid
last:border-b-0
"
>
@@ -370,7 +370,7 @@
{{ $t(step.translationKey) }}
</p>
<div class="flex flex-row items-center">
<span v-if="step.time" class="mr-3 text-xs text-gray-500">
<span v-if="step.time" class="mr-3 text-xs text-muted">
{{ step.time }}
</span>
<span
@@ -386,8 +386,8 @@
</div>
<!-- Social Share -->
<!-- <div class="border-t border-gray-200 mt-10 pt-10">
<h3 class="text-sm font-medium text-gray-900">Share</h3>
<!-- <div class="border-t border-line-default mt-10 pt-10">
<h3 class="text-sm font-medium text-heading">Share</h3>
<ul role="list" class="flex items-center space-x-6 mt-4">
<li>
<a
@@ -398,8 +398,8 @@
justify-center
w-6
h-6
text-gray-400
hover:text-gray-500
text-subtle
hover:text-muted
"
>
<span class="sr-only">Share on Facebook</span>
@@ -426,8 +426,8 @@
justify-center
w-6
h-6
text-gray-400
hover:text-gray-500
text-subtle
hover:text-muted
"
>
<span class="sr-only">Share on Instagram</span>
@@ -454,8 +454,8 @@
justify-center
w-6
h-6
text-gray-400
hover:text-gray-500
text-subtle
hover:text-muted
"
>
<span class="sr-only">Share on Twitter</span>
@@ -485,13 +485,13 @@
"
>
<TabGroup as="div">
<TabList class="-mb-px flex space-x-8 border-b border-gray-200">
<TabList class="-mb-px flex space-x-8 border-b border-line-default">
<Tab v-slot="{ selected }" as="template">
<button
:class="[
selected
? 'border-primary-600 text-primary-600'
: 'border-transparent text-gray-700 hover:text-gray-800 hover:border-gray-300',
: 'border-transparent text-body hover:text-heading hover:border-line-strong',
'whitespace-nowrap py-6 border-b-2 font-medium text-sm',
]"
>
@@ -503,7 +503,7 @@
:class="[
selected
? 'border-primary-600 text-primary-600'
: 'border-transparent text-gray-700 hover:text-gray-800 hover:border-gray-300',
: 'border-transparent text-body hover:text-heading hover:border-line-strong',
'whitespace-nowrap py-6 border-b-2 font-medium text-sm',
]"
>
@@ -515,7 +515,7 @@
:class="[
selected
? 'border-primary-600 text-primary-600'
: 'border-transparent text-gray-700 hover:text-gray-800 hover:border-gray-300',
: 'border-transparent text-body hover:text-heading hover:border-line-strong',
'whitespace-nowrap py-6 border-b-2 font-medium text-sm',
]"
>
@@ -531,7 +531,7 @@
<div
v-for="(review, reviewIdx) in moduleData.reviews"
:key="reviewIdx"
class="flex text-sm text-gray-500 space-x-4"
class="flex text-sm text-muted space-x-4"
>
<div class="flex-none py-10">
<span
@@ -542,7 +542,7 @@
h-12
w-12
rounded-full
bg-gray-500
bg-surface-secondary0
"
>
<span
@@ -559,11 +559,11 @@
</div>
<div
:class="[
reviewIdx === 0 ? '' : 'border-t border-gray-200',
reviewIdx === 0 ? '' : 'border-t border-line-default',
'py-10',
]"
>
<h3 class="font-medium text-gray-900">
<h3 class="font-medium text-heading">
{{ review.customer.name }}
</h3>
<p>
@@ -575,28 +575,28 @@
</div>
<div
class="mt-4 prose prose-sm max-w-none text-gray-500"
class="mt-4 prose prose-sm max-w-none text-muted"
v-html="review.feedback"
/>
</div>
</div>
</div>
<div v-else class="flex w-full items-center justify-center">
<p class="text-gray-500 mt-10 text-sm">
<p class="text-muted mt-10 text-sm">
{{ $t('modules.no_reviews_found') }}
</p>
</div>
</TabPanel>
<!-- FAQs -->
<TabPanel as="dl" class="text-sm text-gray-500">
<TabPanel as="dl" class="text-sm text-muted">
<h3 class="sr-only">Frequently Asked Questions</h3>
<template v-for="faq in moduleData.faq" :key="faq.question">
<dt class="mt-10 font-medium text-gray-900">
<dt class="mt-10 font-medium text-heading">
{{ faq.question }}
</dt>
<dd class="mt-2 prose prose-sm max-w-none text-gray-500">
<dd class="mt-2 prose prose-sm max-w-none text-muted">
<p>{{ faq.answer }}</p>
</dd>
</template>
@@ -607,7 +607,7 @@
<h3 class="sr-only">License</h3>
<div
class="prose prose-sm max-w-none text-gray-500"
class="prose prose-sm max-w-none text-muted"
v-html="moduleData.license"
/>
</TabPanel>
@@ -622,7 +622,7 @@
class="mt-24 sm:mt-32 lg:max-w-none"
>
<div class="flex items-center justify-between space-x-4">
<h2 class="text-lg font-medium text-gray-900">
<h2 class="text-lg font-medium text-heading">
{{ $t('modules.other_modules') }}
</h2>
<a
@@ -955,7 +955,7 @@ function statusClass(step) {
switch (status) {
case 'pending':
return 'text-primary-800 bg-gray-200'
return 'text-primary-800 bg-surface-muted'
case 'finished':
return 'text-teal-500 bg-teal-100'
case 'running':

Some files were not shown because too many files have changed in this diff Show More