kalugin66/InvoiceShelf
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dark mode with CSS custom property theme system

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

5
.claude/settings.json Normal file
View File

@@ -0,0 +1,5 @@
{
"enabledPlugins": {
"frontend-design@claude-plugins-official": true
}
}

8
resources/css/components/pace-loader.css vendored
View File

@@ -11,7 +11,7 @@
}
.pace .pace-progress {
background: #3f39ad;
background: var(--color-primary-600);
position: fixed;
z-index: 2000;
top: 0;
@@ -26,7 +26,7 @@
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #5851d8, 0 0 5px #5851d8;
box-shadow: 0 0 10px var(--color-primary-500), 0 0 5px var(--color-primary-500);
opacity: 1;
transform: rotate(3deg) translate(0px, -4px);
}
@@ -40,8 +40,8 @@
width: 14px;
height: 14px;
border: solid 2px transparent;
border-top-color: #5851d8;
border-left-color: #5851d8;
border-top-color: var(--color-primary-500);
border-left-color: var(--color-primary-500);
border-radius: 10px;
animation: pace-spinner 400ms linear infinite;
}

123
resources/css/invoiceshelf.css vendored
View File

@@ -4,7 +4,6 @@
@import "./components/pace-loader.css";
@import "./components/v-tooltips.css";
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
@plugin "tailwind-scrollbar";
@@ -25,6 +24,36 @@
--color-primary-900: var(--color-primary-900);
--color-primary-950: var(--color-primary-950);
--color-black: #040405;
/* Semantic theme tokens */
--color-surface: var(--color-surface);
--color-surface-secondary: var(--color-surface-secondary);
--color-surface-tertiary: var(--color-surface-tertiary);
--color-surface-muted: var(--color-surface-muted);
--color-heading: var(--color-heading);
--color-body: var(--color-body);
--color-muted: var(--color-muted);
--color-subtle: var(--color-subtle);
--color-line-light: var(--color-line-light);
--color-line-default: var(--color-line-default);
--color-line-strong: var(--color-line-strong);
--color-hover: var(--color-hover);
--color-hover-strong: var(--color-hover-strong);
/* Status badge text */
--color-status-yellow: var(--color-status-yellow);
--color-status-green: var(--color-status-green);
--color-status-blue: var(--color-status-blue);
--color-status-red: var(--color-status-red);
--color-status-purple: var(--color-status-purple);
/* Alert colors */
--color-alert-warning-bg: var(--color-alert-warning-bg);
--color-alert-warning-text: var(--color-alert-warning-text);
--color-alert-error-bg: var(--color-alert-error-bg);
--color-alert-error-text: var(--color-alert-error-text);
--color-alert-success-bg: var(--color-alert-success-bg);
--color-alert-success-text: var(--color-alert-success-text);
}
@theme {
@@ -84,9 +113,101 @@
src: url("$fonts/Poppins-SemiBold.ttf") format("truetype");
}
/* Form base styles (replaces @tailwindcss/forms) */
@layer base {
[type='text'],
[type='email'],
[type='url'],
[type='password'],
[type='number'],
[type='date'],
[type='datetime-local'],
[type='month'],
[type='search'],
[type='tel'],
[type='time'],
[type='week'],
[multiple],
textarea,
select {
@apply appearance-none bg-surface border border-line-default rounded-lg px-3 py-2 text-sm leading-6 text-heading;
}
[type='text']:focus,
[type='email']:focus,
[type='url']:focus,
[type='password']:focus,
[type='number']:focus,
[type='date']:focus,
[type='datetime-local']:focus,
[type='month']:focus,
[type='search']:focus,
[type='tel']:focus,
[type='time']:focus,
[type='week']:focus,
[multiple]:focus,
textarea:focus,
select:focus {
@apply outline-2 outline-transparent outline-offset-2 border-primary-500 ring-1 ring-primary-500;
}
select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
@apply bg-no-repeat pr-10;
background-position: right 0.5rem center;
background-size: 1.5em 1.5em;
}
[type='checkbox'],
[type='radio'] {
@apply appearance-none p-0 text-primary-500 bg-surface border border-line-strong inline-block align-middle select-none shrink-0 h-4 w-4;
background-origin: border-box;
print-color-adjust: exact;
}
[type='checkbox'] {
@apply rounded;
}
[type='radio'] {
@apply rounded-full;
}
[type='checkbox']:focus,
[type='radio']:focus {
@apply outline-2 outline-transparent outline-offset-2;
box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary-500);
}
[type='checkbox']:checked,
[type='radio']:checked {
@apply border-transparent bg-current bg-center bg-no-repeat;
background-size: 100% 100%;
}
[type='checkbox']:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
[type='radio']:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
[type='checkbox']:indeterminate {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
@apply border-transparent bg-current bg-center bg-no-repeat;
background-size: 100% 100%;
}
::placeholder {
@apply text-subtle opacity-100;
}
} /* end @layer base */
body {
min-height: 100vh;
min-height: -webkit-fill-available;
color: var(--color-heading);
}
html {

82
resources/css/themes.css vendored
View File

@@ -10,4 +10,86 @@
--color-primary-800: rgb(27, 3, 211);
--color-primary-900: rgb(25, 5, 173);
--color-primary-950: rgb(9, 0, 118);
/* Surfaces */
--color-surface: rgb(255, 255, 255);
--color-surface-secondary: rgb(249, 250, 251);
--color-surface-tertiary: rgb(243, 244, 246);
--color-surface-muted: rgb(229, 231, 235);
/* Text */
--color-heading: rgb(17, 24, 39);
--color-body: rgb(55, 65, 81);
--color-muted: rgb(107, 114, 128);
--color-subtle: rgb(156, 163, 175);
/* Borders */
--color-line-light: rgb(229, 231, 235);
--color-line-default: rgb(209, 213, 219);
--color-line-strong: rgb(185, 193, 204);
/* Hover */
--color-hover: rgb(249, 250, 251);
--color-hover-strong: rgb(243, 244, 246);
/* Status badge text */
--color-status-yellow: rgb(113, 63, 18);
--color-status-green: rgb(20, 83, 45);
--color-status-blue: rgb(30, 58, 138);
--color-status-red: rgb(127, 29, 29);
--color-status-purple: rgb(107, 33, 168);
/* Alert backgrounds & text */
--color-alert-warning-bg: rgb(254, 252, 232);
--color-alert-warning-text: rgb(133, 77, 14);
--color-alert-error-bg: rgb(254, 242, 242);
--color-alert-error-text: rgb(153, 27, 27);
--color-alert-success-bg: rgb(240, 253, 244);
--color-alert-success-text: rgb(22, 101, 52);
}
[data-theme="dark"] {
/* Surfaces — layered depth: tertiary (body) < secondary < surface (cards) */
--color-surface: rgb(30, 41, 59);
--color-surface-secondary: rgb(23, 33, 50);
--color-surface-tertiary: rgb(10, 18, 32);
--color-surface-muted: rgb(51, 65, 85);
/* Text */
--color-heading: rgb(241, 245, 249);
--color-body: rgb(203, 213, 225);
--color-muted: rgb(148, 163, 184);
--color-subtle: rgb(100, 116, 139);
/* Borders — brighter for visibility */
--color-line-light: rgb(51, 65, 85);
--color-line-default: rgb(80, 95, 115);
--color-line-strong: rgb(130, 145, 165);
/* Hover */
--color-hover: rgb(40, 52, 72);
--color-hover-strong: rgb(51, 65, 85);
/* Status badge text */
--color-status-yellow: rgb(253, 224, 71);
--color-status-green: rgb(134, 239, 172);
--color-status-blue: rgb(147, 197, 253);
--color-status-red: rgb(252, 165, 165);
--color-status-purple: rgb(216, 180, 254);
/* Alert backgrounds & text */
--color-alert-warning-bg: rgba(113, 63, 18, 0.2);
--color-alert-warning-text: rgb(253, 224, 71);
--color-alert-error-bg: rgba(127, 29, 29, 0.2);
--color-alert-error-text: rgb(252, 165, 165);
--color-alert-success-bg: rgba(20, 83, 45, 0.2);
--color-alert-success-text: rgb(134, 239, 172);
/* Primary adjustments for dark mode */
--color-primary-50: rgba(167, 170, 255, 0.15);
--color-primary-100: rgba(167, 170, 255, 0.25);
--color-primary-400: rgb(167, 170, 255);
--color-primary-500: rgb(140, 140, 255);
--color-primary-600: rgb(167, 170, 255);
--color-primary-700: rgb(190, 192, 255);
}

