Compare commits

..

3 Commits

Author SHA1 Message Date
ca56046e33 add dark-mode in calendar 2023-03-23 18:43:44 +05:30
cba602655d Converted <label> in <BaseLabel> 2023-03-23 17:24:03 +05:30
87495e8055 added dark-mode in BaseInputGroup and BaseLabel 2023-03-22 10:16:06 +05:30
21 changed files with 150 additions and 185 deletions

View File

@ -83,25 +83,25 @@
@click="selectNote(index, close)"
>
<div class="flex justify-between px-2">
<label
<BaseLabel
class="
m-0
text-base
font-semibold
leading-tight
text-gray-700
cursor-pointer
!m-0
!text-base
!font-semibold
!leading-tight
!text-gray-700
!cursor-pointer
"
>
{{ note.name }}
</label>
</BaseLabel>
</div>
</div>
</div>
<div v-else class="flex justify-center p-5 text-gray-400">
<label class="text-base text-gray-500">
<BaseLabel class="!text-base !text-gray-500">
{{ $t('general.no_note_found') }}
</label>
</BaseLabel>
</div>
</div>
<button
@ -122,19 +122,18 @@
@click="openNoteModal"
>
<BaseIcon name="CheckCircleIcon" class="text-primary-400" />
<label
<BaseLabel
class="
m-0
ml-3
text-sm
leading-none
cursor-pointer
font-base
text-primary-400
!m-0
!ml-3
!leading-none
!cursor-pointer
!font-base
!text-primary-400
"
>
{{ $t('settings.customization.notes.add_new_note') }}
</label>
</BaseLabel>
</button>
</div>
</PopoverPanel>

View File

@ -1,9 +1,9 @@
<template>
<div class="flex items-center justify-between mb-3">
<div class="flex items-center text-base" style="flex: 4">
<label class="pr-2 mb-0" align="right">
<BaseLabel class="!pr-2 !mb-0" align="right">
{{ $t('invoices.item.tax') }}
</label>
</BaseLabel>
<BaseMultiselect
v-model="selectedTax"
@ -35,9 +35,9 @@
>
<BaseIcon name="CheckCircleIcon" class="h-5 text-primary-400" />
<label
class="ml-2 text-sm leading-none cursor-pointer text-primary-400"
>{{ $t('invoices.add_new_tax') }}</label
<BaseLabel
class="!ml-2 !leading-none !cursor-pointer !text-primary-400"
>{{ $t('invoices.add_new_tax') }}</BaseLabel
>
</button>
</template>

View File

@ -5,9 +5,9 @@
>
<SelectNotePopup :type="type" @select="onSelectNote" />
</div>
<label class="text-gray-800 font-medium mb-4 text-sm">
<BaseLabel class="!text-gray-800 !mb-4 ">
{{ $t('invoices.notes') }}
</label>
</BaseLabel>
<BaseCustomInput
v-model="store[storeProp].notes"
:content-loading="store.isFetchingInitialSettings"

View File

