Compare commits

..

2 Commits

Author SHA1 Message Date
68018cc726 step navigation dark mode issue fixed 2023-03-30 17:13:25 +05:30
ab13823b83 add dark mode in wizard steps 2023-03-30 16:48:33 +05:30
26 changed files with 242 additions and 372 deletions

View File

@ -43,12 +43,6 @@
max-w-full
left-0
top-3
bg-white
dark:border
dark:border-white/10
dark:text-white
dark:bg-gray-800
dark:shadow-glass
"
>
<div
@ -59,7 +53,7 @@
ring-1 ring-black ring-opacity-5
"
>
<div class="relative grid bg-white dark:bg-gray-800">
<div class="relative grid bg-white">
<div class="relative p-4">
<BaseInput
v-model="textSearch"
@ -72,7 +66,7 @@
<div
v-if="filteredNotes.length > 0"
class="relative flex flex-col overflow-auto list max-h-36 dark:border-white/10"
class="relative flex flex-col overflow-auto list max-h-36"
>
<div
v-for="(note, index) in filteredNotes"
@ -85,8 +79,6 @@
cursor-pointer
hover:bg-gray-100 hover:cursor-pointer
last:border-b-0
dark:border-gray-600
dark:border-white/10 dark:hover:bg-gray-700/30
"
@click="selectNote(index, close)"
>
@ -127,10 +119,6 @@
bg-gray-200
border-none
outline-none
dark:bg-gray-600/70
dark:backdrop-blur-xl
dark:shadow-glass
dark:hover:bg-gray-600/80
"
@click="openNoteModal"
>

View File

@ -1,13 +1,5 @@
<template>
<tr
class="
box-border
bg-white
border border-gray-200 border-solid
rounded-b
dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70
"
>
<tr class="box-border bg-white border border-gray-200 border-solid rounded-b">
<td colspan="5" class="p-0 text-left align-top">
<table class="w-full">
<colgroup>
@ -138,7 +130,7 @@
<div class="flex items-center justify-center w-6 h-10 mx-2">
<BaseIcon
v-if="showRemoveButton"
class="h-5 dark:text-red-400 cursor-pointer"
class="h-5 text-gray-700 cursor-pointer"
name="TrashIcon"
@click="store.removeItem(index)"
/>

View File

@ -30,22 +30,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-none
cursor-pointer
dark:bg-gray-600/70
dark:backdrop-blur-xl
dark:shadow-glass
dark:hover:bg-gray-600/80
"
class="flex items-center justify-center w-full px-2 py-2 bg-gray-200 border-none outline-none cursor-pointer "
@click="openTaxModal"
>
<BaseIcon name="CheckCircleIcon" class="h-5 text-primary-400" />
@ -68,7 +53,7 @@
<BaseIcon
v-if="taxes.length && index !== taxes.length - 1"
name="TrashIcon"
class="h-5 text-gray-700 dark:text-red-400 cursor-pointer"
class="h-5 text-gray-700 cursor-pointer"
@click="removeTax(index)"
/>
</div>

View File

