From 65392258b4599a68f4852d9cbf2c6bc9facff2f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Luis=20Pereira?= <pepelui@outlook.com>
Date: Tue, 9 Aug 2022 12:18:33 -0300
Subject: [PATCH] Update image viewer for light theme

---
 src/components/ImageViewer/ImageToolbar.vue       | 2 +-
 src/components/ImageViewer/ImageViewer.global.vue | 9 +++++----
 src/components/ImageViewer/ImageViewerCounter.vue | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/ImageViewer/ImageToolbar.vue b/src/components/ImageViewer/ImageToolbar.vue
index 6222b4c..474b484 100644
--- a/src/components/ImageViewer/ImageToolbar.vue
+++ b/src/components/ImageViewer/ImageToolbar.vue
@@ -5,7 +5,7 @@
     </div>
     <button
       type="button"
-      class="p-2 cursor-pointer text-white opacity-50 "
+      class="p-2 cursor-pointer text-black dark:text-white opacity-50"
     >
       <IconClose />
     </button>
diff --git a/src/components/ImageViewer/ImageViewer.global.vue b/src/components/ImageViewer/ImageViewer.global.vue
index 5a3c440..dd385c7 100644
--- a/src/components/ImageViewer/ImageViewer.global.vue
+++ b/src/components/ImageViewer/ImageViewer.global.vue
@@ -1,13 +1,13 @@
 <template>
   <div 
-    class="fixed z-[10000] h-full bg-opacity-90 bg-black overflow-y-hidden overflow-x-hidden w-full top-0 left-0 flex flex-col items-center justify-center backdrop-blur-md"
+    class="fixed z-[10000] h-full bg-white overflow-y-hidden overflow-x-hidden w-full top-0 left-0 flex flex-col items-center justify-center backdrop-blur-md dark:bg-black"
     @click="emit('close')"
   >
     <div 
       class="min-w-96 dark:bg-slate-900 rounded-lg shadow-sm mb-24"
       @click.stop
     >
-      <div class="absolute rounded-t-lg w-auto max-h-full h-auto top-12 bottom-40 left-0 right-0 flex justify-center align-middle">
+      <div class="absolute rounded-t-lg w-auto max-h-full h-auto top-12 bottom-44 left-0 right-0 flex justify-center align-middle">
         <VSpinner v-if="isLoading" />
         <img
           ref="imageElement"
@@ -31,7 +31,8 @@
     <div class="bottom-0 fixed max-w-full w-full">
       <div 
         class="
-        text-white
+        text-black
+        dark:text-white
         text-sm
         attributions
         p-6
@@ -40,7 +41,7 @@
         justify-between
         flex-col
         text-center
-        [text-shadow:0_1px_5px_rgba(0,0,0,1)]
+        dark:[text-shadow:0_1px_5px_rgba(0,0,0,1)]
       "
       >
         <ImageDepictions
diff --git a/src/components/ImageViewer/ImageViewerCounter.vue b/src/components/ImageViewer/ImageViewerCounter.vue
index f94181c..0993413 100644
--- a/src/components/ImageViewer/ImageViewerCounter.vue
+++ b/src/components/ImageViewer/ImageViewerCounter.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="p-2 text-white opacity-50">{{ currentImage + 1 }}/{{ totalImages }}</span>
+  <span class="p-2 text-black dark:text-white opacity-50">{{ currentImage + 1 }}/{{ totalImages }}</span>
 </template>
 
 <script setup>