mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-28 12:11:08 -04:00
add dark mode in customer view file
This commit is contained in:
@ -25,7 +25,7 @@
|
|||||||
|
|
||||||
<!-- Sidebar -->
|
<!-- Sidebar -->
|
||||||
<div
|
<div
|
||||||
class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block"
|
class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block dark:bg-gray-800"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="
|
class="
|
||||||
@ -36,6 +36,7 @@
|
|||||||
pt-8
|
pt-8
|
||||||
pb-6
|
pb-6
|
||||||
border border-gray-200 border-solid
|
border border-gray-200 border-solid
|
||||||
|
dark:border-gray-600
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<BaseInput
|
<BaseInput
|
||||||
@ -70,6 +71,7 @@
|
|||||||
mb-2
|
mb-2
|
||||||
text-sm
|
text-sm
|
||||||
border-b border-gray-200 border-solid
|
border-b border-gray-200 border-solid
|
||||||
|
dark:border-gray-600
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ $t('general.sort_by') }}
|
{{ $t('general.sort_by') }}
|
||||||
@ -124,7 +126,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</BaseDropdown>
|
</BaseDropdown>
|
||||||
|
|
||||||
<BaseButton class="ml-1" variant="white" @click="sortData">
|
<BaseButton class="ml-1" variant="gray" @click="sortData">
|
||||||
<BaseIcon v-if="getOrderBy" name="SortAscendingIcon" class="h-5" />
|
<BaseIcon v-if="getOrderBy" name="SortAscendingIcon" class="h-5" />
|
||||||
<BaseIcon v-else name="SortDescendingIcon" class="h-5" />
|
<BaseIcon v-else name="SortDescendingIcon" class="h-5" />
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
@ -138,6 +140,7 @@
|
|||||||
overflow-y-scroll
|
overflow-y-scroll
|
||||||
border-l border-gray-200 border-solid
|
border-l border-gray-200 border-solid
|
||||||
sw-scroll
|
sw-scroll
|
||||||
|
dark:border-gray-600
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<router-link
|
<router-link
|
||||||
@ -146,9 +149,9 @@
|
|||||||
:key="index"
|
:key="index"
|
||||||
:to="`/${globalStore.companySlug}/customer/estimates/${estimate.id}/view`"
|
:to="`/${globalStore.companySlug}/customer/estimates/${estimate.id}/view`"
|
||||||
:class="[
|
:class="[
|
||||||
'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
|
'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent dark:hover:bg-gray-700',
|
||||||
{
|
{
|
||||||
'bg-gray-100 border-l-4 border-primary-500 border-solid':
|
'bg-gray-100 border-l-4 border-primary-500 border-solid dark:bg-gray-700':
|
||||||
hasActiveUrl(estimate.id),
|
hasActiveUrl(estimate.id),
|
||||||
},
|
},
|
||||||
]"
|
]"
|
||||||
@ -164,6 +167,7 @@
|
|||||||
leading-5
|
leading-5
|
||||||
text-gray-500
|
text-gray-500
|
||||||
capitalize
|
capitalize
|
||||||
|
dark:text-gray-400
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ estimate.estimate_number }}
|
{{ estimate.estimate_number }}
|
||||||
@ -184,11 +188,12 @@
|
|||||||
leading-8
|
leading-8
|
||||||
text-right text-gray-900
|
text-right text-gray-900
|
||||||
block
|
block
|
||||||
|
dark:text-white
|
||||||
"
|
"
|
||||||
:amount="estimate.total"
|
:amount="estimate.total"
|
||||||
:currency="estimate.currency"
|
:currency="estimate.currency"
|
||||||
/>
|
/>
|
||||||
<div class="text-sm text-right text-gray-500 non-italic">
|
<div class="text-sm text-right text-gray-500 dark:text-gray-400 non-italic">
|
||||||
{{ estimate.formatted_estimate_date }}
|
{{ estimate.formatted_estimate_date }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -196,7 +201,7 @@
|
|||||||
|
|
||||||
<p
|
<p
|
||||||
v-if="!estimateStore.estimates.length"
|
v-if="!estimateStore.estimates.length"
|
||||||
class="flex justify-center px-4 mt-5 text-sm text-gray-600"
|
class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
|
||||||
>
|
>
|
||||||
{{ $t('estimates.no_matching_estimates') }}
|
{{ $t('estimates.no_matching_estimates') }}
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@ -31,7 +31,7 @@
|
|||||||
|
|
||||||
<!-- Sidebar -->
|
<!-- Sidebar -->
|
||||||
<div
|
<div
|
||||||
class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block"
|
class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block dark:bg-gray-800"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="
|
class="
|
||||||
@ -42,6 +42,7 @@
|
|||||||
pt-8
|
pt-8
|
||||||
pb-6
|
pb-6
|
||||||
border border-gray-200 border-solid
|
border border-gray-200 border-solid
|
||||||
|
dark:border-gray-600
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<BaseInput
|
<BaseInput
|
||||||
@ -76,6 +77,7 @@
|
|||||||
mb-2
|
mb-2
|
||||||
text-sm
|
text-sm
|
||||||
border-b border-gray-200 border-solid
|
border-b border-gray-200 border-solid
|
||||||
|
dark:border-gray-600
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ $t('general.sort_by') }}
|
{{ $t('general.sort_by') }}
|
||||||
@ -130,7 +132,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</BaseDropdown>
|
</BaseDropdown>
|
||||||
|
|
||||||
<BaseButton class="ml-1" variant="white" @click="sortData">
|
<BaseButton class="ml-1" variant="gray" @click="sortData">
|
||||||
<BaseIcon v-if="getOrderBy" name="SortAscendingIcon" class="h-5" />
|
<BaseIcon v-if="getOrderBy" name="SortAscendingIcon" class="h-5" />
|
||||||
<BaseIcon v-else name="SortDescendingIcon" class="h-5" />
|
<BaseIcon v-else name="SortDescendingIcon" class="h-5" />
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
@ -144,6 +146,7 @@
|
|||||||
overflow-y-scroll
|
overflow-y-scroll
|
||||||
border-l border-gray-200 border-solid
|
border-l border-gray-200 border-solid
|
||||||
sw-scroll
|
sw-scroll
|
||||||
|
dark:border-gray-600
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<router-link
|
<router-link
|
||||||
@ -152,9 +155,9 @@
|
|||||||
:key="index"
|
:key="index"
|
||||||
:to="`/${globalStore.companySlug}/customer/invoices/${invoice.id}/view`"
|
:to="`/${globalStore.companySlug}/customer/invoices/${invoice.id}/view`"
|
||||||
:class="[
|
:class="[
|
||||||
'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
|
'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent dark:hover:bg-gray-700',
|
||||||
{
|
{
|
||||||
'bg-gray-100 border-l-4 border-primary-500 border-solid':
|
'bg-gray-100 border-l-4 border-primary-500 border-solid dark:bg-gray-700':
|
||||||
hasActiveUrl(invoice.id),
|
hasActiveUrl(invoice.id),
|
||||||
},
|
},
|
||||||
]"
|
]"
|
||||||
@ -170,6 +173,7 @@
|
|||||||
text-gray-500
|
text-gray-500
|
||||||
capitalize
|
capitalize
|
||||||
text-md
|
text-md
|
||||||
|
dark:text-gray-400
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ invoice.invoice_number }}
|
{{ invoice.invoice_number }}
|
||||||
@ -189,12 +193,13 @@
|
|||||||
leading-8
|
leading-8
|
||||||
text-right text-gray-900
|
text-right text-gray-900
|
||||||
block
|
block
|
||||||
|
dark:text-white
|
||||||
"
|
"
|
||||||
:amount="invoice.total"
|
:amount="invoice.total"
|
||||||
:currency="invoice.currency"
|
:currency="invoice.currency"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="text-sm text-right text-gray-500 non-italic">
|
<div class="text-sm text-right text-gray-500 dark:text-gray-400 non-italic">
|
||||||
{{ invoice.formatted_invoice_date }}
|
{{ invoice.formatted_invoice_date }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -202,7 +207,7 @@
|
|||||||
|
|
||||||
<p
|
<p
|
||||||
v-if="!invoiceStore.invoices.length"
|
v-if="!invoiceStore.invoices.length"
|
||||||
class="flex justify-center px-4 mt-5 text-sm text-gray-600"
|
class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
|
||||||
>
|
>
|
||||||
{{ $t('invoices.no_matching_invoices') }}
|
{{ $t('invoices.no_matching_invoices') }}
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@ -19,7 +19,7 @@
|
|||||||
|
|
||||||
<!-- Sidebar -->
|
<!-- Sidebar -->
|
||||||
<div
|
<div
|
||||||
class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block"
|
class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block dark:bg-gray-800"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="
|
class="
|
||||||
@ -30,6 +30,7 @@
|
|||||||
pt-8
|
pt-8
|
||||||
pb-6
|
pb-6
|
||||||
border border-gray-200 border-solid
|
border border-gray-200 border-solid
|
||||||
|
dark:border-gray-600
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<BaseInput
|
<BaseInput
|
||||||
@ -64,6 +65,7 @@
|
|||||||
mb-2
|
mb-2
|
||||||
text-sm
|
text-sm
|
||||||
border-b border-gray-200 border-solid
|
border-b border-gray-200 border-solid
|
||||||
|
dark:border-gray-600
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ $t('general.sort_by') }}
|
{{ $t('general.sort_by') }}
|
||||||
@ -118,7 +120,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</BaseDropdown>
|
</BaseDropdown>
|
||||||
|
|
||||||
<BaseButton class="ml-1" variant="white" @click="sortData">
|
<BaseButton class="ml-1" variant="gray" @click="sortData">
|
||||||
<BaseIcon v-if="getOrderBy" name="SortAscendingIcon" class="h-5" />
|
<BaseIcon v-if="getOrderBy" name="SortAscendingIcon" class="h-5" />
|
||||||
<BaseIcon v-else name="SortDescendingIcon" class="h-5" />
|
<BaseIcon v-else name="SortDescendingIcon" class="h-5" />
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
@ -132,6 +134,7 @@
|
|||||||
overflow-y-scroll
|
overflow-y-scroll
|
||||||
border-l border-gray-200 border-solid
|
border-l border-gray-200 border-solid
|
||||||
sw-scroll
|
sw-scroll
|
||||||
|
dark:border-gray-600
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<router-link
|
<router-link
|
||||||
@ -140,9 +143,9 @@
|
|||||||
:key="index"
|
:key="index"
|
||||||
:to="`/${globalStore.companySlug}/customer/payments/${payment.id}/view`"
|
:to="`/${globalStore.companySlug}/customer/payments/${payment.id}/view`"
|
||||||
:class="[
|
:class="[
|
||||||
'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
|
'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent dark:hover:bg-gray-700',
|
||||||
{
|
{
|
||||||
'bg-gray-100 border-l-4 border-primary-500 border-solid':
|
'bg-gray-100 border-l-4 border-primary-500 border-solid dark:bg-gray-700':
|
||||||
hasActiveUrl(payment.id),
|
hasActiveUrl(payment.id),
|
||||||
},
|
},
|
||||||
]"
|
]"
|
||||||
@ -158,6 +161,7 @@
|
|||||||
leading-5
|
leading-5
|
||||||
text-gray-500
|
text-gray-500
|
||||||
capitalize
|
capitalize
|
||||||
|
dark:text-gray-400
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ payment.payment_number }}
|
{{ payment.payment_number }}
|
||||||
@ -174,12 +178,13 @@
|
|||||||
leading-8
|
leading-8
|
||||||
text-right text-gray-900
|
text-right text-gray-900
|
||||||
block
|
block
|
||||||
|
dark:text-white
|
||||||
"
|
"
|
||||||
:amount="payment.amount"
|
:amount="payment.amount"
|
||||||
:currency="payment.currency"
|
:currency="payment.currency"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="text-sm text-right text-gray-500 non-italic">
|
<div class="text-sm text-right text-gray-500 dark:text-gray-400 non-italic">
|
||||||
{{ payment.formatted_payment_date }}
|
{{ payment.formatted_payment_date }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -187,7 +192,7 @@
|
|||||||
|
|
||||||
<p
|
<p
|
||||||
v-if="!paymentStore.payments.length"
|
v-if="!paymentStore.payments.length"
|
||||||
class="flex justify-center px-4 mt-5 text-sm text-gray-600"
|
class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
|
||||||
>
|
>
|
||||||
{{ $t('payments.no_matching_payments') }}
|
{{ $t('payments.no_matching_payments') }}
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
Reference in New Issue
Block a user