@ -1,172 +1,155 @@
<template>
<div class="relative" >
<BaseDarkHighlight class="z-[-1]" />
<table class="text-center item-table min-w-full">
<colgroup>
<col style="width: 40%; min-width: 280px" />
<col style="width: 10%; min-width: 120px" />
<col style="width: 15%; min-width: 120px" />
<col
<table class="text-center item-table min-w-full">
<colgroup>
<col style="width: 40%; min-width: 280px" />
<col style="width: 10%; min-width: 120px" />
<col style="width: 15%; min-width: 120px" />
<col
v-if="store[storeProp].discount_per_item === 'YES'"
style="width: 15%; min-width: 160px"
/>
<col style="width: 15%; min-width: 120px" />
</colgroup>
<thead class="bg-white border border-gray-200 border-solid">
<tr>
<th
class="
px-5
py-3
text-sm
not-italic
font-medium
leading-5
text-left text-gray-700
border-t border-b border-gray-200 border-solid
"
>
<BaseContentPlaceholders v-if="isLoading">
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
</BaseContentPlaceholders>
<span v-else class="pl-7">
{{ $tc('items.item', 2) }}
</span>
</th>
<th
class="
px-5
py-3
text-sm
not-italic
font-medium
leading-5
text-right text-gray-700
border-t border-b border-gray-200 border-solid
"
>
<BaseContentPlaceholders v-if="isLoading">
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
</BaseContentPlaceholders>
<span v-else>
{{ $t('invoices.item.quantity') }}
</span>
</th>
<th
class="
px-5
py-3
text-sm
not-italic
font-medium
leading-5
text-left text-gray-700
border-t border-b border-gray-200 border-solid
"
>
<BaseContentPlaceholders v-if="isLoading">
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
</BaseContentPlaceholders>
<span v-else>
{{ $t('invoices.item.price') }}
</span>
</th>
<th
v-if="store[storeProp].discount_per_item === 'YES'"
style="width: 15%; min-width: 160px"
/>
<col style="width: 15%; min-width: 120px" />
</colgroup>
<thead
class="
bg-white
border
border-gray-200
border-solid
dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70
"
>
<tr>
<th
class="
px-5
py-3
text-sm
not-italic
font-medium
leading-5
text-left text-gray-700
border-t border-b border-gray-200 border-solid
dark:text-white dark:border-white/10
"
>
<BaseContentPlaceholders v-if="isLoading">
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
</BaseContentPlaceholders>
<span v-else class="pl-7">
{{ $tc('items.item', 2) }}
</span>
</th>
<th
class="
px-5
py-3
text-sm
not-italic
font-medium
leading-5
text-right text-gray-700
border-t border-b border-gray-200 border-solid
dark:text-white dark:border-white/10
"
>
<BaseContentPlaceholders v-if="isLoading">
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
</BaseContentPlaceholders>
<span v-else>
{{ $t('invoices.item.quantity') }}
</span>
</th>
<th
class="
px-5
py-3
text-sm
not-italic
font-medium
leading-5
text-left text-gray-700
border-t border-b border-gray-200 border-solid
dark:text-white dark:border-white/10
"
>
<BaseContentPlaceholders v-if="isLoading">
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
</BaseContentPlaceholders>
<span v-else>
{{ $t('invoices.item.price') }}
</span>
</th>
<th
v-if="store[storeProp].discount_per_item === 'YES'"
class="
px-5
py-3
text-sm
not-italic
font-medium
leading-5
text-left text-gray-700
border-t border-b border-gray-200 border-solid
dark:text-white dark:border-white/10
"
>
<BaseContentPlaceholders v-if="isLoading">
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
</BaseContentPlaceholders>
<span v-else>
{{ $t('invoices.item.discount') }}
</span>
</th>
<th
class="
px-5
py-3
text-sm
not-italic
font-medium
leading-5
text-right text-gray-700
border-t border-b border-gray-200 border-solid
dark:text-white dark:border-white/10
"
>
<BaseContentPlaceholders v-if="isLoading">
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
</BaseContentPlaceholders>
<span v-else class="pr-10 column-heading">
{{ $t('invoices.item.amount') }}
</span>
</th>
</tr>
</thead>
<draggable
v-model="store[storeProp].items"
item-key="id"
tag="tbody"
handle=".handle"
>
<template #item="{ element, index }">
<Item
:key="element.id"
:index="index"
:item-data="element"
:loading="isLoading"
:currency="defaultCurrency"
:item-validation-scope="itemValidationScope"
:invoice-items="store[storeProp].items"
:store="store"
:store-prop="storeProp"
/>
</template>
</draggable>
</table>
<div
class="
flex
items-center
justify-center
w-full
px-6
py-3
text-base
border border-t-0 border-gray-200 border-solid
cursor-pointer
text-primary-400
hover:bg-primary-100
dark:bg-gray-900/50 dark:border-white/10 dark:hover:bg-gray-900/80
"
@click="store.addItem"
class="
px-5
py-3
text-sm
not-italic
font-medium
leading-5
text-left text-gray-700
border-t border-b border-gray-200 border-solid
"
>
<BaseContentPlaceholders v-if="isLoading">
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
</BaseContentPlaceholders>
<span v-else>
{{ $t('invoices.item.discount') }}
</span>
</th>
<th
class="
px-5
py-3
text-sm
not-italic
font-medium
leading-5
text-right text-gray-700
border-t border-b border-gray-200 border-solid
"
>
<BaseContentPlaceholders v-if="isLoading">
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
</BaseContentPlaceholders>
<span v-else class="pr-10 column-heading">
{{ $t('invoices.item.amount') }}
</span>
</th>
</tr>
</thead>
<draggable
v-model="store[storeProp].items"
item-key="id"
tag="tbody"
handle=".handle"
>
<BaseIcon name="PlusCircleIcon" class="mr-2" />
{{ $t('general.add_new_item') }}
</div>
<template #item="{ element, index }">
<Item
:key="element.id"
:index="index"
:item-data="element"
:loading="isLoading"
:currency="defaultCurrency"
:item-validation-scope="itemValidationScope"
:invoice-items="store[storeProp].items"
:store="store"
:store-prop="storeProp"
/>
</template>
</draggable>
</table>
<div
class="
flex
items-center
justify-center
w-full
px-6
py-3
text-base
border border-t-0 border-gray-200 border-solid
cursor-pointer
text-primary-400
hover:bg-primary-100
"
@click="store.addItem"
>
<BaseIcon name="PlusCircleIcon" class="mr-2" />
{{ $t('general.add_new_item') }}
</div>
</template>

