From f94bff0858fb382ed7d5a75e22396da5682bda41 Mon Sep 17 00:00:00 2001
From: schwartz-concordium
 <132270889+schwartz-concordium@users.noreply.github.com>
Date: Sun, 19 Nov 2023 11:28:34 +0100
Subject: [PATCH 1/6] Initial modal

---
 frontend/src/components/Details/Message.vue   |  18 ++++
 frontend/src/components/Details/Modal.vue     | 101 ++++++++++++++++++
 .../components/icons/ArrowsPointingOut.vue    |  12 +++
 3 files changed, 131 insertions(+)
 create mode 100644 frontend/src/components/Details/Modal.vue
 create mode 100644 frontend/src/components/icons/ArrowsPointingOut.vue

diff --git a/frontend/src/components/Details/Message.vue b/frontend/src/components/Details/Message.vue
index 53396ac52..0f7922a5e 100644
--- a/frontend/src/components/Details/Message.vue
+++ b/frontend/src/components/Details/Message.vue
@@ -8,6 +8,14 @@
 			<code class="deserialized-message">
 				{{ message }}
 			</code>
+			<button
+				class="relative transition-colors text-theme-faded hover:text-theme-interactiveHover inline"
+				style="width: 24px"
+				@click="toggleModalVisible"
+			>
+				<ArrowsPointingOut class="inline align-text-top h-4" />
+			</button>
+			<Modal v-show="isVisible" @close="closeModal" />
 			<TextCopy
 				v-if="message"
 				:text="message"
@@ -19,9 +27,19 @@
 <script lang="ts" setup>
 import InfoTooltip from '../atoms/InfoTooltip.vue'
 import TextCopy from '../atoms/TextCopy.vue'
+import Modal from './Modal.vue'
+import ArrowsPointingOut from '~/components/icons/ArrowsPointingOut.vue'
 
 type Props = {
 	message: string
 }
 defineProps<Props>()
+
+const isVisible = ref(false)
+const toggleModalVisible = () => {
+	isVisible.value = !isVisible.value
+}
+const closeModal = () => {
+	isVisible.value = false
+}
 </script>
