From 77e1a1d4073669498ec7a1eb0a97d8a0cc5e538d Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Sun, 29 Mar 2020 14:40:18 -0700
Subject: [PATCH] Click on overly to close modal

---
 src/components/MailTable.vue | 4 ++--
 src/components/ModalView.vue | 9 +++++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/MailTable.vue b/src/components/MailTable.vue
index b679d2e..b23ee3c 100644
--- a/src/components/MailTable.vue
+++ b/src/components/MailTable.vue
@@ -18,8 +18,8 @@
     </tbody>
   </table>
 
-  <ModalView v-if="openedEmail">
-    <MailView :email="openedEmail" />
+  <ModalView v-if="openedEmail" :closeModal="() => { openedEmail = null; }">
+    <MailView v-if="openedEmail" :email="openedEmail" />
   </ModalView>
 </template>
 
diff --git a/src/components/ModalView.vue b/src/components/ModalView.vue
index e9978e3..1543522 100644
--- a/src/components/ModalView.vue
+++ b/src/components/ModalView.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="modal">
-    <div class="overlay"></div>
+    <div class="overlay" @click="closeModal"></div>
     <div class="modal-card">
       <slot />
     </div>
@@ -9,7 +9,12 @@
 
 <script>
   export default {
-    
+    props: {
+      closeModal: {
+        type: Function,
+        required: true
+      }
+    }
   }
 </script>