View File

@ -6,7 +6,6 @@
mt-6
bg-white
border border-gray-200 border-solid
dark:bg-gray-800/50 dark:border-white/10
rounded
md:min-w-[390px]
min-w-[300px]
@ -193,7 +192,6 @@
pt-2
mt-5
border-t border-gray-200 border-solid
dark:border-gray-600
"
>
<BaseContentPlaceholders v-if="isLoading">
@ -201,7 +199,7 @@
</BaseContentPlaceholders>
<label
v-else
class="m-0 text-sm font-semibold leading-5 text-gray-400 uppercase dark:text-gray-400"
class="m-0 text-sm font-semibold leading-5 text-gray-400 uppercase"
>{{ $t('estimates.total') }} {{ $t('estimates.amount') }}:</label
>

View File

@ -17,7 +17,7 @@
<BaseIcon
name="TrashIcon"
class="h-5 ml-2 cursor-pointer dark:text-red-400"
class="h-5 ml-2 cursor-pointer"
@click="$emit('remove', tax.id)"
/>
</label>

View File

@ -44,7 +44,7 @@
>
<!-- Tax Search Input -->
<div class="relative bg-white dark:bg-gray-800">
<div class="relative bg-white">
<div class="relative p-4">
<BaseInput
v-model="textSearch"
@ -65,14 +65,13 @@
list
max-h-36
border-t border-gray-200
dark:border-gray-600
"
>
<div
v-for="(taxType, index) in filteredTaxType"
:key="index"
:class="{
'bg-gray-100 cursor-not-allowed opacity-50 pointer-events-none dark:bg-gray-900':
'bg-gray-100 cursor-not-allowed opacity-50 pointer-events-none':
taxes.find((val) => {
return val.tax_type_id === taxType.id
}),
@ -85,7 +84,6 @@
cursor-pointer
hover:bg-gray-100 hover:cursor-pointer
last:border-b-0
dark:border-gray-600 dark:hover:bg-gray-700/20
"
@click="selectTaxType(taxType, close)"
>
@ -142,10 +140,6 @@
bg-gray-200
border-none
outline-none
dark:bg-gray-600/70
dark:backdrop-blur-xl
dark:shadow-glass
dark:hover:bg-gray-600/80
"
@click="openTaxTypeModal"
>

View File

@ -1,5 +1,5 @@
<template>
<div class="grid h-screen grid-cols-12 overflow-y-hidden bg-gray-100 dark:bg-gray-900">
<div class="grid h-screen grid-cols-12 overflow-y-hidden bg-gray-100">
<NotificationRoot />
<div

View File