4
resources/scripts/admin/components/CopyInputField.vue
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
"

16
resources/scripts/admin/components/SelectNotePopup.vue
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
"

28
resources/scripts/admin/components/charts/LineChart.vue
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)',

6
resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue
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,

4
resources/scripts/admin/components/dropdowns/AdminCompanyIndexDropdown.vue
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>

6
resources/scripts/admin/components/dropdowns/AdminUserIndexDropdown.vue
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>

6
resources/scripts/admin/components/dropdowns/CustomFieldIndexDropdown.vue
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>

8
resources/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue
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>

24
resources/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue
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>

6
resources/scripts/admin/components/dropdowns/ExpenseCategoryIndexDropdown.vue
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>

6
resources/scripts/admin/components/dropdowns/ExpenseIndexDropdown.vue
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>

20
resources/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue
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>

6
resources/scripts/admin/components/dropdowns/ItemIndexDropdown.vue
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>

6
resources/scripts/admin/components/dropdowns/MemberIndexDropdown.vue
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>

6
resources/scripts/admin/components/dropdowns/NoteIndexDropdown.vue
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>

12
resources/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue
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>

6
resources/scripts/admin/components/dropdowns/PaymentModeIndexDropdown.vue
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>

8
resources/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue
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>

6
resources/scripts/admin/components/dropdowns/RoleIndexDropdown.vue
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>

