add dark mode in customer view file

This commit is contained in:
yashkanakiya
2023-03-29 16:46:20 +05:30
parent 3bb53d2a24
commit 6402771cb8
3 changed files with 33 additions and 18 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>