From b7c1caebd749d7d1ccd725f1045e68d74d746185 Mon Sep 17 00:00:00 2001
From: Benny Samir Hierl <bennysamir@posteo.de>
Date: Wed, 9 Feb 2022 21:05:57 +0100
Subject: [PATCH] fix dark mode for modal

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>
---
 src/components/Modal.vue | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 564cdda..80b820f 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -15,32 +15,29 @@ const modal = useModal()
     <div
       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"
         >&#8203;</span
       >
       <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="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-              <h3
-                class="text-lg font-medium leading-6 text-gray-900"
-                data-test="modal-title"
-              >
+              <h3 class="text-lg font-medium leading-6" data-test="modal-title">
                 {{ modal.title }}
               </h3>
               <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 }}
                 </p>
               </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
             class="w-full"
             @click="modal.confirm"