fix icon overlay issue in modal

Author: egbadon-victor

src/components/AppModal.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="overlay app-modal" @click.self="$emit('close')">
+    <div class="modal" role="dialog" aria-modal="true">
+      <header v-if="title" class="modal-header">
+        <h3>{{ title }}</h3>
+        <button aria-label="Close" class="close-button" @click="$emit('close')">
+          &times;
+        </button>
+      </header>
+
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppModal',
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>

src/components/ChooserModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <app-modal
+  <AppModal
     v-if="activeModal !== null"
     :title="$t(`help.${modals[activeModal]}.heading`)"
     @close="closeModal"
@@ -119,15 +119,17 @@
         v-html="$t(`help.${modals[activeModal]}.footer`)"
       />
     </section>
-  </app-modal>
+  </AppModal>
 </template>
 
 <script>
 import LicenseIcons from './LicenseIcons';
+import AppModal from './AppModal.vue';
 
 export default {
   name: 'ChooserModal',
   components: {
+    AppModal,
     LicenseIcons,
   },
   props: {