add dark mode in est,inv,pay,rec view&create page

This commit is contained in:
yashkanakiya
2023-03-29 15:09:29 +05:30
parent 9249105ad6
commit db89a93faa
10 changed files with 200 additions and 177 deletions

View File

@ -50,6 +50,7 @@
xl:ml-64
w-88
xl:block
dark:bg-gray-800
"
>
<div
@ -62,6 +63,7 @@
pb-2
border border-gray-200 border-solid
height-full
dark:border-gray-600
"
>
<div class="mb-6">
@ -96,9 +98,10 @@
px-4
py-1
pb-2
mb-1 mb-2
mb-2
text-sm
border-b border-gray-200 border-solid
dark:border-gray-600
"
>
{{ $t('general.sort_by') }}
@ -161,6 +164,7 @@
overflow-y-scroll
border-l border-gray-200 border-solid
base-scroll
dark:border-gray-600
"
>
<div v-for="(estimate, index) in estimateList" :key="index">
@ -169,9 +173,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-transparent',
'flex justify-between side-estimate p-4 cursor-pointer hover:bg-gray-100 items-center 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:border-primary-400 dark:bg-gray-700':
hasActiveUrl(estimate.id),
},
]"
@ -191,6 +195,7 @@
text-black
capitalize
truncate
dark:text-white
"
/>
@ -203,6 +208,7 @@
font-medium
leading-5
text-gray-600
dark:text-gray-400
"
>
{{ estimate.estimate_number }}
@ -228,6 +234,7 @@
font-semibold
leading-8
text-right text-gray-900
dark:text-white
"
/>
@ -239,6 +246,7 @@
leading-5
text-right text-gray-600
est-date
dark:text-gray-400
"
>
{{ estimate.formatted_estimate_date }}
@ -251,7 +259,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-gray-600 dark:text-gray-300"
>
{{ $t('estimates.no_matching_estimates') }}
</p>

View File

@ -299,6 +299,7 @@ onSearched = debounce(onSearched, 500)
xl:ml-64
w-88
xl:block
dark:bg-gray-800
"
>
<div
@ -311,6 +312,7 @@ onSearched = debounce(onSearched, 500)
pb-2
border border-gray-200 border-solid
height-full
dark:border-gray-600
"
>
<div class="mb-6">
@ -339,9 +341,10 @@ onSearched = debounce(onSearched, 500)
px-2
py-1
pb-2
mb-1 mb-2
mb-2
text-sm
border-b border-gray-200 border-solid
dark:border-gray-600
"
>
{{ $t('general.sort_by') }}
@ -404,6 +407,7 @@ onSearched = debounce(onSearched, 500)
overflow-y-scroll
border-l border-gray-200 border-solid
base-scroll
dark:border-gray-600
"
>
<div v-for="(invoice, index) in invoiceList" :key="index">
@ -412,9 +416,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-transparent',
'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center 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),
},
]"
@ -434,6 +438,7 @@ onSearched = debounce(onSearched, 500)
text-black
capitalize
truncate
dark:text-white
"
/>
@ -446,16 +451,17 @@ onSearched = debounce(onSearched, 500)
font-medium
leading-5
text-gray-600
dark:text-gray-400
"
>
{{ invoice.invoice_number }}
</div>
<BaseEstimateStatusBadge
<BaseInvoiceStatusBadge
:status="invoice.status"
class="px-1 text-xs"
>
{{ invoice.status }}
</BaseEstimateStatusBadge>
</BaseInvoiceStatusBadge>
</div>
<div class="flex-1 whitespace-nowrap right">
@ -468,6 +474,7 @@ onSearched = debounce(onSearched, 500)
leading-8
text-right text-gray-900
block
dark:text-white
"
:amount="invoice.total"
:currency="invoice.customer.currency"
@ -480,6 +487,7 @@ onSearched = debounce(onSearched, 500)
leading-5
text-right text-gray-600
est-date
dark:text-gray-400
"
>
{{ invoice.formatted_invoice_date }}
@ -492,7 +500,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-gray-600 dark:text-gray-300"
>
{{ $t('invoices.no_matching_invoices') }}
</p>

