From 0b1c8ed4ddf15d17d0a48511925fdf93d2ae668b Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 29 Sep 2023 09:28:51 +0200
Subject: [PATCH] fix(attachments): layout and coloring in dark mode

---
 src/components/tasks/partials/attachments.vue | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue
index 746e24606b..9d5639be7e 100644
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@@ -37,8 +37,8 @@
 			>
 				<div class="filename">
 					{{ a.file.name }}
-					<span 
-						v-if="task.coverImageAttachmentId === a.id" 
+					<span
+						v-if="task.coverImageAttachmentId === a.id"
 						class="is-task-cover"
 					>
 						{{ $t('task.attachment.usedAsCover') }}
@@ -115,18 +115,20 @@
 		</x-button>
 
 		<!-- Dropzone -->
-		<div
-			:class="{ hidden: !isOverDropZone }"
-			class="dropzone"
-			v-if="editEnabled"
-		>
-			<div class="drop-hint">
-				<div class="icon">
-					<icon icon="cloud-upload-alt"/>
+		<Teleport to="body">
+			<div
+				:class="{ hidden: !isOverDropZone }"
+				class="dropzone"
+				v-if="editEnabled"
+			>
+				<div class="drop-hint">
+					<div class="icon">
+						<icon icon="cloud-upload-alt"/>
+					</div>
+					<div class="hint">{{ $t('task.attachment.drop') }}</div>
 				</div>
-				<div class="hint">{{ $t('task.attachment.drop') }}</div>
 			</div>
-		</div>
+		</Teleport>
 
 		<!-- Delete modal -->
 		<modal
@@ -323,7 +325,7 @@ async function setCoverImage(attachment: IAttachment | null) {
 
 .dropzone {
 	position: fixed;
-	background: rgba(250, 250, 250, 0.8);
+	background: hsla(var(--grey-100-hsl), 0.8);
 	top: 0;
 	left: 0;
 	bottom: 0;
@@ -356,11 +358,11 @@ async function setCoverImage(attachment: IAttachment | null) {
 
 	.hint {
 		margin: .5rem auto 2rem;
-		border-radius: 2px;
+		border-radius: $radius;
 		box-shadow: var(--shadow-md);
 		background: var(--primary);
 		padding: 1rem;
-		color: var(--white);
+		color: $white; // Should always be white because of the background, regardless of the theme
 		width: 100%;
 		max-width: 300px;
 	}