TheCloneArmy/crater
1
0
Fork 1
mirror of https://github.com/crater-invoice/crater.git synced 2025-10-27 11:41:09 -04:00
Code Issues Packages Projects Releases Wiki Activity

add dark mode in base dialog component

Browse Source
This commit is contained in:
yashkanakiya
2023-03-23 15:07:13 +05:30
parent 15f3f566e3
commit 7599681050
1 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
resources/scripts/components/base/BaseDialog.vue
View File

@ -30,8 +30,13 @@
leave-to="opacity-0" leave-to="opacity-0"
> >
<DialogOverlay <DialogOverlay
class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" 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"
/> />
</DialogOverlay>
</TransitionChild> </TransitionChild>
<!-- This element is to trick the browser into centering the modal contents. --> <!-- This element is to trick the browser into centering the modal contents. -->
@ -64,6 +69,11 @@
shadow-xl shadow-xl
sm:my-8 sm:align-middle sm:w-full sm:p-6 sm:my-8 sm:align-middle sm:w-full sm:p-6
relative relative
dark:backdrop-blur-xl
dark:shadow-glass
dark:border
dark:border-white/10
dark:bg-gray-800
" "
:class="dialogSizeClasses" :class="dialogSizeClasses"
> >
@ -80,31 +90,31 @@
rounded-full rounded-full
" "
:class="{ :class="{
'bg-green-100': dialogStore.variant === 'primary', 'bg-green-100 dark:bg-primary-500': dialogStore.variant === 'primary',
'bg-red-100': dialogStore.variant === 'danger', 'bg-red-100 dark:bg-red-500': dialogStore.variant === 'danger',
}" }"
> >
<BaseIcon <BaseIcon
v-if="dialogStore.variant === 'primary'" v-if="dialogStore.variant === 'primary'"
name="CheckIcon" name="CheckIcon"
class="w-6 h-6 text-green-600" class="w-6 h-6 text-green-600 dark:text-white"
/> />
<BaseIcon <BaseIcon
v-else v-else
name="ExclamationIcon" name="ExclamationIcon"
class="w-6 h-6 text-red-600" class="w-6 h-6 text-red-600 dark:text-white"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
<div class="mt-3 text-center sm:mt-5"> <div class="mt-3 text-center sm:mt-5">
<DialogTitle <DialogTitle
as="h3" as="h3"
class="text-lg font-medium leading-6 text-gray-900" class="text-lg font-medium leading-6 text-gray-900 dark:text-white"
> >
{{ dialogStore.title }} {{ dialogStore.title }}
</DialogTitle> </DialogTitle>
<div class="mt-2"> <div class="mt-2">
<p class="text-sm text-gray-500"> <p class="text-sm text-gray-500 dark:text-gray-400">
{{ dialogStore.message }} {{ dialogStore.message }}
</p> </p>
</div> </div>