From 9684f7588620cb63567a648df91e88b9908d088d Mon Sep 17 00:00:00 2001
From: Chris Kankiewicz <Chris@ChrisKankiewicz.com>
Date: Sun, 22 Dec 2019 23:46:29 -0700
Subject: [PATCH] Updated dark theme file info modal styles

---
 .../default/src/js/components/file-info-modal.vue  | 14 +++++++-------
 app/themes/default/src/sass/dark-mode.scss         | 13 +++++++++++++
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/app/themes/default/src/js/components/file-info-modal.vue b/app/themes/default/src/js/components/file-info-modal.vue
index 8e14fea..a363367 100644
--- a/app/themes/default/src/js/components/file-info-modal.vue
+++ b/app/themes/default/src/js/components/file-info-modal.vue
@@ -1,12 +1,12 @@
 <template>
-    <div
+    <div id="file-info-modal"
         class="fixed top-0 flex justify-center items-center w-screen h-screen p-4 z-50"
-        style="background-color: hsla(218, 23%, 23%, .5)"
+        style="background-color: hsla(218, 23%, 23%, 0.5)"
         v-bind:class="this.styles"
         v-on:click.self="hide()"
     >
-        <div class="bg-white rounded-lg shadow-lg overflow-hidden" v-show="! loading">
-            <div class="flex justify-between items-center bg-blue-600 p-4">
+        <div id="file-info-dialogue" class="bg-white rounded-lg shadow-lg overflow-hidden" v-show="! loading">
+            <header class="flex justify-between items-center bg-blue-600 p-4">
                 <i class="fas fa-info-circle fa-lg text-white"></i>
 
                 <div class="items-center text-xl text-white font-mono mx-4">
@@ -19,9 +19,9 @@
                 >
                     <i class="fas fa-times"></i>
                 </button>
-            </div>
+            </header>
 
-            <div class="flex justify-center items-center p-4">
+            <content class="flex justify-center items-center p-4">
                 <div class="overflow-x-auto">
                     <table class="table-auto">
                         <tbody>
@@ -32,7 +32,7 @@
                         </tbody>
                     </table>
                 </div>
-            </div>
+            </content>
         </div>
 
         <i class="fas fa-spinner fa-pulse fa-5x text-white" v-show="loading"></i>
diff --git a/app/themes/default/src/sass/dark-mode.scss b/app/themes/default/src/sass/dark-mode.scss
index 4210986..51cc85e 100644
--- a/app/themes/default/src/sass/dark-mode.scss
+++ b/app/themes/default/src/sass/dark-mode.scss
@@ -27,4 +27,17 @@
     #scroll-to-top {
         @apply bg-purple-700;
     }
+
+    #file-info-modal {
+        background-color: hsla(218, 23%, 33%, 0.5) !important;
+
+        #file-info-dialogue {
+            @apply bg-gray-800;
+            @apply text-white;
+
+            header {
+                @apply bg-purple-700;
+            }
+        }
+    }
 }