6
resources/scripts/admin/components/dropdowns/TaxTypeIndexDropdown.vue
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>

10
resources/scripts/admin/components/estimate-invoice-common/CreateItemRow.vue
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>

4
resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue
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>

30
resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue
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>

2
resources/scripts/admin/components/estimate-invoice-common/CreateNotesField.vue
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

24
resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue
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
>

6
resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue
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

4
resources/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue
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,

4
resources/scripts/admin/components/estimate-invoice-common/NetTotal.vue
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"

22
resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue
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
"

4
resources/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue
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"
>

4
resources/scripts/admin/components/modal-components/BackupModal.vue
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"

4
resources/scripts/admin/components/modal-components/CategoryModal.vue
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

4
resources/scripts/admin/components/modal-components/CompanyModal.vue
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"

10
resources/scripts/admin/components/modal-components/CustomerModal.vue
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"

4
resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue
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"

4
resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue
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"

4
resources/scripts/admin/components/modal-components/FileDiskModal.vue
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"

4
resources/scripts/admin/components/modal-components/InviteMemberModal.vue
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"

4
resources/scripts/admin/components/modal-components/ItemModal.vue
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"

4
resources/scripts/admin/components/modal-components/ItemUnitModal.vue
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

4
resources/scripts/admin/components/modal-components/MailTestModal.vue
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"

4
resources/scripts/admin/components/modal-components/NoteModal.vue
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

4
resources/scripts/admin/components/modal-components/PaymentModeModal.vue
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"

12
resources/scripts/admin/components/modal-components/RolesModal.vue
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

10
resources/scripts/admin/components/modal-components/SelectTemplateModal.vue
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>

8
resources/scripts/admin/components/modal-components/SendEstimateModal.vue
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"

