From c543f4f717bbb4aa8b9a68f017d5367c8905487c Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Tue, 8 Dec 2020 14:30:56 -0700
Subject: [PATCH] Get the Modal animation component functioning properly

---
 web/src/components/Modal.vue | 23 +++++++++++++++++++----
 web/src/css/theme.css        |  2 +-
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/web/src/components/Modal.vue b/web/src/components/Modal.vue
index 4217b42..95d6ff5 100644
--- a/web/src/components/Modal.vue
+++ b/web/src/components/Modal.vue
@@ -5,7 +5,7 @@
 			class="modal-container"
 			@click.self.stop="content = false"
 		>
-			<transition name="burst" @after-leave="$emit('close')">
+			<transition name="burst" @after-leave="$emit('closed')">
 				<div v-if="content" class="modal">
 					<slot />
 				</div>
@@ -30,16 +30,31 @@ export default {
 </script>
 
 <style>
-@import "css/theme.css";
-@import "css/style.css";
-@import "css/transitions.css";
+@import "../css/theme.css";
+@import "../css/style.css";
+@import "../css/transitions.css";
 
 .modal-container {
 	background-color: var(--modal-background-blur);
+	justify-content: center;
+	align-items: center;
+	position: fixed;
+	display: flex;
+	height: 100vh;
+	width: 100vw;
+	z-index: 10;
+	left: 0;
+	top: 0;
 }
 
 .modal {
 	background-color: var(--modal-content-background);
 	color: var(--modal-content-text);
+	border-radius: 20px;
+	overflow-y: auto;
+	max-height: 75%;
+	padding: 15px;
+	z-index: 11;
+	width: 40%
 }
 </style>
\ No newline at end of file
diff --git a/web/src/css/theme.css b/web/src/css/theme.css
index 87b9f49..f151acd 100644
--- a/web/src/css/theme.css
+++ b/web/src/css/theme.css
@@ -49,7 +49,7 @@
 	--eye-colour: #000000;
 
 	/* The colours for the modals */
-	--modal-background-blur: #000;
+	--modal-background-blur: #000000a6;
 	--modal-content-background: var(--background1);
 	--modal-content-text: var(--background1-text);