@ -68,8 +68,10 @@
</TransitionChild>
<div class="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
<div class="flex items-center shrink-0 px-4 mb-10">
<img class="h-auto max-w-full w-36 hidden dark:block" :src="getDarkLogo"/>
<img class="h-auto max-w-full w-36 block dark:hidden" :src="getLightLogo"/>
<MainLogo
class="block h-auto max-w-full w-36 text-primary-400"
alt="Crater Logo"
/>
</div>
<nav
@ -165,7 +167,8 @@
</template>
<script setup>
import { computed } from 'vue'
import MainLogo from '@/scripts/components/icons/MainLogo.vue'
import {
Dialog,
DialogOverlay,
@ -180,9 +183,6 @@ import LightDarkSwitch from '@/scripts/components/LightDarkSwitcher.vue'
const route = useRoute()
const globalStore = useGlobalStore()
const getDarkLogo = computed(() => new URL('/img/logo-white.png', import.meta.url))
const getLightLogo = computed(() => new URL('/img/crater-logo.png', import.meta.url))
function hasActiveUrl(url) {
return route.path.indexOf(url) > -1
}

View File

@ -34,7 +34,8 @@ export const useGlobalStore = (useWindow = false) => {
isAppLoaded: false,
isSidebarOpen: false,
areCurrenciesLoading: false,
isDarkModeOn: localStorage.getItem('theme') === 'dark' || document.documentElement.classList.contains('dark'),
isDarkModeOn: false,
downloadReport: null,
}),

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 dark:hover:text-primary-500"
class="text-sm text-primary-400 hover:text-gray-700"
>
{{ $t('general.back_to_login') }}
</router-link>

View File

@ -49,7 +49,7 @@
<div class="mb-4">
<router-link
to="forgot-password"
class="text-sm text-primary-400 hover:text-gray-700 dark:hover:text-primary-500"
class="text-sm text-primary-400 hover:text-gray-700"
>
{{ $t('login.forgot_password') }}
</router-link>

View File

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

View File

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

View File

@ -35,7 +35,6 @@
xl:ml-64
w-88
xl:block
dark:bg-gray-800
"
>
<div
@ -47,7 +46,6 @@
pt-8
pb-6
border border-gray-200 border-solid
dark:border-gray-600
"
>
<BaseInput
@ -79,7 +77,6 @@
mb-2
text-sm
border-b border-gray-200 border-solid
dark:border-gray-600
"
>
{{ $t('general.sort_by') }}
@ -142,7 +139,7 @@
<div
ref="paymentListSection"
class="h-full overflow-y-scroll border-l border-gray-200 border-solid dark:border-gray-600"
class="h-full overflow-y-scroll border-l border-gray-200 border-solid"
>
<div v-for="(payment, index) in paymentList" :key="index">
<router-link
@ -150,9 +147,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 dark:hover:bg-gray-700',
'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
{
'bg-gray-100 border-l-4 border-primary-500 border-solid dark:bg-gray-700':
'bg-gray-100 border-l-4 border-primary-500 border-solid':
hasActiveUrl(payment.id),
},
]"
@ -172,7 +169,6 @@
text-black
capitalize
truncate
dark:text-white
"
/>
@ -185,7 +181,6 @@
leading-5
text-gray-500
capitalize
dark:text-gray-400
"
>
{{ payment?.payment_number }}
@ -216,13 +211,12 @@
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 dark:text-gray-400">
<div class="text-sm text-right text-gray-500 non-italic">
{{ payment.formatted_payment_date }}
</div>
</div>
@ -233,7 +227,7 @@
</div>
<p
v-if="!paymentList?.length && !isLoading"
class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
class="flex justify-center px-4 mt-5 text-sm text-gray-600"
>
{{ $t('payments.no_matching_payments') }}
</p>

View File

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

View File

@ -1,41 +0,0 @@
<template>
<button
type="button"
class="
flex
h-8
w-8
items-center
justify-center
rounded-md
transition
hover:bg-zinc-900/5
dark:hover:bg-white/5
"
@click="onChange"
>
<BaseIcon v-if="!globalStore.isDarkModeOn" class="h-5 w-5 text-black" name="SunIcon" />
<BaseIcon v-else class="h-5 w-5 text-white" name="MoonIcon" />
</button>
</template>
<script setup>
import { computed } from 'vue'
import { useGlobalStore } from '@/scripts/customer/stores/global'
const globalStore = useGlobalStore()
function onChange() {
globalStore.isDarkModeOn = !globalStore.isDarkModeOn
if (globalStore.isDarkModeOn) {
localStorage.theme = 'dark'
document.documentElement.classList.add('dark')
document.documentElement.style.setProperty('color-scheme', 'dark')
} else {
localStorage.theme = 'light'
document.documentElement.classList.remove('dark')
document.documentElement.style.setProperty('color-scheme', 'light')
}
}
</script>

View File

