Modal report (#17)

* Base modal implementation

* Modal Report page

* Upgrade multiselect

* Fixed multiselect styling

* fix build err

* rev change

* Added dropdown component, addressed changes

Removed unused classes after vue multiselect was removed
Updated markdown-it and xss

* Update index.js

* fix lint

* Fix prettier code style

* Address most changes

* New dropdown

* Undo comment

Makes the component close when not focused

* Fix accessibility issues

* Fix double focus

* addressed changes to modal

* Run Prettier

* Update ModalReport.vue

* Fixed spacing issues

---------

Co-authored-by: Jai A <jaiagr+gpg@pm.me>

lib/components/base/Modal.vue

@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <div
+      :class="{
+        shown: shown,
+        noblur: noblur,
+      }"
+      class="modal-overlay"
+      @click="hide"
+    />
+    <div class="modal-body" :class="{ shown: shown }">
+      <div v-if="header" class="header">
+        <h1>{{ header }}</h1>
+        <button class="iconified-button icon-only transparent" @click="hide">
+          <XIcon />
+        </button>
+      </div>
+      <div class="content">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    header: {
+      type: String,
+      default: null,
+    },
+    noblur: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      shown: false,
+    }
+  },
+  methods: {
+    show() {
+      this.shown = true
+    },
+    hide() {
+      this.shown = false
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.modal-overlay {
+  visibility: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 20;
+
+  transition: all 0.3s ease-in-out;
+
+  &.shown {
+    opacity: 1;
+    visibility: visible;
+    background: hsla(0, 0%, 0%, 0.5);
+    backdrop-filter: blur(3px);
+  }
+
+  &.noblur {
+    backdrop-filter: none;
+  }
+}
+
+.modal-body {
+  position: fixed;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 21;
+  box-shadow: var(--shadow-raised), var(--shadow-inset);
+  border-radius: var(--radius-lg);
+  max-height: calc(100% - 2 * var(--gap-lg));
+  overflow-y: auto;
+  width: 600px;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: var(--color-bg);
+    padding: var(--gap-md) var(--gap-lg);
+
+    h1 {
+      font-size: 1.25rem;
+      color: var(--color-contrast);
+      font-weight: bolder;
+    }
+  }
+
+  .content {
+    background-color: var(--color-raised-bg);
+  }
+
+  top: calc(100% + 400px);
+  visibility: hidden;
+  opacity: 0;
+  transition: all 0.25s ease-in-out;
+
+  &.shown {
+    opacity: 1;
+    visibility: visible;
+    top: 50%;
+  }
+
+  @media screen and (max-width: 650px) {
+    width: calc(100% - 2 * var(--gap-lg));
+  }
+}
+</style>