Skip to content

Commit

Permalink
Dark mode fix issue (#1211)
Browse files Browse the repository at this point in the history
* fix dark mode in item row and switch issue

* change class for create items title issue

* fix indentation and remove console log

---------

Co-authored-by: yogesh-gohil <yogeshgohil1611@gmail.com>
  • Loading branch information
yashkanakiya and yogesh-gohil committed Mar 31, 2023
1 parent ba76986 commit f4bc78c
Show file tree
Hide file tree
Showing 7 changed files with 109 additions and 56 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,22 @@
<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 "
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
"
@click="openTaxModal"
>
<BaseIcon name="CheckCircleIcon" class="h-5 text-primary-400" />
Expand All @@ -53,7 +68,7 @@
<BaseIcon
v-if="taxes.length && index !== taxes.length - 1"
name="TrashIcon"
class="h-5 text-gray-700 cursor-pointer"
class="h-5 text-gray-700 dark:text-red-400 cursor-pointer"
@click="removeTax(index)"
/>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,28 +15,66 @@
<thead
class="
bg-white
border border-gray-200 border-solid
border
border-gray-200
border-solid
dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70
"
>
"
>
<tr>
<th class="text-left" :class="theadClass">
<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="text-right" :class="theadClass">
<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="text-left" :class="theadClass">
<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>
Expand All @@ -45,9 +83,18 @@
</span>
</th>
<th
v-if="store[storeProp].discount_per_item_enabled"
class="text-left"
:class="theadClass"
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" />
Expand All @@ -56,7 +103,19 @@
{{ $t('invoices.item.discount') }}
</span>
</th>
<th class="text-right" :class="theadClass">
<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>
Expand Down Expand Up @@ -138,11 +197,6 @@ const props = defineProps({
type: String,
default: '',
},
theadClass: {
type: String,
default: `px-5 py-3 text-sm not-italic font-medium leading-5
text-gray-700 border-t border-b border-gray-200 border-solid dark:text-white dark:border-white/10`
},
})
const companyStore = useCompanyStore()
Expand Down
12 changes: 6 additions & 6 deletions resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -68,10 +68,8 @@
</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">
<MainLogo
class="block h-auto max-w-full w-36 text-primary-400"
alt="Crater Logo"
/>
<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"/>
</div>

<nav
Expand Down Expand Up @@ -167,8 +165,7 @@
</template>

<script setup>
import MainLogo from '@/scripts/components/icons/MainLogo.vue'
import { computed } from 'vue'
import {
Dialog,
DialogOverlay,
Expand All @@ -183,6 +180,9 @@ 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
}
Expand Down
3 changes: 1 addition & 2 deletions resources/scripts/admin/stores/global.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,7 @@ export const useGlobalStore = (useWindow = false) => {
isAppLoaded: false,
isSidebarOpen: false,
areCurrenciesLoading: false,
isDarkModeOn: false,

isDarkModeOn: localStorage.getItem('theme') === 'dark' || document.documentElement.classList.contains('dark'),
downloadReport: null,
}),

Expand Down
9 changes: 0 additions & 9 deletions resources/scripts/components/CustomerLightDarkButton.vue
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,6 @@ import { useGlobalStore } from '@/scripts/customer/stores/global'
const globalStore = useGlobalStore()
const enabled = computed(
()=>
localStorage.getItem('theme') === 'dark' ||
document.documentElement.classList.contains('dark')
)
globalStore.isDarkModeOn = enabled.value
function onChange() {
globalStore.isDarkModeOn = !globalStore.isDarkModeOn
Expand All @@ -43,7 +35,6 @@ function onChange() {
localStorage.theme = 'light'
document.documentElement.classList.remove('dark')
document.documentElement.style.setProperty('color-scheme', 'light')
}
}
</script>
Expand Down
36 changes: 15 additions & 21 deletions resources/scripts/components/LightDarkSwitcher.vue
Original file line number Diff line number Diff line change
Expand Up @@ -16,26 +16,21 @@ defineProps({
const globalStore = useGlobalStore()
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
}
}
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
},
})
</script>

<template>
Expand All @@ -49,7 +44,6 @@ function onChange(val) {
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
Expand Down
2 changes: 1 addition & 1 deletion resources/scripts/customer/stores/global.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const useGlobalStore = defineStore({
companySlug: '',
mainMenu: null,
enabledModules: [],
isDarkModeOn: false
isDarkModeOn: localStorage.getItem('theme') === 'dark' || document.documentElement.classList.contains('dark')
}),

actions: {
Expand Down

0 comments on commit f4bc78c

Please sign in to comment.