@ -16,12 +16,12 @@
<BaseContentPlaceholders v-if="isLoading">
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
</BaseContentPlaceholders>
<label
<BaseLabel
v-else
class="text-sm font-semibold leading-5 text-gray-400 uppercase"
class="!font-semibold !text-gray-400 !uppercase"
>
{{ $t('estimates.sub_total') }}
</label>
</BaseLabel>
<BaseContentPlaceholders v-if="isLoading">
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
@ -29,7 +29,7 @@
<label
v-else
class="flex items-center justify-center m-0 text-lg text-black uppercase "
class="flex items-center justify-center m-0 text-lg text-black dark:text-white uppercase "
>
<BaseFormatMoney
:amount="store.getSubTotal"
@ -48,7 +48,7 @@
</BaseContentPlaceholders>
<label
v-else-if="store[storeProp].tax_per_item === 'YES'"
class="m-0 text-sm font-semibold leading-5 text-gray-500 uppercase"
class="m-0 text-sm font-semibold leading-5 text-gray-500 uppercase dark:text-gray-400"
>
{{ tax.name }} - {{ tax.percent }}%
</label>
@ -59,7 +59,7 @@
<label
v-else-if="store[storeProp].tax_per_item === 'YES'"
class="flex items-center justify-center m-0 text-lg text-black uppercase "
class="flex items-center justify-center m-0 text-lg text-black dark:text-white uppercase "
>
<BaseFormatMoney :amount="tax.amount" :currency="defaultCurrency" />
</label>
@ -75,12 +75,12 @@
<BaseContentPlaceholders v-if="isLoading">
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
</BaseContentPlaceholders>
<label
<BaseLabel
v-else
class="text-sm font-semibold leading-5 text-gray-400 uppercase"
class=" !font-semibold !text-gray-400 !uppercase"
>
{{ $t('estimates.discount') }}
</label>
</BaseLabel>
<BaseContentPlaceholders v-if="isLoading">
<BaseContentPlaceholdersText
:lines="1"
@ -171,21 +171,21 @@
<BaseContentPlaceholders v-if="isLoading">
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
</BaseContentPlaceholders>
<label
<BaseLabel
v-else
class="m-0 text-sm font-semibold leading-5 text-gray-400 uppercase"
>{{ $t('estimates.total') }} {{ $t('estimates.amount') }}:</label
class="!m-0 !font-semibold !text-gray-400 !uppercase"
>{{ $t('estimates.total') }} {{ $t('estimates.amount') }}:</BaseLabel
>
<BaseContentPlaceholders v-if="isLoading">
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
</BaseContentPlaceholders>
<label
<BaseLabel
v-else
class="flex items-center justify-center text-lg uppercase text-primary-400"
class="!flex !items-center !justify-center !text-lg !uppercase !text-primary-400"
>
<BaseFormatMoney :amount="store.getTotal" :currency="defaultCurrency" />
</label>
</BaseLabel>
</div>
</div>
</template>

View File

@ -1,9 +1,9 @@
<template>
<div class="flex items-center justify-between w-full mt-2 text-sm">
<label class="font-semibold leading-5 text-gray-500 uppercase">
<BaseLabel class="!font-semibold !text-gray-500 !uppercase">
{{ tax.name }} ({{ tax.percent }} %)
</label>
<label class="flex items-center justify-center text-lg text-black">
</BaseLabel>
<label class="flex items-center justify-center text-lg text-black dark:text-white">
<BaseFormatMoney :amount="tax.amount" :currency="currency" />
<BaseIcon

View File

@ -88,38 +88,37 @@
@click="selectTaxType(taxType, close)"
>
<div class="flex justify-between px-2">
<label
<BaseLabel
class="
m-0
text-base
font-semibold
leading-tight
text-gray-700
cursor-pointer
!m-0
!text-base
!font-semibold
!leading-tight
!cursor-pointer
"
>
{{ taxType.name }}
</label>
</BaseLabel>
<label
<BaseLabel
class="
m-0
text-base
font-semibold
text-gray-700
cursor-pointer
!m-0
!text-base
!font-semibold
!text-gray-700
!cursor-pointer
"
>
{{ taxType.percent }} %
</label>
</BaseLabel>
</div>
</div>
</div>
<div v-else class="flex justify-center p-5 text-gray-400">
<label class="text-base text-gray-500 cursor-pointer">
<BaseLabel class="!text-base !text-gray-500 !cursor-pointer">
{{ $t('general.no_tax_found') }}
</label>
</BaseLabel>
</div>
</div>
@ -142,19 +141,18 @@
@click="openTaxTypeModal"
>
<BaseIcon name="CheckCircleIcon" class="text-primary-400" />
<label
<BaseLabel
class="
m-0
ml-3
text-sm
leading-none
cursor-pointer
font-base
text-primary-400
!m-0
!ml-3
!leading-none
!cursor-pointer
!font-base
!text-primary-400
"
>
{{ $t('estimates.add_new_tax') }}
</label>
</BaseLabel>
</button>
</div>
</PopoverPanel>

View File