@ -16,21 +16,26 @@ defineProps({
const globalStore = useGlobalStore()
const enabled = computed({
get: () => globalStore.isDarkModeOn,
set: (value) => {
if (value) {
localStorage.theme = 'dark'
document.documentElement.classList.add('dark')
document.documentElement.style.setProperty('color-scheme', 'dark')
} else {
localStorage.theme = 'light'
document.documentElement.classList.remove('dark')
document.documentElement.style.setProperty('color-scheme', 'light')
}
globalStore.isDarkModeOn = value
},
})
const enabled = ref(
localStorage.getItem('theme') === 'dark' ||
document.documentElement.classList.contains('dark')
)
globalStore.isDarkModeOn = enabled
function onChange(val) {
if (val) {
localStorage.theme = 'dark'
document.documentElement.classList.add('dark')
document.documentElement.style.setProperty('color-scheme', 'dark')
globalStore.isDarkModeOn = true
} else {
localStorage.theme = 'light'
document.documentElement.classList.remove('dark')
document.documentElement.style.setProperty('color-scheme', 'light')
globalStore.isDarkModeOn = false
}
}
</script>
<template>
@ -44,6 +49,7 @@ const enabled = computed({
v-model="enabled"
class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:ring-offset-gray-700"
:class="[enabled ? 'bg-primary-600' : 'bg-gray-200']"
@update:modelValue="onChange"
>
<span class="sr-only">Use setting</span>
<span

View File

@ -28,7 +28,6 @@
:attributes="attrs"
:model-config="config"
:masks="masks"
:is-dark="isDarkModeOn"
:locale="global.locale"
>
<template
@ -73,7 +72,7 @@
<template v-if="showExtraOptions" #footer>
<div
class="bg-gray-100 dark:bg-gray-800 grid grid-cols-3 gap-2 p-2 border-t dark:border-gray-500 rounded-b-lg"
class="bg-gray-100 grid grid-cols-3 gap-2 p-2 border-t rounded-b-lg"
>
<button type="button" class="extra-button" @click="moveToDate(sourceDate)">
{{ global.t('date_picker.same_day') }}
@ -147,7 +146,7 @@ const props = defineProps({
defaultInputClass: {
type: String,
default:
'border-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white font-base pl-8 py-2 outline-none focus:ring-primary-400 focus:outline-none focus:border-primary-400 block w-full sm:text-sm border-gray-200 rounded-md text-black',
'border-2 font-base pl-8 py-2 outline-none focus:ring-primary-400 focus:outline-none focus:border-primary-400 block w-full sm:text-sm border-gray-200 rounded-md text-black',
},
time24hr: {
type: Boolean,
@ -164,7 +163,7 @@ const props = defineProps({
sourceDate: {
type: [String, Date],
default: () => new Date(),
},
}
})
const emit = defineEmits(['update:modelValue'])
@ -176,9 +175,6 @@ const vCalendar = ref(null)
const hasIconSlot = computed(() => {
return !!slots.icon
})
const isDarkModeOn = computed(() =>
document.documentElement.classList.contains('dark')
)
const computedContainerClass = computed(() => {
let containerClass = `${props.containerClass} `

View File

@ -3,7 +3,6 @@
<path
d="M690 4.08004C518 -9.91998 231 4.08004 -6 176.361L231 197.08L1170 219.08C1113.33 175.747 909.275 21.928 690 4.08004Z"
fill="white"
class="dark:fill-gray-900"
fill-opacity="0.1"
/>
</svg>

View File

@ -6,7 +6,7 @@
<!-- <SiteSidebar /> -->
<main class="h-screen min-h-0 pb-16 mt-16 overflow-y-auto">
<main class="mt-16 pb-16 h-screen overflow-y-auto min-h-0">
<router-view />
</main>
</div>

View File

@ -1,24 +1,31 @@
<template>
<div
class="flex flex-col justify-center h-full min-h-screen py-12 overflow-hidden bg-gray-100 sm:px-6 lg:px-8 dark:bg-gray-800/80 dark:text-white font-base "
class="
min-h-screen
bg-gray-200
flex flex-col
justify-center
py-12
sm:px-6
lg:px-8
"
>
<NotificationRoot />
<div class="px-4 sm:mx-auto sm:w-full sm:max-w-md sm:px-0">
<div class="sm:mx-auto sm:w-full sm:max-w-md px-4 sm:px-0">
<MainLogo
v-if="!customerLogo"
class="block w-48 h-auto max-w-full mx-auto text-primary-400"
class="block w-48 h-auto max-w-full text-primary-400 mx-auto"
/>
<img
v-else
:src="customerLogo"
class="block w-48 h-auto max-w-full mx-auto text-primary-400"
class="block w-48 h-auto max-w-full text-primary-400 mx-auto"
/>
</div>
<div class="px-4 mt-8 sm:mx-auto sm:w-full sm:max-w-md sm:px-0">
<div class="px-4 py-8 bg-white rounded-lg shadow sm:px-10 dark:from-gray-700/70 dark:to-gray-800/70 dark:bg-transparent dark:backdrop-blur-xl dark:shadow-glass dark:border dark:border-white/10">
<BaseDarkHighlight/>
<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md px-4 sm:px-0">
<div class="bg-white py-8 px-4 shadow rounded-lg sm:px-10">
<router-view />
</div>
</div>

View File

@ -34,7 +34,7 @@
:to="`/${globalStore.companySlug}${item.link}`"
:class="[
hasActiveUrl(item.link)
? 'text-primary-600 border-primary-600 dark:border-primary-400 dark:text-primary-400'
? 'border-primary-500 text-primary-600 dark:text-primary-400'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-200',
'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
]"
@ -44,8 +44,6 @@
</div>
</div>
<div class="hidden sm:ml-6 sm:flex sm:items-center">
<!-- Dark mode Toggle -->
<CustomerLightDarkButton/>
<!-- Profile dropdown -->
@ -136,22 +134,18 @@
</router-link>
</div>
<div class="pt-4 pb-3 border-t border-gray-200 dark:border-gray-500">
<div class="flex items-center justify-between pr-5">
<div class="flex items-center px-4">
<div class="shrink-0">
<img class="h-10 w-10 rounded-full" :src="previewAvatar" alt="" />
<div class="flex items-center px-4">
<div class="shrink-0">
<img class="h-10 w-10 rounded-full" :src="previewAvatar" alt="" />
</div>
<div class="ml-3">
<div class="text-base font-medium text-gray-800">
{{ globalStore.currentUser.title }}
</div>
<div class="ml-3">
<div class="text-base font-medium text-gray-800">
{{ globalStore.currentUser.title }}
</div>
<div class="text-sm font-medium text-gray-500 dark:text-gray-200">
{{ globalStore.currentUser.email }}
</div>
<div class="text-sm font-medium text-gray-500 dark:text-gray-200">
{{ globalStore.currentUser.email }}
</div>
</div>
<!-- Dark mode Toggle -->
<CustomerLightDarkButton/>
</div>
</div>
<div class="mt-3 space-y-1">
<router-link
@ -178,7 +172,6 @@ import { useRoute, useRouter } from 'vue-router'
import { ref, watch, computed } from 'vue'
import { useGlobalStore } from '@/scripts/customer/stores/global'
import MainLogo from '@/scripts/components/icons/MainLogo.vue'
import CustomerLightDarkButton from '@/scripts/components/CustomerLightDarkButton.vue'
import {
Disclosure,
DisclosureButton,

View File

@ -13,8 +13,7 @@ export const useGlobalStore = defineStore({
currentUser: null,
companySlug: '',
mainMenu: null,
enabledModules: [],
isDarkModeOn: localStorage.getItem('theme') === 'dark' || document.documentElement.classList.contains('dark')
enabledModules: []
}),
actions: {

View File

@ -31,7 +31,7 @@
<div class="mt-4 mb-4 text-sm">
<router-link
to="login"
class="text-sm text-primary-400 hover:text-gray-700 dark:hover:text-primary-500"
class="text-sm text-primary-400 hover:text-gray-700"
>
{{ $t('general.back_to_login') }}
</router-link>

View File

@ -55,7 +55,7 @@
<div class="flex items-center justify-between">
<router-link
:to="{ name: 'customer.forgot-password' }"
class="text-sm text-primary-400 hover:text-gray-500 dark:hover:text-primary-500"
class="text-sm text-primary-600 hover:text-gray-500"
>
{{ $t('login.forgot_password') }}
</router-link>