mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-27 11:41:09 -04:00
fix sidebar and table data link in dark mode color (#1259)
* fix sidebar and table data link in dark mode color * add dark mode toggle in installation step
This commit is contained in:
@ -93,7 +93,7 @@
|
||||
:name="item.icon"
|
||||
:class="[
|
||||
hasActiveUrl(item.link)
|
||||
? 'text-primary-500 '
|
||||
? 'text-primary-500 dark:text-primary-400'
|
||||
: 'text-gray-400',
|
||||
'mr-4 shrink-0 h-5 w-5',
|
||||
]"
|
||||
@ -149,7 +149,7 @@
|
||||
:name="item.icon"
|
||||
:class="[
|
||||
hasActiveUrl(item.link)
|
||||
? 'text-primary-500 group-hover:text-primary-500 dark:text-primary-400 dark:group-hover:text-primary-500 '
|
||||
? 'text-primary-500 dark:text-primary-400'
|
||||
: 'text-gray-400 group-hover:text-black dark:text-gray-400 dark:group-hover:text-white',
|
||||
'mr-4 shrink-0 h-5 w-5 ',
|
||||
]"
|
||||
|
||||
@ -154,7 +154,7 @@
|
||||
:text="row.data.name"
|
||||
:length="30"
|
||||
tag="span"
|
||||
class="font-medium text-primary-500 flex flex-col"
|
||||
class="font-medium text-primary-500 flex flex-col dark:text-primary-400"
|
||||
/>
|
||||
<BaseText
|
||||
:text="row.data.contact_name ? row.data.contact_name : ''"
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
<template #cell-user="{ row }">
|
||||
<router-link
|
||||
:to="{ path: `invoices/${row.data.id}/view` }"
|
||||
class="font-medium text-primary-500"
|
||||
class="font-medium text-primary-500 dark:text-primary-400"
|
||||
>
|
||||
{{ row.data.customer.name }}
|
||||
</router-link>
|
||||
@ -78,7 +78,7 @@
|
||||
<template #cell-user="{ row }">
|
||||
<router-link
|
||||
:to="{ path: `estimates/${row.data.id}/view` }"
|
||||
class="font-medium text-primary-500"
|
||||
class="font-medium text-primary-500 dark:text-primary-400"
|
||||
>
|
||||
{{ row.data.customer.name }}
|
||||
</router-link>
|
||||
|
||||
@ -205,7 +205,7 @@
|
||||
<template #cell-estimate_number="{ row }">
|
||||
<router-link
|
||||
:to="{ path: `estimates/${row.data.id}/view` }"
|
||||
class="font-medium text-primary-500"
|
||||
class="font-medium text-primary-500 dark:text-primary-400"
|
||||
>
|
||||
{{ row.data.estimate_number }}
|
||||
</router-link>
|
||||
|
||||
@ -171,7 +171,7 @@
|
||||
<template #cell-name="{ row }">
|
||||
<router-link
|
||||
:to="{ path: `expenses/${row.data.id}/edit` }"
|
||||
class="font-medium text-primary-500"
|
||||
class="font-medium text-primary-500 dark:text-primary-400"
|
||||
>
|
||||
{{ row.data.expense_category.name }}
|
||||
</router-link>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="flex flex-col items-center justify-between w-full pt-10">
|
||||
<LightDarkButton class="absolute z-10 top-2 right-2"/>
|
||||
<img
|
||||
id="logo-crater"
|
||||
src="/img/crater-logo.png"
|
||||
@ -29,6 +30,7 @@ import Step7CompanyInfo from './Step7CompanyInfo.vue'
|
||||
import Step8CompanyPreferences from './Step8CompanyPreferences.vue'
|
||||
import { useInstallationStore } from '@/scripts/admin/stores/installation'
|
||||
import { useRouter } from 'vue-router'
|
||||
import LightDarkButton from '@/scripts/components/LightDarkButton.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -40,6 +42,7 @@ export default {
|
||||
step_6: Step6AccountSettings,
|
||||
step_7: Step7CompanyInfo,
|
||||
step_8: Step8CompanyPreferences,
|
||||
LightDarkButton
|
||||
},
|
||||
|
||||
setup() {
|
||||
|
||||
@ -220,7 +220,7 @@
|
||||
<template #cell-invoice_number="{ row }">
|
||||
<router-link
|
||||
:to="{ path: `invoices/${row.data.id}/view` }"
|
||||
class="font-medium text-primary-500"
|
||||
class="font-medium text-primary-500 dark:text-primary-400"
|
||||
>
|
||||
{{ row.data.invoice_number }}
|
||||
</router-link>
|
||||
|
||||
@ -153,7 +153,7 @@
|
||||
<template #cell-name="{ row }">
|
||||
<router-link
|
||||
:to="{ path: `items/${row.data.id}/edit` }"
|
||||
class="font-medium text-primary-500"
|
||||
class="font-medium text-primary-500 dark:text-primary-400"
|
||||
>
|
||||
{{ row.data.name }}
|
||||
</router-link>
|
||||
|
||||
@ -158,7 +158,7 @@
|
||||
<template #cell-payment_number="{ row }">
|
||||
<router-link
|
||||
:to="{ path: `payments/${row.data.id}/view` }"
|
||||
class="font-medium text-primary-500"
|
||||
class="font-medium text-primary-500 dark:text-primary-400"
|
||||
>
|
||||
{{ row.data.payment_number }}
|
||||
</router-link>
|
||||
|
||||
@ -204,7 +204,7 @@
|
||||
:text="row.data.customer.name"
|
||||
:length="30"
|
||||
tag="span"
|
||||
class="font-medium text-primary-500 flex flex-col"
|
||||
class="font-medium text-primary-500 flex flex-col dark:text-primary-400"
|
||||
/>
|
||||
|
||||
<BaseText
|
||||
|
||||
@ -158,7 +158,7 @@
|
||||
<template #cell-name="{ row }">
|
||||
<router-link
|
||||
:to="{ path: `users/${row.data.id}/edit` }"
|
||||
class="font-medium text-primary-500"
|
||||
class="font-medium text-primary-500 dark:text-primary-400"
|
||||
>
|
||||
{{ row.data.name }}
|
||||
</router-link>
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
"
|
||||
@click="onChange"
|
||||
>
|
||||
<BaseIcon v-if="!globalStore.isDarkModeOn" class="h-5 w-5 text-black" name="SunIcon" />
|
||||
<BaseIcon v-if="!globalStore.isDarkModeOn" class="h-5 w-5 text-yellow-500" name="SunIcon" />
|
||||
<BaseIcon v-else class="h-5 w-5 text-white" name="MoonIcon" />
|
||||
</button>
|
||||
</template>
|
||||
@ -45,7 +45,7 @@
|
||||
</div>
|
||||
<div class="hidden sm:ml-6 sm:flex sm:items-center">
|
||||
<!-- Dark mode Toggle -->
|
||||
<CustomerLightDarkButton/>
|
||||
<LightDarkButton/>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
|
||||
@ -151,7 +151,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dark mode Toggle -->
|
||||
<CustomerLightDarkButton/>
|
||||
<LightDarkButton/>
|
||||
</div>
|
||||
<div class="mt-3 space-y-1">
|
||||
<router-link
|
||||
@ -178,7 +178,7 @@ 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 LightDarkButton from '@/scripts/components/LightDarkButton.vue'
|
||||
import {
|
||||
Disclosure,
|
||||
DisclosureButton,
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
:to="{
|
||||
path: `/${globalStore.companySlug}/customer/invoices/${row.data.id}/view`,
|
||||
}"
|
||||
class="font-medium text-primary-500"
|
||||
class="font-medium text-primary-500 dark:text-primary-400"
|
||||
>
|
||||
{{ row.data.invoice_number }}
|
||||
</router-link>
|
||||
@ -73,7 +73,7 @@
|
||||
:to="{
|
||||
path: `/${globalStore.companySlug}/customer/estimates/${row.data.id}/view`,
|
||||
}"
|
||||
class="font-medium text-primary-500"
|
||||
class="font-medium text-primary-500 dark:text-primary-400"
|
||||
>
|
||||
{{ row.data.estimate_number }}
|
||||
</router-link>
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
<template #cell-estimate_number="{ row }">
|
||||
<router-link
|
||||
:to="{ path: `estimates/${row.data.id}/view` }"
|
||||
class="font-medium text-primary-500"
|
||||
class="font-medium text-primary-500 dark:text-primary-400"
|
||||
>
|
||||
{{ row.data.estimate_number }}
|
||||
</router-link>
|
||||
|
||||
@ -95,7 +95,7 @@
|
||||
<template #cell-invoice_number="{ row }">
|
||||
<router-link
|
||||
:to="{ path: `invoices/${row.data.id}/view` }"
|
||||
class="font-medium text-primary-500"
|
||||
class="font-medium text-primary-500 dark:text-primary-400"
|
||||
>
|
||||
{{ row.data.invoice_number }}
|
||||
</router-link>
|
||||
|
||||
@ -78,7 +78,7 @@
|
||||
:to="{
|
||||
path: `payments/${row.data.id}/view`,
|
||||
}"
|
||||
class="font-medium text-primary-500"
|
||||
class="font-medium text-primary-500 dark:text-primary-400"
|
||||
>
|
||||
{{ row.data.payment_number }}
|
||||
</router-link>
|
||||
|
||||
Reference in New Issue
Block a user