benny/wishlist-app
1
0
Fork 0
mirror of https://github.com/ThisIsBenny/wishlist-app.git synced 2025-04-19 15:27:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix dark mode for modal

Browse source 
Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>
This commit is contained in:
Benny Samir Hierl 2022-02-09 21:05:57 +01:00
parent 8c48debc06
commit b7c1caebd7
1 changed files with 6 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/Modal.vue
View file

@ -15,32 +15,29 @@ const modal = useModal()
<div <div
class="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0" class="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0"
> >
<div class="fixed inset-0 bg-gray-500/75 transition-opacity"></div> <div class="fixed inset-0 bg-stone-700/75 transition-opacity"></div>
<span class="hidden sm:inline-block sm:h-screen sm:align-middle" <span class="hidden sm:inline-block sm:h-screen sm:align-middle"
>&#8203;</span >&#8203;</span
> >
<div <div
class="inline-block transform overflow-hidden rounded-lg bg-white text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:align-middle" class="inline-block transform overflow-hidden rounded-lg bg-white text-left align-bottom shadow-xl transition-all dark:bg-stone-900 sm:my-8 sm:w-full sm:max-w-lg sm:align-middle"
> >
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start"> <div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 <h3 class="text-lg font-medium leading-6" data-test="modal-title">
class="text-lg font-medium leading-6 text-gray-900"
data-test="modal-title"
>
{{ modal.title }} {{ modal.title }}
</h3> </h3>
<div class="mt-2"> <div class="mt-2">
<p class="text-sm text-gray-500" data-test="modal-body"> <p class="text-sm opacity-60" data-test="modal-body">
{{ modal.body }} {{ modal.body }}
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex flex-row bg-gray-50 px-4 py-3 sm:px-6"> <div class="flex flex-row px-4 py-3 sm:px-6">
<BaseButton <BaseButton
class="w-full" class="w-full"
@click="modal.confirm" @click="modal.confirm"