@ -1,9 +1,9 @@
<template>
<div>
<label class="flex text-gray-800 font-medium text-sm mb-2">
<BaseLabel class="!flex !text-gray-800 !mb-2">
{{ $t('general.select_template') }}
<span class="text-sm text-red-500"> *</span>
</label>
</BaseLabel>
<BaseButton
type="button"
class="flex justify-center w-full text-sm lg:w-auto hover:bg-gray-200"

View File

@ -53,7 +53,7 @@
</div>
</div>
<div v-else class="mt-24">
<label class="flex items-center justify-center text-gray-500">
<label class="flex items-center justify-center text-gray-500 dark:text-gray-300">
{{ $t('modules.no_modules_installed') }}
</label>
</div>

View File

@ -215,9 +215,9 @@
<SelectNotePopup type="Payment" @select="onSelectNote" />
</div>
<label class="mb-4 text-sm font-medium text-gray-800">
<BaseLabel class="!mb-4 !text-gray-800">
{{ $t('estimates.notes') }}
</label>
</BaseLabel>
<BaseCustomInput
v-model="paymentStore.currentPayment.notes"

View File

@ -4,9 +4,9 @@
:description="$t('settings.update_app.description')"
>
<div class="pb-8 ml-0">
<label class="text-sm not-italic font-medium input-label">
<BaseLabel class="!input-label">
{{ $t('settings.update_app.current_version') }}
</label>
</BaseLabel>
<div
class="
@ -64,9 +64,9 @@
</div>
</div>
<label class="text-sm not-italic font-medium input-label">
<BaseLabel class="!input-label">
{{ $t('settings.update_app.next_version') }}
</label>
</BaseLabel>
<br />
<div
class="
@ -99,9 +99,9 @@
v-html="description"
></div>
<label class="text-sm not-italic font-medium input-label">
<BaseLabel class=" !input-label">
{{ $t('settings.update_app.requirements') }}
</label>
</BaseLabel>
<table class="w-1/2 mt-2 border-2 border-gray-200 BaseTable-fixed">
<tr

View File

@ -97,6 +97,7 @@
whitespace-nowrap
mr-2
min-w-[200px]
dark:text-primary-400
"
>
{{ element.label }}

View File

@ -50,20 +50,20 @@
pb-4
"
>
<label
<BaseLabel
class="
px-3
py-2
text-xs
font-semibold
text-gray-400
mb-0.5
block
uppercase
!px-3
!py-2
!text-xs
!font-semibold
!text-gray-400
!mb-0.5
!block
!uppercase
"
>
{{ $t('company_switcher.label') }}
</label>
</BaseLabel>
<div
v-if="companyStore.companies.length < 1"

View File

@ -62,9 +62,9 @@
</div>
<div v-else>
<div v-if="usersStore.customerList.length > 0">
<label class="text-sm text-gray-400 mb-0.5 block px-2 uppercase">
<BaseLabel class="!text-gray-400 !mb-0.5 !block !px-2 !uppercase">
{{ $t('global_search.customers') }}
</label>
</BaseLabel>
<div
v-for="(customer, index) in usersStore.customerList"
:key="index"
@ -108,11 +108,11 @@
</div>
<div v-if="usersStore.userList.length > 0" class="mt-2">
<label
class="text-sm text-gray-400 mb-2 block px-2 mb-0.5 uppercase"
<BaseLabel
class="!text-gray-400 !mb-2 !block !px-2 !uppercase"
>
{{ $t('global_search.users') }}
</label>
</BaseLabel>
<div
v-for="(user, index) in usersStore.userList"
:key="index"

View File