8
resources/scripts/admin/components/modal-components/SendInvoiceModal.vue
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"

8
resources/scripts/admin/components/modal-components/SendPaymentModal.vue
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"

4
resources/scripts/admin/components/modal-components/TaxTypeModal.vue
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

6
resources/scripts/admin/components/modal-components/TaxationAddressModal.vue
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"

6
resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue
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

2
resources/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue
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>

2
resources/scripts/admin/components/modal-components/disks/DropboxDisk.vue
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>

2
resources/scripts/admin/components/modal-components/disks/LocalDisk.vue
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>

2
resources/scripts/admin/components/modal-components/disks/S3CompatDisk.vue
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>

2
resources/scripts/admin/components/modal-components/disks/S3Disk.vue
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>

6
resources/scripts/admin/layouts/LayoutLogin.vue
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
"
>

70
resources/scripts/admin/layouts/partials/TheSiteHeader.vue
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>

18
resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
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',
]"
/>

14
resources/scripts/admin/views/NoCompanyView.vue
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 }}

12
resources/scripts/admin/views/SampleTable.vue
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' },

32
resources/scripts/admin/views/administration/AdminDashboard.vue
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>

2
resources/scripts/admin/views/administration/companies/Edit.vue
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>

8
resources/scripts/admin/views/administration/companies/Index.vue
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',

2
resources/scripts/admin/views/administration/settings/SettingsIndex.vue
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

2
resources/scripts/admin/views/administration/users/Edit.vue
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 }}

12
resources/scripts/admin/views/administration/users/Index.vue
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'
}
}

2
resources/scripts/admin/views/auth/ForgotPassword.vue
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>

4
resources/scripts/admin/views/auth/Login.vue
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>

14
resources/scripts/admin/views/auth/RegisterWithInvitation.vue
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>

6
resources/scripts/admin/views/customers/Create.vue
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>

8
resources/scripts/admin/views/customers/Index.vue
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') },

8
resources/scripts/admin/views/customers/View.vue
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>

6
resources/scripts/admin/views/customers/partials/CustomerInfo.vue
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>

20
resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
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>

6
resources/scripts/admin/views/dashboard/DashboardChart.vue
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
"
>

6
resources/scripts/admin/views/dashboard/DashboardChartPlaceholder.vue
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
"
>

10
resources/scripts/admin/views/dashboard/DashboardStatsItem.vue
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>

2
resources/scripts/admin/views/dashboard/DashboardStatsPlaceholder.vue
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

2
resources/scripts/admin/views/dashboard/DashboardStatsSmPlaceholder.vue
View File

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

4
resources/scripts/admin/views/dashboard/DashboardTable.vue
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>

10
resources/scripts/admin/views/estimates/Index.vue
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',

26
resources/scripts/admin/views/estimates/View.vue
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
"
/>

8
resources/scripts/admin/views/expenses/Index.vue
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',

4
resources/scripts/admin/views/installation/Step1RequirementsCheck.vue
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 }}

4
resources/scripts/admin/views/installation/Step2PermissionCheck.vue
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">

2
resources/scripts/admin/views/installation/Step3DatabaseConfig.vue
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"

10
resources/scripts/admin/views/installation/Step4VerifyDomain.vue
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>

4
resources/scripts/admin/views/installation/Step6AccountSettings.vue
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>

2
resources/scripts/admin/views/installation/Step7CompanyInfo.vue
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">

2
resources/scripts/admin/views/installation/Step8CompanyPreferences.vue
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>

2
resources/scripts/admin/views/installation/mail-driver/MailgunMailDriver.vue
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>

2
resources/scripts/admin/views/installation/mail-driver/SesMailDriver.vue
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>

2
resources/scripts/admin/views/installation/mail-driver/SmtpMailDriver.vue
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>

8
resources/scripts/admin/views/invoices/Index.vue
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',
},
{

26
resources/scripts/admin/views/invoices/View.vue
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
"

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