mirror of
https://github.com/crater-invoice/crater.git
synced 2025-11-03 14:03:18 -05:00
Compare commits
1 Commits
dark-globa
...
dark-base-
| Author | SHA1 | Date | |
|---|---|---|---|
| 3e6957ac6d |
@ -41,11 +41,6 @@
|
||||
w-[300px]
|
||||
h-[200px]
|
||||
right-0
|
||||
dark:border-white/10
|
||||
dark:text-white
|
||||
dark:bg-gray-800/[.95]
|
||||
dark:shadow-glass
|
||||
dark:backdrop-blur-xl
|
||||
"
|
||||
>
|
||||
<div
|
||||
@ -73,7 +68,7 @@
|
||||
<div
|
||||
v-for="(customer, index) in usersStore.customerList"
|
||||
:key="index"
|
||||
class="p-2 hover:bg-gray-100 cursor-pointer rounded-md dark:hover:bg-gray-700/40"
|
||||
class="p-2 hover:bg-gray-100 cursor-pointer rounded-md"
|
||||
>
|
||||
<router-link
|
||||
:to="{ path: `/admin/customers/${customer.id}/view` }"
|
||||
@ -92,7 +87,6 @@
|
||||
bg-gray-200
|
||||
rounded-full
|
||||
text-primary-500
|
||||
dark:bg-gray-600
|
||||
"
|
||||
>
|
||||
{{ initGenerator(customer.name) }}
|
||||
@ -122,7 +116,7 @@
|
||||
<div
|
||||
v-for="(user, index) in usersStore.userList"
|
||||
:key="index"
|
||||
class="p-2 hover:bg-gray-100 cursor-pointer rounded-md dark:hover:bg-gray-700/40"
|
||||
class="p-2 hover:bg-gray-100 cursor-pointer rounded-md"
|
||||
>
|
||||
<router-link
|
||||
:to="{ path: `/admin/users/${user.id}/edit` }"
|
||||
@ -141,7 +135,6 @@
|
||||
bg-gray-200
|
||||
rounded-full
|
||||
text-primary-500
|
||||
dark:bg-gray-600
|
||||
"
|
||||
>
|
||||
{{ initGenerator(user.name) }}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -30,13 +30,8 @@
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<DialogOverlay
|
||||
class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75 dark:backdrop-blur-xl dark:bg-gray-900/80"
|
||||
>
|
||||
<BaseDarkHighlight
|
||||
class="!bg-highlight/[.17] !top-1/2 h-60 -translate-y-1/2 mt-5"
|
||||
:class="dialogSizeClasses"
|
||||
class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
|
||||
/>
|
||||
</DialogOverlay>
|
||||
</TransitionChild>
|
||||
|
||||
<!-- This element is to trick the browser into centering the modal contents. -->
|
||||
@ -69,11 +64,6 @@
|
||||
shadow-xl
|
||||
sm:my-8 sm:align-middle sm:w-full sm:p-6
|
||||
relative
|
||||
dark:backdrop-blur-xl
|
||||
dark:shadow-glass
|
||||
dark:border
|
||||
dark:border-white/10
|
||||
dark:bg-gray-800
|
||||
"
|
||||
:class="dialogSizeClasses"
|
||||
>
|
||||
@ -90,31 +80,31 @@
|
||||
rounded-full
|
||||
"
|
||||
:class="{
|
||||
'bg-green-100 dark:bg-primary-500': dialogStore.variant === 'primary',
|
||||
'bg-red-100 dark:bg-red-500': dialogStore.variant === 'danger',
|
||||
'bg-green-100': dialogStore.variant === 'primary',
|
||||
'bg-red-100': dialogStore.variant === 'danger',
|
||||
}"
|
||||
>
|
||||
<BaseIcon
|
||||
v-if="dialogStore.variant === 'primary'"
|
||||
name="CheckIcon"
|
||||
class="w-6 h-6 text-green-600 dark:text-white"
|
||||
class="w-6 h-6 text-green-600"
|
||||
/>
|
||||
<BaseIcon
|
||||
v-else
|
||||
name="ExclamationIcon"
|
||||
class="w-6 h-6 text-red-600 dark:text-white"
|
||||
class="w-6 h-6 text-red-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-3 text-center sm:mt-5">
|
||||
<DialogTitle
|
||||
as="h3"
|
||||
class="text-lg font-medium leading-6 text-gray-900 dark:text-white"
|
||||
class="text-lg font-medium leading-6 text-gray-900"
|
||||
>
|
||||
{{ dialogStore.title }}
|
||||
</DialogTitle>
|
||||
<div class="mt-2">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
<p class="text-sm text-gray-500">
|
||||
{{ dialogStore.message }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -18,17 +18,17 @@ const props = defineProps({
|
||||
const badgeColorClasses = computed(() => {
|
||||
switch (props.status) {
|
||||
case 'DRAFT':
|
||||
return 'bg-yellow-300 bg-opacity-25 px-2 py-1 text-sm text-yellow-800 uppercase font-normal text-center '
|
||||
return 'bg-yellow-300 bg-opacity-25 px-2 py-1 text-sm text-yellow-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
|
||||
case 'SENT':
|
||||
return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center '
|
||||
return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-200 dark:text-yellow-200'
|
||||
case 'VIEWED':
|
||||
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center'
|
||||
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
|
||||
case 'EXPIRED':
|
||||
return 'bg-red-300 bg-opacity-25 px-2 py-1 text-sm text-red-800 uppercase font-normal text-center'
|
||||
return 'bg-red-300 bg-opacity-25 px-2 py-1 text-sm text-red-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-red-500 dark:text-red-500'
|
||||
case 'ACCEPTED':
|
||||
return 'bg-green-400 bg-opacity-25 px-2 py-1 text-sm text-green-800 uppercase font-normal text-center'
|
||||
return 'bg-green-400 bg-opacity-25 px-2 py-1 text-sm text-green-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
|
||||
case 'REJECTED':
|
||||
return 'bg-purple-300 bg-opacity-25 px-2 py-1 text-sm text-purple-800 uppercase font-normal text-center'
|
||||
return 'bg-purple-300 bg-opacity-25 px-2 py-1 text-sm text-purple-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-purple-400 dark:text-purple-400'
|
||||
default:
|
||||
return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm text-gray-900 uppercase font-normal text-center'
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<div v-show="show" class="relative z-10 p-4 md:p-8 bg-gray-200 rounded dark:bg-gray-800">
|
||||
<div v-show="show" class="relative z-10 p-4 md:p-8 bg-gray-200 rounded">
|
||||
<slot name="filter-header" />
|
||||
|
||||
<label
|
||||
@ -20,7 +20,6 @@
|
||||
hover:text-gray-700
|
||||
top-2.5
|
||||
right-3.5
|
||||
dark:text-gray-300
|
||||
"
|
||||
@click="$emit('clear')"
|
||||
>
|
||||
|
||||
@ -20,25 +20,25 @@ export default {
|
||||
const badgeColorClasses = computed(() => {
|
||||
switch (props.status) {
|
||||
case 'DRAFT':
|
||||
return 'bg-yellow-300 bg-opacity-25 px-2 py-1 text-sm text-yellow-800 uppercase font-normal text-center'
|
||||
return 'bg-yellow-300 bg-opacity-25 px-2 py-1 text-sm text-yellow-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
|
||||
case 'SENT':
|
||||
return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center '
|
||||
return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-lime-200 dark:text-yellow-200'
|
||||
case 'VIEWED':
|
||||
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center'
|
||||
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
|
||||
case 'COMPLETED':
|
||||
return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm text-green-900 uppercase font-normal text-center'
|
||||
return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm text-green-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
|
||||
case 'DUE':
|
||||
return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center'
|
||||
return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
|
||||
case 'OVERDUE':
|
||||
return 'bg-red-300 bg-opacity-50 px-2 py-1 text-sm text-red-900 uppercase font-normal text-center'
|
||||
return 'bg-red-300 bg-opacity-50 px-2 py-1 text-sm text-red-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-red-500 dark:text-red-500'
|
||||
case 'UNPAID':
|
||||
return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center'
|
||||
return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
|
||||
case 'PARTIALLY_PAID':
|
||||
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center'
|
||||
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
|
||||
case 'PAID':
|
||||
return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm text-green-900 uppercase font-normal text-center'
|
||||
return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm text-green-900 uppercase font-normal text-center text-center dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
|
||||
default:
|
||||
return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm text-gray-900 uppercase font-normal text-center'
|
||||
return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm text-gray-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-gray-502 dark:text-gray-200'
|
||||
}
|
||||
})
|
||||
return { badgeColorClasses }
|
||||
|
||||
@ -24,15 +24,15 @@ export default {
|
||||
const badgeColorClasses = computed(() => {
|
||||
switch (props.status) {
|
||||
case 'PAID':
|
||||
return 'bg-primary-300 bg-opacity-25 text-primary-800 uppercase font-normal text-center'
|
||||
return 'bg-primary-300 bg-opacity-25 text-primary-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-indigo-400 dark:text-indigo-400'
|
||||
case 'UNPAID':
|
||||
return ' bg-yellow-500 bg-opacity-25 text-yellow-900 uppercase font-normal text-center '
|
||||
return ' bg-yellow-500 bg-opacity-25 text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-orange-300 dark:text-orange-300'
|
||||
case 'PARTIALLY_PAID':
|
||||
return 'bg-blue-400 bg-opacity-25 text-blue-900 uppercase font-normal text-center'
|
||||
return 'bg-blue-400 bg-opacity-25 text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
|
||||
case 'OVERDUE':
|
||||
return 'bg-red-300 bg-opacity-50 px-2 py-1 text-sm text-red-900 uppercase font-normal text-center'
|
||||
default:
|
||||
return 'bg-gray-500 bg-opacity-25 text-gray-900 uppercase font-normal text-center'
|
||||
return 'bg-gray-500 bg-opacity-25 text-gray-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-gray-300 dark:text-gray-300'
|
||||
}
|
||||
})
|
||||
return { badgeColorClasses }
|
||||
|
||||
@ -20,13 +20,13 @@ export default {
|
||||
const badgeColorClasses = computed(() => {
|
||||
switch (props.status) {
|
||||
case 'COMPLETED':
|
||||
return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm text-green-900 uppercase font-normal text-center'
|
||||
return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm text-green-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-green-500 dark:text-green-500'
|
||||
case 'ON_HOLD':
|
||||
return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center'
|
||||
return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
|
||||
case 'ACTIVE':
|
||||
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center'
|
||||
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-400 dark:text-blue-400'
|
||||
default:
|
||||
return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm text-gray-900 uppercase font-normal text-center'
|
||||
return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm text-gray-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-gray-500 dark:text-gray-500'
|
||||
}
|
||||
})
|
||||
return { badgeColorClasses }
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
<Switch
|
||||
v-model="enabled"
|
||||
:class="enabled ? 'bg-primary-500' : 'bg-gray-300 dark:bg-gray-900'"
|
||||
:class="enabled ? 'bg-primary-500' : 'bg-gray-300'"
|
||||
class="
|
||||
relative
|
||||
inline-flex
|
||||
@ -21,11 +21,7 @@
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<span
|
||||
:class="
|
||||
enabled
|
||||
? 'translate-x-6 dark:bg-white'
|
||||
: 'translate-x-1 dark:bg-gray-500'
|
||||
"
|
||||
:class="enabled ? 'translate-x-6' : 'translate-x-1'"
|
||||
class="
|
||||
inline-block
|
||||
w-4
|
||||
|
||||
@ -5,12 +5,12 @@
|
||||
<div class="flex flex-col">
|
||||
<SwitchLabel
|
||||
as="p"
|
||||
class="p-0 mb-1 text-sm leading-snug text-black font-medium dark:text-white"
|
||||
class="p-0 mb-1 text-sm leading-snug text-black font-medium"
|
||||
passive
|
||||
>
|
||||
{{ title }}
|
||||
</SwitchLabel>
|
||||
<SwitchDescription class="text-sm text-gray-500 dark:text-gray-400">
|
||||
<SwitchDescription class="text-sm text-gray-500">
|
||||
{{ description }}
|
||||
</SwitchDescription>
|
||||
</div>
|
||||
@ -18,7 +18,7 @@
|
||||
:disabled="disabled"
|
||||
:model-value="modelValue"
|
||||
:class="[
|
||||
modelValue ? 'bg-primary-500' : 'bg-gray-200 dark:bg-gray-900',
|
||||
modelValue ? 'bg-primary-500' : 'bg-gray-200',
|
||||
'ml-4 relative inline-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',
|
||||
]"
|
||||
@update:modelValue="onUpdate"
|
||||
@ -26,7 +26,7 @@
|
||||
<span
|
||||
aria-hidden="true"
|
||||
:class="[
|
||||
modelValue ? 'translate-x-5 dark:bg-white' : 'translate-x-0 dark:bg-gray-500',
|
||||
modelValue ? 'translate-x-5' : 'translate-x-0',
|
||||
'inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200',
|
||||
]"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user