@ -15,7 +15,7 @@
v-if="label"
:for="id"
:class="`font-medium ${
disabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-600'
disabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-600 dark:text-white'
} cursor-pointer `"
>
{{ label }}

View File

@ -39,8 +39,6 @@ $base-content-placeholders-border-radius: 6px !default;
$base-content-placeholders-line-height: 15px !default;
$base-content-placeholders-spacing: 10px !default;
$base-content-placeholders-primary-color-dark: rgb(71, 85, 105) !default;
$base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !default;
// Animations
@keyframes vueContentPlaceholdersAnimation {
0% {
@ -59,10 +57,6 @@ $base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !default;
min-height: $base-content-placeholders-line-height;
background: $base-content-placeholders-secondary-color;
.dark & {
background: $base-content-placeholders-secondary-color-dark;
}
.base-content-placeholders-is-rounded & {
border-radius: $base-content-placeholders-border-radius;
}
@ -92,15 +86,6 @@ $base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !default;
animation-name: vueContentPlaceholdersAnimation;
animation-timing-function: linear;
}
.dark .base-content-placeholders-is-animated &::before {
background: linear-gradient(
to right,
transparent 0%,
darken($base-content-placeholders-secondary-color-dark, 5%) 15%,
transparent 30%
);
}
}
@mixin base-content-placeholders-spacing {
@ -171,10 +156,6 @@ $base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !default;
min-height: $base-content-placeholders-line-height;
background: $base-content-placeholders-secondary-color;
.dark & {
background: $base-content-placeholders-secondary-color-dark;
}
.base-content-placeholders-is-animated &::before {
content: '';
position: absolute;
@ -196,14 +177,6 @@ $base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !default;
animation-timing-function: linear;
}
.dark .base-content-placeholders-is-animated &::before {
background: linear-gradient(
to right,
transparent 0%,
darken($base-content-placeholders-secondary-color-dark, 5%) 15%,
transparent 30%
);
}
// @include base-content-placeholders-spacing;
}

View File

@ -69,31 +69,29 @@
</div>
<div class="grid grid-cols-2 gap-8 mt-2">
<div v-if="selectedCustomer.billing" class="flex flex-col">
<label
<BaseLabel
class="
mb-1
text-sm
font-medium
text-left text-gray-400
uppercase
whitespace-nowrap
!mb-1
!text-left !text-gray-400
!uppercase
!whitespace-nowrap
"
>
{{ $t('general.bill_to') }}
</label>
</BaseLabel>
<div
v-if="selectedCustomer.billing"
class="flex flex-col flex-1 p-0 text-left"
>
<label
<BaseLabel
v-if="selectedCustomer.billing.name"
class="relative w-11/12 text-sm truncate"
class="!relative !w-11/12 !truncate"
>
{{ selectedCustomer.billing.name }}
</label>
</BaseLabel>
<label class="relative w-11/12 text-sm truncate">
<BaseLabel class="!relative !w-11/12 !truncate">
<span v-if="selectedCustomer.billing.city">
{{ selectedCustomer.billing.city }}
</span>
@ -108,42 +106,40 @@
<span v-if="selectedCustomer.billing.state">
{{ selectedCustomer.billing.state }}
</span>
</label>
<label
</BaseLabel>
<BaseLabel
v-if="selectedCustomer.billing.zip"
class="relative w-11/12 text-sm truncate"
class="!relative !w-11/12 !truncate"
>
{{ selectedCustomer.billing.zip }}
</label>
</BaseLabel>
</div>
</div>
<div v-if="selectedCustomer.shipping" class="flex flex-col">
<label
<BaseLabel
class="
mb-1
text-sm
font-medium
text-left text-gray-400
uppercase
whitespace-nowrap
!mb-1
!text-left !text-gray-400
!uppercase
!whitespace-nowrap
"
>
{{ $t('general.ship_to') }}
</label>
</BaseLabel>
<div
v-if="selectedCustomer.shipping"
class="flex flex-col flex-1 p-0 text-left"
>
<label
<BaseLabel
v-if="selectedCustomer.shipping.name"
class="relative w-11/12 text-sm truncate"
class="!relative !w-11/12 !truncate"
>
{{ selectedCustomer.shipping.name }}
</label>
</BaseLabel>
<label class="relative w-11/12 text-sm truncate">
<BaseLabel class="!relative !w-11/12 !truncate">
<span v-if="selectedCustomer.shipping.city">
{{ selectedCustomer.shipping.city }}
</span>
@ -158,13 +154,13 @@
<span v-if="selectedCustomer.shipping.state">
{{ selectedCustomer.shipping.state }}
</span>
</label>
<label
</BaseLabel>
<BaseLabel
v-if="selectedCustomer.shipping.zip"
class="relative w-11/12 text-sm truncate"
class="!relative !w-11/12 !text-sm !truncate"
>
{{ selectedCustomer.shipping.zip }}
</label>
</BaseLabel>
</div>
</div>
</div>
@ -211,7 +207,7 @@
/>
<div class="mt-1">
<label class="text-lg font-medium text-gray-900">
<label class="text-lg font-medium text-gray-900 dark:text-white">
{{ $t('customers.new_customer') }}
<span class="text-red-500"> * </span>
</label>
@ -335,9 +331,9 @@
v-if="customerStore.customers.length === 0"
class="flex justify-center p-5 text-gray-400"
>
<label class="text-base text-gray-500 cursor-pointer">
<BaseLabel class="!text-base !text-gray-500 !cursor-pointer">
{{ $t('customers.no_customers_found') }}
</label>
</BaseLabel>
</div>
</ul>
</div>
@ -362,19 +358,18 @@
>
<BaseIcon name="UserAddIcon" class="text-primary-400" />
<label
<BaseLabel
class="
m-0
ml-3
text-sm
leading-none
cursor-pointer
font-base
text-primary-400
!m-0
!ml-3
!leading-none
!cursor-pointer
!font-base
!text-primary-400
"
>
{{ $t('customers.add_new_customer') }}
</label>
</BaseLabel>
</button>
</PopoverPanel>
</div>

View File

@ -28,6 +28,7 @@
:attributes="attrs"
:model-config="config"
:masks="masks"
:is-dark="isDarkModeOn"
:locale="global.locale"
>
<template
@ -72,7 +73,7 @@
<template v-if="showExtraOptions" #footer>
<div
class="bg-gray-100 grid grid-cols-3 gap-2 p-2 border-t rounded-b-lg"
class="bg-gray-800 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') }}
@ -146,7 +147,7 @@ const props = defineProps({
defaultInputClass: {
type: String,
default:
'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',
'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',
},
time24hr: {
type: Boolean,
@ -171,7 +172,7 @@ const slots = useSlots()
const companyStore = useCompanyStore()
const { global } = window.i18n
const vCalendar = ref(null)
const isDarkModeOn = document.documentElement.classList.contains('dark')
const hasIconSlot = computed(() => {
return !!slots.icon
})

View File

@ -4,10 +4,10 @@
<slot></slot>
</div>
<div class="mt-2">
<label class="font-medium">{{ title }}</label>
<BaseLabel >{{ title }}</BaseLabel>
</div>
<div class="mt-2">
<label class="text-gray-500">
<label class="text-gray-500 dark:text-gray-400">
{{ description }}
</label>
</div>

View File

@ -20,6 +20,7 @@
hover:text-gray-700
top-2.5
right-3.5
dark:text-gray-300
"
@click="$emit('clear')"
>

View File

@ -3,18 +3,15 @@
<BaseContentPlaceholders v-if="contentLoading">
<BaseContentPlaceholdersText :lines="1" :class="contentLoadClass" />
</BaseContentPlaceholders>
<label
<BaseLabel
v-else-if="label"
:class="labelClasses"
class="
flex
text-sm
not-italic
items-center
font-medium
text-gray-800
whitespace-nowrap
justify-between
!flex
!items-center
!text-gray-800
!whitespace-nowrap
!justify-between
"
>
<div>
@ -28,10 +25,10 @@
name="InformationCircleIcon"
class="h-4 text-gray-400 cursor-pointer hover:text-gray-600"
/>
</label>
</BaseLabel>
<div :class="inputContainerClasses">
<slot></slot>
<span v-if="helpText" class="text-gray-500 text-xs mt-1 font-light">
<span v-if="helpText" class="text-gray-500 text-xs mt-1 font-light dark:text-gray-400">
{{ helpText }}
</span>
<span v-if="error" class="block mt-0.5 text-sm text-red-500">

View File

@ -1,5 +1,5 @@
<template>
<label class="text-sm not-italic font-medium leading-5 text-primary-800">
<label class="text-sm not-italic font-medium leading-5 text-primary-800 dark:!text-gray-300">
<slot />
</label>
</template>