View File

@ -35,6 +35,7 @@
xl:ml-64
w-88
xl:block
dark:bg-gray-800
"
>
<div
@ -46,6 +47,7 @@
pt-8
pb-6
border border-gray-200 border-solid
dark:border-gray-600
"
>
<BaseInput
@ -77,6 +79,7 @@
mb-2
text-sm
border-b border-gray-200 border-solid
dark:border-gray-600
"
>
{{ $t('general.sort_by') }}
@ -139,7 +142,7 @@
<div
ref="paymentListSection"
class="h-full overflow-y-scroll border-l border-gray-200 border-solid"
class="h-full overflow-y-scroll border-l border-gray-200 border-solid dark:border-gray-600"
>
<div v-for="(payment, index) in paymentList" :key="index">
<router-link
@ -147,9 +150,9 @@
:id="'payment-' + payment.id"
:to="`/admin/payments/${payment.id}/view`"
: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),
},
]"
@ -169,6 +172,7 @@
text-black
capitalize
truncate
dark:text-white
"
/>
@ -181,6 +185,7 @@
leading-5
text-gray-500
capitalize
dark:text-gray-400
"
>
{{ payment?.payment_number }}
@ -211,12 +216,13 @@
font-semibold
leading-8
text-right text-gray-900
dark:text-white
"
:amount="payment?.amount"
:currency="payment.customer?.currency"
/>
<div class="text-sm text-right text-gray-500 non-italic">
<div class="text-sm text-right text-gray-500 non-italic dark:text-gray-400">
{{ payment.formatted_payment_date }}
</div>
</div>
@ -227,7 +233,7 @@
</div>
<p
v-if="!paymentList?.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-gray-600 dark:text-gray-300"
>
{{ $t('payments.no_matching_payments') }}
</p>

View File

@ -152,6 +152,7 @@ onSearched = debounce(onSearched, 500)
xl:ml-64
w-88
xl:block
dark:bg-gray-800
"
>
<div
@ -164,6 +165,7 @@ onSearched = debounce(onSearched, 500)
pb-2
border border-gray-200 border-solid
height-full
dark:border-gray-600
"
>
<div class="mb-6">
@ -192,9 +194,10 @@ onSearched = debounce(onSearched, 500)
px-2
py-1
pb-2
mb-1 mb-2
mb-2
text-sm
border-b border-gray-200 border-solid
dark:border-gray-600
"
>
{{ $t('general.sort_by') }}
@ -243,6 +246,7 @@ onSearched = debounce(onSearched, 500)
overflow-y-scroll
border-l border-gray-200 border-solid
base-scroll
dark:border-gray-600
"
>
<div v-for="(invoice, index) in invoiceList" :key="index">
@ -251,9 +255,9 @@ onSearched = debounce(onSearched, 500)
:id="'recurring-invoice-' + invoice.id"
:to="`/admin/recurring-invoices/${invoice.id}/view`"
:class="[
'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent',
'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center 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),
},
]"
@ -273,6 +277,7 @@ onSearched = debounce(onSearched, 500)
text-black
capitalize
truncate
dark:text-white
"
/>
@ -285,6 +290,7 @@ onSearched = debounce(onSearched, 500)
font-medium
leading-5
text-gray-600
dark:text-gray-400
"
>
{{ invoice.invoice_number }}
@ -307,6 +313,7 @@ onSearched = debounce(onSearched, 500)
font-semibold
leading-8
text-right text-gray-900
dark:text-white
"
:amount="invoice.total"
:currency="invoice.customer.currency"
@ -320,6 +327,7 @@ onSearched = debounce(onSearched, 500)
leading-5
text-right text-gray-600
est-date
dark:text-gray-400
"
>
{{ invoice.formatted_starts_at }}
@ -332,7 +340,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-gray-600 dark:text-gray-300"
>
{{ $t('invoices.no_matching_invoices') }}
</p>