TheCloneArmy/crater
1
0
Fork 1
mirror of https://github.com/crater-invoice/crater.git synced 2025-10-30 21:21:09 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add dark mode in customer dashboard (#1199)

Browse Source 
* add dark mode in DashboardStatsItem

* add dark mode in customer side header

* add dark mode in customer view file

* fix placeholder

* fix base select input

---------

Co-authored-by: yogesh-gohil <yogeshgohil1611@gmail.com>
This commit is contained in:
Yash Kanakiya
2023-03-30 11:51:38 +05:30
committed by PayalDholakiya
parent 7be2646f00
commit 309f20f548
12 changed files with 72 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
resources/scripts/customer/views/dashboard/DashboardStatsItem.vue
View File

@ -12,18 +12,24 @@
hover:bg-gray-50
xl:p-4
lg:col-span-2
dark:backdrop-blur-xl
dark:shadow-glass
dark:border
dark:border-white/10
dark:bg-gray-800/70
"
:class="{ 'lg:!col-span-3': large }"
:to="route"
>
<div>
<span class="text-xl font-semibold leading-tight text-black xl:text-3xl">
<span class="text-xl font-semibold leading-tight text-black xl:text-3xl dark:text-white">
<slot />
</span>
<span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg">
<span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg dark:text-gray-300">
{{ label }}
</span>
</div>
<BaseDarkHighlight class="!bg-highlight/[.17] !top-5" />
<div class="flex items-center">
<component :is="iconComponent" class="w-10 h-10 xl:w-12 xl:h-12" />
</div>

2
resources/scripts/customer/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-white rounded shadow lg:col-span-3 xl:p-4 dark:bg-gray-800"
>
<div>
<BaseContentPlaceholdersText

1
resources/scripts/customer/views/dashboard/DashboardStatsSmPlaceholder.vue
View File

@ -12,6 +12,7 @@
shadow
lg:col-span-2
xl:p-4
dark:bg-gray-800
"
>
<div>

4
resources/scripts/customer/views/estimates/Index.vue
View File

@ -119,11 +119,11 @@
<template #cell-actions="{ row }">
<BaseDropdown>
<template #activator>
<BaseIcon name="DotsHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon name="DotsHorizontalIcon" class="h-5 text-gray-500 dark:text-gray-200" />
</template>
<router-link :to="`estimates/${row.data.id}/view`">
<BaseDropdownItem>
<BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600" />
<BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600 dark:text-gray-200" />
{{ $t('general.view') }}
</BaseDropdownItem>
</router-link>

17
resources/scripts/customer/views/estimates/View.vue
View File

@ -25,7 +25,7 @@
<!-- Sidebar -->
<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
class="
@ -36,6 +36,7 @@
pt-8
pb-6
border border-gray-200 border-solid
dark:border-gray-600
"
>
<BaseInput
@ -70,6 +71,7 @@
mb-2
text-sm
border-b border-gray-200 border-solid
dark:border-gray-600
"
>
{{ $t('general.sort_by') }}
@ -124,7 +126,7 @@
</div>
</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-else name="SortDescendingIcon" class="h-5" />
</BaseButton>
@ -138,6 +140,7 @@
overflow-y-scroll
border-l border-gray-200 border-solid
sw-scroll
dark:border-gray-600
"
>
<router-link
@ -146,9 +149,9 @@
:key="index"
:to="`/${globalStore.companySlug}/customer/estimates/${estimate.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(estimate.id),
},
]"
@ -164,6 +167,7 @@
leading-5
text-gray-500
capitalize
dark:text-gray-400
"
>
{{ estimate.estimate_number }}
@ -184,11 +188,12 @@
leading-8
text-right text-gray-900
block
dark:text-white
"
:amount="estimate.total"
: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 }}
</div>
</div>
@ -196,7 +201,7 @@
<p
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') }}
</p>

4
resources/scripts/customer/views/invoices/Index.vue
View File

@ -126,11 +126,11 @@
<template #cell-actions="{ row }">
<BaseDropdown>
<template #activator>
<BaseIcon name="DotsHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon name="DotsHorizontalIcon" class="h-5 text-gray-500 dark:text-gray-200" />
</template>
<router-link :to="`invoices/${row.data.id}/view`">
<BaseDropdownItem>
<BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600" />
<BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600 dark:text-gray-200" />
{{ $t('general.view') }}
</BaseDropdownItem>
</router-link>

17
resources/scripts/customer/views/invoices/View.vue
View File

@ -31,7 +31,7 @@
<!-- Sidebar -->
<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
class="
@ -42,6 +42,7 @@
pt-8
pb-6
border border-gray-200 border-solid
dark:border-gray-600
"
>
<BaseInput
@ -76,6 +77,7 @@
mb-2
text-sm
border-b border-gray-200 border-solid
dark:border-gray-600
"
>
{{ $t('general.sort_by') }}
@ -130,7 +132,7 @@
</div>
</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-else name="SortDescendingIcon" class="h-5" />
</BaseButton>
@ -144,6 +146,7 @@
overflow-y-scroll
border-l border-gray-200 border-solid
sw-scroll
dark:border-gray-600
"
>
<router-link
@ -152,9 +155,9 @@
:key="index"
:to="`/${globalStore.companySlug}/customer/invoices/${invoice.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(invoice.id),
},
]"
@ -170,6 +173,7 @@
text-gray-500
capitalize
text-md
dark:text-gray-400
"
>
{{ invoice.invoice_number }}
@ -189,12 +193,13 @@
leading-8
text-right text-gray-900
block
dark:text-white
"
:amount="invoice.total"
: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 }}
</div>
</div>
@ -202,7 +207,7 @@
<p
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') }}
</p>

4
resources/scripts/customer/views/payments/Index.vue
View File

@ -111,11 +111,11 @@
<template #cell-actions="{ row }">
<BaseDropdown>
<template #activator>
<BaseIcon name="DotsHorizontalIcon" class="w-5 text-gray-500" />
<BaseIcon name="DotsHorizontalIcon" class="w-5 text-gray-500 dark:text-gray-200" />
</template>
<router-link :to="`payments/${row.data.id}/view`">
<BaseDropdownItem>
<BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600" />
<BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600 dark:text-gray-200" />
{{ $t('general.view') }}
</BaseDropdownItem>
</router-link>

17
resources/scripts/customer/views/payments/View.vue
View File

@ -19,7 +19,7 @@
<!-- Sidebar -->
<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
class="
@ -30,6 +30,7 @@
pt-8
pb-6
border border-gray-200 border-solid
dark:border-gray-600
"
>
<BaseInput
@ -64,6 +65,7 @@
mb-2
text-sm
border-b border-gray-200 border-solid
dark:border-gray-600
"
>
{{ $t('general.sort_by') }}
@ -118,7 +120,7 @@
</div>
</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-else name="SortDescendingIcon" class="h-5" />
</BaseButton>
@ -132,6 +134,7 @@
overflow-y-scroll
border-l border-gray-200 border-solid
sw-scroll
dark:border-gray-600
"
>
<router-link
@ -140,9 +143,9 @@
:key="index"
:to="`/${globalStore.companySlug}/customer/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),
},
]"
@ -158,6 +161,7 @@
leading-5
text-gray-500
capitalize
dark:text-gray-400
"
>
{{ payment.payment_number }}
@ -174,12 +178,13 @@
leading-8
text-right text-gray-900
block
dark:text-white
"
:amount="payment.amount"
: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 }}
</div>
</div>
@ -187,7 +192,7 @@
<p
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') }}
</p>