From 7664534618eb3b9f87021ec60eefd130aee3e784 Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Thu, 16 May 2024 19:29:40 +0200
Subject: [PATCH] Change attachment div to button

---
 .../components/tasks/partials/attachments.vue | 29 +++++++++----------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/tasks/partials/attachments.vue b/frontend/src/components/tasks/partials/attachments.vue
index 38c511aa7..392636c9f 100644
--- a/frontend/src/components/tasks/partials/attachments.vue
+++ b/frontend/src/components/tasks/partials/attachments.vue
@@ -27,10 +27,10 @@
 			v-if="attachments.length > 0"
 			class="files"
 		>
-			<div
+			<button
 				v-for="a in attachments"
 				:key="a.id"
-				class="attachment clickable"
+				class="attachment"
 				@click="viewOrDownload(a)"
 			>
 				<div class="preview-column">
@@ -109,7 +109,7 @@
 						</p>
 					</div>
 				</div>
-			</div>
+			</button>
 		</div>
 
 		<x-button
@@ -309,11 +309,18 @@ async function setCoverImage(attachment: IAttachment | null) {
 }
 
 .attachment {
+	display: grid;
+	grid-template-columns: 9rem 1fr;
+	align-items: center;
+	
 	margin-bottom: .5rem;
-	display: block;
-	transition: background-color $transition;
-	border-radius: $radius;
 	padding: .5rem;
+	
+	transition: background-color $transition;
+	background-color: transparent;
+	
+	border: transparent;
+	border-radius: $radius;
 
 	&:hover {
 		background-color: var(--grey-200);
@@ -453,16 +460,6 @@ async function setCoverImage(attachment: IAttachment | null) {
 	max-height: 4rem;
 }
 
-.clickable {
-	cursor: pointer;
-}
-
-.attachment {
-	display: grid;
-	grid-template-columns: 9rem 1fr;
-	align-items: center;
-}
-
 .is-task-cover {
 	background: var(--primary);
 	color: var(--white);