diff --git a/frontend/src/components/Details/Modal.vue b/frontend/src/components/Details/Modal.vue
new file mode 100644
index 000000000..e6904c285
--- /dev/null
+++ b/frontend/src/components/Details/Modal.vue
@@ -0,0 +1,101 @@
+<template>
+	<transition name="modal-fade">
+		<div class="modal-backdrop">
+			<div class="modal">
+				<header class="modal-header">
+					<slot name="header"> This is the default title! </slot>
+					<button type="button" class="btn-close" @click="close">x</button>
+				</header>
+				<section class="modal-body">
+					<slot name="body"> This is the default body! </slot>
+				</section>
+				<footer class="modal-footer">
+					<slot name="footer"> This is the default footer! </slot>
+					<button type="button" class="btn-green" @click="close">
+						Close Modal
+					</button>
+				</footer>
+			</div>
+		</div>
+	</transition>
+</template>
+<script setup lang="ts">
+const emit = defineEmits(['close'])
+const close = () => {
+	emit('close')
+}
+</script>
+<style>
+.modal-fade-enter-from,
+.modal-fade-leave-to {
+	opacity: 0;
+}
+.modal-fade-enter-active,
+.modal-fade-leave-active {
+	transition: opacity 0.5s ease;
+}
+.modal-backdrop {
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background-color: rgba(0, 0, 0, 0.3);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.modal {
+	background: #ffffff;
+	box-shadow: 2px 2px 20px 1px;
+	overflow-x: auto;
+	display: flex;
+	flex-direction: column;
+}
+
+.modal-header,
+.modal-footer {
+	padding: 15px;
+	display: flex;
+}
+
+.modal-header {
+	position: relative;
+	border-bottom: 1px solid #eeeeee;
+	color: #4aae9b;
+	justify-content: space-between;
+}
+
+.modal-footer {
+	border-top: 1px solid #eeeeee;
+	flex-direction: column;
+	justify-content: flex-end;
+}
+
+.modal-body {
+	color: #4aae9b;
+	position: relative;
+	padding: 20px 10px;
+}
+
+.btn-close {
+	position: absolute;
+	top: 0;
+	right: 0;
+	border: none;
+	font-size: 20px;
+	padding: 10px;
+	cursor: pointer;
+	font-weight: bold;
+	color: #4aae9b;
+	background: transparent;
+}
+
+.btn-green {
+	color: white;
+	background: #4aae9b;
+	border: 1px solid #4aae9b;
+	border-radius: 2px;
+}
+</style>
diff --git a/frontend/src/components/icons/ArrowsPointingOut.vue b/frontend/src/components/icons/ArrowsPointingOut.vue
new file mode 100644
index 000000000..1c55ebccb
--- /dev/null
+++ b/frontend/src/components/icons/ArrowsPointingOut.vue
@@ -0,0 +1,12 @@
+<template>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 20 20"
+		fill="currentColor"
+		class="w-5 h-5"
+	>
+		<path
+			d="M13.28 7.78l3.22-3.22v2.69a.75.75 0 001.5 0v-4.5a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h2.69l-3.22 3.22a.75.75 0 001.06 1.06zM2 17.25v-4.5a.75.75 0 011.5 0v2.69l3.22-3.22a.75.75 0 011.06 1.06L4.56 16.5h2.69a.75.75 0 010 1.5h-4.5a.747.747 0 01-.75-.75zM12.22 13.28l3.22 3.22h-2.69a.75.75 0 000 1.5h4.5a.747.747 0 00.75-.75v-4.5a.75.75 0 00-1.5 0v2.69l-3.22-3.22a.75.75 0 10-1.06 1.06zM3.5 4.56l3.22 3.22a.75.75 0 001.06-1.06L4.56 3.5h2.69a.75.75 0 000-1.5h-4.5a.75.75 0 00-.75.75v4.5a.75.75 0 001.5 0V4.56z"
+		/>
+	</svg>
+</template>

From 89ab09a619d514417f1c9d52f8c93f920dc71132 Mon Sep 17 00:00:00 2001
From: schwartz-concordium
 <132270889+schwartz-concordium@users.noreply.github.com>
Date: Sun, 19 Nov 2023 11:51:36 +0100
Subject: [PATCH 2/6] some refactoring

---
 frontend/src/components/Details/Message.vue | 20 +-----
 frontend/src/components/Details/Modal.vue   | 68 ++++++++++++++-------
 2 files changed, 47 insertions(+), 41 deletions(-)

diff --git a/frontend/src/components/Details/Message.vue b/frontend/src/components/Details/Message.vue
index 0f7922a5e..0ced9f577 100644
--- a/frontend/src/components/Details/Message.vue
+++ b/frontend/src/components/Details/Message.vue
@@ -5,17 +5,10 @@
 			<InfoTooltip text="Input parameters given to activity entrypoint." />
 		</div>
 		<div class="flex">
-			<code class="deserialized-message">
+			<code class="truncate w-36">
 				{{ message }}
 			</code>
-			<button
-				class="relative transition-colors text-theme-faded hover:text-theme-interactiveHover inline"
-				style="width: 24px"
-				@click="toggleModalVisible"
-			>
-				<ArrowsPointingOut class="inline align-text-top h-4" />
-			</button>
-			<Modal v-show="isVisible" @close="closeModal" />
+			<Modal />
 			<TextCopy
 				v-if="message"
 				:text="message"
@@ -28,18 +21,9 @@
 import InfoTooltip from '../atoms/InfoTooltip.vue'
 import TextCopy from '../atoms/TextCopy.vue'
 import Modal from './Modal.vue'
-import ArrowsPointingOut from '~/components/icons/ArrowsPointingOut.vue'
 
 type Props = {
 	message: string
 }
 defineProps<Props>()
-
-const isVisible = ref(false)
-const toggleModalVisible = () => {
-	isVisible.value = !isVisible.value
-}
-const closeModal = () => {
-	isVisible.value = false
-}
 </script>
diff --git a/frontend/src/components/Details/Modal.vue b/frontend/src/components/Details/Modal.vue
index e6904c285..b9140b0df 100644
--- a/frontend/src/components/Details/Modal.vue
+++ b/frontend/src/components/Details/Modal.vue
@@ -1,28 +1,44 @@
 <template>
+	<button
+		class="relative transition-colors text-theme-faded hover:text-theme-interactiveHover inline"
+		style="width: 24px"
+		@click="toggleModalVisible"
+	>
+		<ArrowsPointingOut class="inline align-text-top h-4" />
+	</button>
 	<transition name="modal-fade">
-		<div class="modal-backdrop">
-			<div class="modal">
-				<header class="modal-header">
-					<slot name="header"> This is the default title! </slot>
-					<button type="button" class="btn-close" @click="close">x</button>
-				</header>
-				<section class="modal-body">
-					<slot name="body"> This is the default body! </slot>
-				</section>
-				<footer class="modal-footer">
-					<slot name="footer"> This is the default footer! </slot>
-					<button type="button" class="btn-green" @click="close">
-						Close Modal
-					</button>
-				</footer>
+		<span v-if="isVisible">
+			<div class="modal-backdrop">
+				<div class="modal">
+					<header class="modal-header">
+						<slot name="header"> This is the default title! </slot>
+						<button type="button" class="btn-close" @click="closeModal">
+							x
+						</button>
+					</header>
+					<section class="modal-body">
+						<slot name="body"> This is the default body! </slot>
+					</section>
+					<footer class="modal-footer">
+						<slot name="footer"> This is the default footer! </slot>
+						<button type="button" class="btn-green" @click="closeModal">
+							Close Modal
+						</button>
+					</footer>
+				</div>
 			</div>
-		</div>
+		</span>
 	</transition>
 </template>
 <script setup lang="ts">
-const emit = defineEmits(['close'])
-const close = () => {
-	emit('close')
+import ArrowsPointingOut from '~/components/icons/ArrowsPointingOut.vue'
+
+const isVisible = ref(false)
+const toggleModalVisible = () => {
+	isVisible.value = !isVisible.value
+}
+const closeModal = () => {
+	isVisible.value = false
 }
 </script>
 <style>
@@ -34,21 +50,27 @@ const close = () => {
 .modal-fade-leave-active {
 	transition: opacity 0.5s ease;
 }
+.modal-fade-enter-to,
+.modal-fade-leave-from {
+	opacity: 1;
+}
 .modal-backdrop {
 	position: fixed;
 	top: 0;
 	bottom: 0;
 	left: 0;
 	right: 0;
-	background-color: rgba(0, 0, 0, 0.3);
 	display: flex;
 	justify-content: center;
 	align-items: center;
 }
 
 .modal {
-	background: #ffffff;
-	box-shadow: 2px 2px 20px 1px;
+	background-color: hsla(245, 24%, 51%, 100%);
+	/* background-color: var(--color-background-elevated); // Doesn't work */
+	opacity: 1;
+	border: 1px solid #787594;
+	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
 	overflow-x: auto;
 	display: flex;
 	flex-direction: column;
@@ -56,6 +78,7 @@ const close = () => {
 
 .modal-header,
 .modal-footer {
+	color: var(--color-thead-bg);
 	padding: 15px;
 	display: flex;
 }
@@ -63,7 +86,6 @@ const close = () => {
 .modal-header {
 	position: relative;
 	border-bottom: 1px solid #eeeeee;
-	color: #4aae9b;
 	justify-content: space-between;
 }
 

From 2127964490c15f885865a2b037c244470ee96ed2 Mon Sep 17 00:00:00 2001
From: schwartz-concordium
 <132270889+schwartz-concordium@users.noreply.github.com>
Date: Sun, 19 Nov 2023 12:13:50 +0100
Subject: [PATCH 3/6] some examples

---
 frontend/src/components/Details/Message.vue   | 24 ++++++++++++++++++-
 frontend/src/components/Details/Modal.vue     |  4 +---
 .../src/components/Details/TextExpand.vue     |  0
 3 files changed, 24 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/Details/TextExpand.vue

diff --git a/frontend/src/components/Details/Message.vue b/frontend/src/components/Details/Message.vue
index 0ced9f577..b044234a2 100644
--- a/frontend/src/components/Details/Message.vue
+++ b/frontend/src/components/Details/Message.vue
@@ -8,7 +8,27 @@
 			<code class="truncate w-36">
 				{{ message }}
 			</code>
-			<Modal />
+			<Tooltip text="">
+				<ArrowsPointingOut class="inline align-text-top h-4" />
+				<template #content>
+					<code style="text-align: left">
+						<pre style="white-space: pre-wrap">
+							{{ JSON.stringify(JSON.parse(message), null, 2) }}
+						</pre
+						>
+					</code>
+				</template>
+			</Tooltip>
+			<Modal>
+				<template #body>
+					<code style="text-align: left">
+						<pre style="white-space: pre-wrap">
+							{{ JSON.stringify(JSON.parse(message), null, 2) }}
+						</pre
+						>
+					</code>
+				</template>
+			</Modal>
 			<TextCopy
 				v-if="message"
 				:text="message"
@@ -20,6 +40,8 @@
 <script lang="ts" setup>
 import InfoTooltip from '../atoms/InfoTooltip.vue'
 import TextCopy from '../atoms/TextCopy.vue'
+import Tooltip from '../atoms/Tooltip.vue'
+import ArrowsPointingOut from '../icons/ArrowsPointingOut.vue'
 import Modal from './Modal.vue'
 
 type Props = {
diff --git a/frontend/src/components/Details/Modal.vue b/frontend/src/components/Details/Modal.vue
index b9140b0df..255abab07 100644
--- a/frontend/src/components/Details/Modal.vue
+++ b/frontend/src/components/Details/Modal.vue
@@ -11,16 +11,14 @@
 			<div class="modal-backdrop">
 				<div class="modal">
 					<header class="modal-header">
-						<slot name="header"> This is the default title! </slot>
 						<button type="button" class="btn-close" @click="closeModal">
 							x
 						</button>
 					</header>
 					<section class="modal-body">
-						<slot name="body"> This is the default body! </slot>
+						<slot name="body" />
 					</section>
 					<footer class="modal-footer">
-						<slot name="footer"> This is the default footer! </slot>
 						<button type="button" class="btn-green" @click="closeModal">
 							Close Modal
 						</button>
diff --git a/frontend/src/components/Details/TextExpand.vue b/frontend/src/components/Details/TextExpand.vue
new file mode 100644
index 000000000..e69de29bb

From 09baf3e41fc9bd0d850be5fac61563f5324d6136 Mon Sep 17 00:00:00 2001
From: schwartz-concordium
 <132270889+schwartz-concordium@users.noreply.github.com>
Date: Sun, 19 Nov 2023 12:28:39 +0100
Subject: [PATCH 4/6] Fix json rendering

---
 frontend/src/components/Details/Message.vue | 12 +++-------
 frontend/src/components/Details/Modal.vue   | 26 ---------------------
 2 files changed, 3 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/Details/Message.vue b/frontend/src/components/Details/Message.vue
index b044234a2..078756358 100644
--- a/frontend/src/components/Details/Message.vue
+++ b/frontend/src/components/Details/Message.vue
@@ -8,24 +8,18 @@
 			<code class="truncate w-36">
 				{{ message }}
 			</code>
-			<Tooltip text="">
+			<Tooltip>
 				<ArrowsPointingOut class="inline align-text-top h-4" />
 				<template #content>
 					<code style="text-align: left">
-						<pre style="white-space: pre-wrap">
-							{{ JSON.stringify(JSON.parse(message), null, 2) }}
-						</pre
-						>
+						<pre>{{ JSON.stringify(JSON.parse(message), null, 2) }}</pre>
 					</code>
 				</template>
 			</Tooltip>
 			<Modal>
 				<template #body>
 					<code style="text-align: left">
-						<pre style="white-space: pre-wrap">
-							{{ JSON.stringify(JSON.parse(message), null, 2) }}
-						</pre
-						>
+						<pre>{{ JSON.stringify(JSON.parse(message), null, 2) }}</pre>
 					</code>
 				</template>
 			</Modal>
diff --git a/frontend/src/components/Details/Modal.vue b/frontend/src/components/Details/Modal.vue
index 255abab07..d2c0111e3 100644
--- a/frontend/src/components/Details/Modal.vue
+++ b/frontend/src/components/Details/Modal.vue
@@ -10,11 +10,6 @@
 		<span v-if="isVisible">
 			<div class="modal-backdrop">
 				<div class="modal">
-					<header class="modal-header">
-						<button type="button" class="btn-close" @click="closeModal">
-							x
-						</button>
-					</header>
 					<section class="modal-body">
 						<slot name="body" />
 					</section>
@@ -74,19 +69,11 @@ const closeModal = () => {
 	flex-direction: column;
 }
 
-.modal-header,
 .modal-footer {
-	color: var(--color-thead-bg);
 	padding: 15px;
 	display: flex;
 }
 
-.modal-header {
-	position: relative;
-	border-bottom: 1px solid #eeeeee;
-	justify-content: space-between;
-}
-
 .modal-footer {
 	border-top: 1px solid #eeeeee;
 	flex-direction: column;
@@ -99,19 +86,6 @@ const closeModal = () => {
 	padding: 20px 10px;
 }
 
-.btn-close {
-	position: absolute;
-	top: 0;
-	right: 0;
-	border: none;
-	font-size: 20px;
-	padding: 10px;
-	cursor: pointer;
-	font-weight: bold;
-	color: #4aae9b;
-	background: transparent;
-}
-
 .btn-green {
 	color: white;
 	background: #4aae9b;

From f7de5bed24392268aaa74e59a0c6db84404776f1 Mon Sep 17 00:00:00 2001
From: schwartz-concordium
 <132270889+schwartz-concordium@users.noreply.github.com>
Date: Tue, 28 Nov 2023 12:32:11 +0100
Subject: [PATCH 5/6] prettify modal

---
 frontend/src/assets/css/styles.css            | 10 ---
 frontend/src/components/Details/Logs.vue      | 10 ++-
 frontend/src/components/Details/Message.vue   | 14 +--
 frontend/src/components/Details/Modal.vue     | 88 ++++++++++---------
 frontend/src/components/icons/OverlayIcon.vue | 24 +++++
 5 files changed, 83 insertions(+), 63 deletions(-)
 create mode 100644 frontend/src/components/icons/OverlayIcon.vue

diff --git a/frontend/src/assets/css/styles.css b/frontend/src/assets/css/styles.css
index 0b7faecb9..bcef441f6 100644
--- a/frontend/src/assets/css/styles.css
+++ b/frontend/src/assets/css/styles.css
@@ -96,13 +96,3 @@ body {
 	border: 1px solid #787594;
 	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);	
 }
-
-.deserialized-message {
-	white-space: pre-line;
-	max-width: 775px;
-	overflow-wrap: break-word;
-
-	@media screen and (max-width: 900px) {
-		max-width: 240px;
-	}
-}
diff --git a/frontend/src/components/Details/Logs.vue b/frontend/src/components/Details/Logs.vue
index 4696e6564..a10df9ec9 100644
--- a/frontend/src/components/Details/Logs.vue
+++ b/frontend/src/components/Details/Logs.vue
@@ -6,9 +6,16 @@
 		</div>
 		<template v-if="events?.nodes?.length">
 			<div v-for="(event, i) in events.nodes" :key="i" class="flex">
-				<code class="deserialized-message">
+				<code class="truncate w-96">
 					{{ event }}
 				</code>
+				<Modal :header-title="'Log'">
+					<template #body>
+						<code style="text-align: left">
+							<pre>{{ JSON.stringify(JSON.parse(event), null, 2) }}</pre>
+						</code>
+					</template>
+				</Modal>
 				<TextCopy
 					:text="event"
 					label="Click to copy events logs to clipboard"
@@ -21,6 +28,7 @@
 import { Maybe, StringConnection } from '../../types/generated'
 import TextCopy from '../../components/atoms/TextCopy.vue'
 import InfoTooltip from '../atoms/InfoTooltip.vue'
+import Modal from './Modal.vue'
 
 type Props = {
 	events?: Maybe<StringConnection>
diff --git a/frontend/src/components/Details/Message.vue b/frontend/src/components/Details/Message.vue
index 078756358..a49d88a68 100644
--- a/frontend/src/components/Details/Message.vue
+++ b/frontend/src/components/Details/Message.vue
@@ -5,18 +5,10 @@
 			<InfoTooltip text="Input parameters given to activity entrypoint." />
 		</div>
 		<div class="flex">
-			<code class="truncate w-36">
+			<code class="truncate w-96">
 				{{ message }}
 			</code>
-			<Tooltip>
-				<ArrowsPointingOut class="inline align-text-top h-4" />
-				<template #content>
-					<code style="text-align: left">
-						<pre>{{ JSON.stringify(JSON.parse(message), null, 2) }}</pre>
-					</code>
-				</template>
-			</Tooltip>
-			<Modal>
+			<Modal :header-title="'Message'">
 				<template #body>
 					<code style="text-align: left">
 						<pre>{{ JSON.stringify(JSON.parse(message), null, 2) }}</pre>
@@ -34,8 +26,6 @@
 <script lang="ts" setup>
 import InfoTooltip from '../atoms/InfoTooltip.vue'
 import TextCopy from '../atoms/TextCopy.vue'
-import Tooltip from '../atoms/Tooltip.vue'
-import ArrowsPointingOut from '../icons/ArrowsPointingOut.vue'
 import Modal from './Modal.vue'
 
 type Props = {
diff --git a/frontend/src/components/Details/Modal.vue b/frontend/src/components/Details/Modal.vue
index d2c0111e3..9a54afd14 100644
--- a/frontend/src/components/Details/Modal.vue
+++ b/frontend/src/components/Details/Modal.vue
@@ -1,30 +1,39 @@
 <template>
 	<button
-		class="relative transition-colors text-theme-faded hover:text-theme-interactiveHover inline"
+		class="transition-colors text-theme-faded hover:text-theme-interactiveHover inline"
 		style="width: 24px"
 		@click="toggleModalVisible"
 	>
-		<ArrowsPointingOut class="inline align-text-top h-4" />
+		<OverlayIcon class="inline align-text-top h-4" />
 	</button>
 	<transition name="modal-fade">
 		<span v-if="isVisible">
 			<div class="modal-backdrop">
 				<div class="modal">
+					<header class="modal-header">
+						<h3 class="text-2xl">
+							{{ props.headerTitle }}
+						</h3>
+						<button type="button" @click="closeModal">
+							<XIcon class="h-6" />
+						</button>
+					</header>
 					<section class="modal-body">
 						<slot name="body" />
 					</section>
-					<footer class="modal-footer">
-						<button type="button" class="btn-green" @click="closeModal">
-							Close Modal
-						</button>
-					</footer>
 				</div>
 			</div>
 		</span>
 	</transition>
 </template>
 <script setup lang="ts">
-import ArrowsPointingOut from '~/components/icons/ArrowsPointingOut.vue'
+import { XIcon } from '@heroicons/vue/solid'
+import OverlayIcon from '../icons/OverlayIcon.vue'
+
+type Props = {
+	headerTitle: string
+}
+const props = defineProps<Props>()
 
 const isVisible = ref(false)
 const toggleModalVisible = () => {
@@ -35,61 +44,60 @@ const closeModal = () => {
 }
 </script>
 <style>
-.modal-fade-enter-from,
-.modal-fade-leave-to {
-	opacity: 0;
-}
-.modal-fade-enter-active,
-.modal-fade-leave-active {
-	transition: opacity 0.5s ease;
-}
-.modal-fade-enter-to,
-.modal-fade-leave-from {
-	opacity: 1;
+.modal-body pre {
+	white-space: pre-wrap; /* Since CSS 2.1 */
+	white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
+	white-space: -pre-wrap; /* Opera 4-6 */
+	white-space: -o-pre-wrap; /* Opera 7 */
+	word-wrap: break-word; /* Internet Explorer 5.5+ */
 }
+
 .modal-backdrop {
-	position: fixed;
 	top: 0;
 	bottom: 0;
 	left: 0;
 	right: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 100;
+	background-color: rgba(0, 0, 0, 0.8);
+	position: fixed;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 }
 
 .modal {
-	background-color: hsla(245, 24%, 51%, 100%);
-	/* background-color: var(--color-background-elevated); // Doesn't work */
-	opacity: 1;
-	border: 1px solid #787594;
-	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
+	background-color: var(--color-background-elevated-nontrans);
+	width: 1000px;
+	height: 90%;
+	border-radius: 16px;
+	box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.5);
 	overflow-x: auto;
 	display: flex;
 	flex-direction: column;
 }
 
-.modal-footer {
-	padding: 15px;
+.modal-header {
 	display: flex;
-}
+	flex-direction: row;
+	padding: 30px;
+	justify-content: space-between;
 
-.modal-footer {
-	border-top: 1px solid #eeeeee;
-	flex-direction: column;
-	justify-content: flex-end;
+	@media screen and (max-width: 640px) {
+		padding: 20px;
+	}
 }
 
 .modal-body {
+	height: 76vh;
+	overflow-x: hidden;
+	overflow-y: scroll;
 	color: #4aae9b;
-	position: relative;
-	padding: 20px 10px;
-}
+	padding: 0 40px 40px;
 
-.btn-green {
-	color: white;
-	background: #4aae9b;
-	border: 1px solid #4aae9b;
-	border-radius: 2px;
+	@media screen and (max-width: 640px) {
+		padding: 0 10px 10px;
+	}
 }
 </style>
diff --git a/frontend/src/components/icons/OverlayIcon.vue b/frontend/src/components/icons/OverlayIcon.vue
new file mode 100644
index 000000000..ce340f88b
--- /dev/null
+++ b/frontend/src/components/icons/OverlayIcon.vue
@@ -0,0 +1,24 @@
+<template>
+	<SVG
+		stroke="currentColor"
+		fill="currentColor"
+		stroke-width="1"
+		viewBox="0 0 24 24"
+		height="100%"
+		width="100%"
+	>
+		<rect x="6.40778" y="0.602356" width="14" height="14" rx="2" />
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M7.74111 5.60236C7.74111 5.32621 7.96497 5.10236 8.24111 5.10236H9.90777C10.1839 5.10236 10.4078 5.32621 10.4078 5.60236C10.4078 5.8785 10.1839 6.10236 9.90777 6.10236H8.24111C7.96497 6.10236 7.74111 5.8785 7.74111 5.60236ZM12.0744 5.60236C12.0744 5.32621 12.2983 5.10236 12.5744 5.10236H13.4078C13.7458 5.10236 14.0694 5.16973 14.3649 5.29225C14.62 5.39803 14.741 5.69056 14.6352 5.94564C14.5294 6.20072 14.2369 6.32176 13.9818 6.21598C13.8057 6.14293 13.6121 6.10236 13.4078 6.10236H12.5744C12.2983 6.10236 12.0744 5.8785 12.0744 5.60236ZM15.0645 6.37492C15.3196 6.26914 15.6121 6.39017 15.7179 6.64525C15.8404 6.94072 15.9078 7.2643 15.9078 7.60236V8.43569C15.9078 8.71183 15.6839 8.93569 15.4078 8.93569C15.1316 8.93569 14.9078 8.71183 14.9078 8.43569V7.60236C14.9078 7.39805 14.8672 7.20448 14.7942 7.02831C14.6884 6.77323 14.8094 6.48069 15.0645 6.37492ZM15.4078 10.6024C15.6839 10.6024 15.9078 10.8262 15.9078 11.1024V12.769C15.9078 13.0452 15.6839 13.269 15.4078 13.269C15.1316 13.269 14.9078 13.0452 14.9078 12.769V11.1024C14.9078 10.8262 15.1316 10.6024 15.4078 10.6024Z"
+		/>
+		<path
+			d="M6.40778 5.10236H3.40778C2.02706 5.10236 0.907776 6.22164 0.907776 7.60236V17.6024C0.907776 18.9831 2.02706 20.1024 3.40778 20.1024H13.4078C14.7885 20.1024 15.9078 18.9831 15.9078 17.6024V14.6024H14.9078V17.6024C14.9078 18.4308 14.2362 19.1024 13.4078 19.1024H3.40778C2.57935 19.1024 1.90778 18.4308 1.90778 17.6024V7.60236C1.90778 6.77393 2.57935 6.10236 3.40778 6.10236H6.40778V5.10236Z"
+		/>
+	</SVG>
+</template>
+
+<script lang="ts" setup>
+import SVG from '~/components/atoms/SVG.vue'
+</script>

From 9f09ed7eca9b36c2e465b71bcaae96a24caa756f Mon Sep 17 00:00:00 2001
From: schwartz-concordium
 <132270889+schwartz-concordium@users.noreply.github.com>
Date: Tue, 28 Nov 2023 12:37:57 +0100
Subject: [PATCH 6/6] bump version

---
 frontend/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/package.json b/frontend/package.json
index 51f2ba32b..d59f80c8d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "ccscan-frontend",
 	"description": "CCDScan frontend",
-	"version": "1.5.19",
+	"version": "1.5.20",
 	"engine": "16",
 	"type": "module",
 	"private": true,