From 6e0ea6f79b8ba82e13bb9c76193fa32689827e96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Deborah=20K=C3=B6pfer?= <koepferd@users.noreply.github.com>
Date: Thu, 11 Jul 2024 16:27:59 +0200
Subject: [PATCH 1/3] fix(attachments): fix label color and make attachment
 area clickable

---
 src/components/message/MessageAttachment.tsx  | 66 ++++++++++++-------
 src/components/message/message.styles.scss    | 15 ++---
 .../resources/styles/_overwrites.scss         | 14 ++--
 3 files changed, 58 insertions(+), 37 deletions(-)

diff --git a/src/components/message/MessageAttachment.tsx b/src/components/message/MessageAttachment.tsx
index ecfb87277..01eecf779 100644
--- a/src/components/message/MessageAttachment.tsx
+++ b/src/components/message/MessageAttachment.tsx
@@ -6,7 +6,7 @@ import {
 import { ReactComponent as DownloadIcon } from '../../resources/img/icons/download.svg';
 import { useTranslation } from 'react-i18next';
 import { apiUrl } from '../../resources/scripts/endpoints';
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 import { FETCH_METHODS, fetchData } from '../../api';
 import {
 	decryptAttachment,
@@ -54,6 +54,7 @@ export const MessageAttachment = (props: MessageAttachmentProps) => {
 	const [attachmentStatus, setAttachmentStatus] = React.useState(
 		props.t === 'e2e' ? ENCRYPTED : NOT_ENCRYPTED
 	);
+	const currentDownloadLink = useRef<any>();
 
 	const decryptFile = useCallback(
 		async (url: string) => {
@@ -151,6 +152,18 @@ export const MessageAttachment = (props: MessageAttachmentProps) => {
 		return null;
 	}, []);
 
+	const attachmentAriaLabel = () => {
+		if (
+			props.t === 'e2e' &&
+			encryptedFile &&
+			attachmentStatus === DECRYPTION_FINISHED
+		)
+			return translate('e2ee.attachment.save');
+		else if (props.t === 'e2e' && attachmentStatus != DECRYPTION_FINISHED)
+			return translate(`e2ee.attachment.${attachmentStatus}`);
+		else return translate('attachments.download.label');
+	};
+
 	return (
 		<div
 			className={
@@ -159,7 +172,11 @@ export const MessageAttachment = (props: MessageAttachmentProps) => {
 					: ''
 			}
 		>
-			<div className="messageItem__message__attachment">
+			<button
+				aria-label={attachmentAriaLabel()}
+				onClick={() => currentDownloadLink.current.click()}
+				className="messageItem__message__attachment"
+			>
 				<span className="messageItem__message__attachment__icon">
 					{attachmentStatus === IS_DECRYPTING ? (
 						<LoadingSpinner />
@@ -176,34 +193,35 @@ export const MessageAttachment = (props: MessageAttachmentProps) => {
 						{props.attachment.image_size
 							? `| ${
 									(
-										getAttachmentSizeMBForKB(
-											props.t === 'e2e'
-												? Math.floor(
-														(props.attachment
-															.image_size -
-															KEY_ID_LENGTH -
-															MAX_PREFIX_LENGTH -
-															VERSION_SEPERATOR.length -
-															ENCRYPTION_VERSION_ACTIVE.length -
-															100) /
-															2 -
-															VECTOR_LENGTH * 2
-													) * 1000
-												: props.attachment.image_size *
-														1000
-										) / 1000
-									).toFixed(2) +
-									translate('attachments.type.label.mb')
-								}`
+								getAttachmentSizeMBForKB(
+									props.t === 'e2e'
+										? Math.floor(
+											(props.attachment
+												.image_size -
+												KEY_ID_LENGTH -
+												MAX_PREFIX_LENGTH -
+												VERSION_SEPERATOR.length -
+												ENCRYPTION_VERSION_ACTIVE.length -
+												100) /
+											2 -
+											VECTOR_LENGTH * 2
+										) * 1000
+										: props.attachment.image_size *
+										1000
+								) / 1000
+							).toFixed(2) +
+							translate('attachments.type.label.mb')
+							}`
 							: null}
 					</p>
 				</span>
-			</div>
+			</button>
 			{props.t === 'e2e' && (
 				<>
 					{encryptedFile &&
-					attachmentStatus === DECRYPTION_FINISHED ? (
+						attachmentStatus === DECRYPTION_FINISHED ? (
 						<a
+							ref={currentDownloadLink}
 							href={encryptedFile}
 							download={props.file.name}
 							rel="noopener noreferer"
@@ -217,6 +235,7 @@ export const MessageAttachment = (props: MessageAttachmentProps) => {
 						</a>
 					) : (
 						<button
+							ref={currentDownloadLink}
 							onClick={() =>
 								decryptFile(
 									apiUrl + props.attachment.title_link
@@ -242,6 +261,7 @@ export const MessageAttachment = (props: MessageAttachmentProps) => {
 			)}
 			{props.t !== 'e2e' && (
 				<a
+					ref={currentDownloadLink}
 					href={apiUrl + props.attachment.title_link}
 					rel="noopener noreferer"
 					className="messageItem__message__attachment__download"
diff --git a/src/components/message/message.styles.scss b/src/components/message/message.styles.scss
index 57265bb98..d13f57128 100644
--- a/src/components/message/message.styles.scss
+++ b/src/components/message/message.styles.scss
@@ -217,9 +217,11 @@ $message-attachment-color: $secondary !default;
 			align-items: center;
 			background-color: $dark-grey;
 			border-radius: $icon-size;
+			border: none;
 			color: $message-attachment-color;
 			padding: 6px $grid-base-three 5px 12px;
 			max-width: 350px;
+			cursor: pointer;
 
 			&__icon svg {
 				* {
@@ -241,7 +243,7 @@ $message-attachment-color: $secondary !default;
 
 				p {
 					margin: 0;
-					color: var(--text-color-contrast-switch, $secondary);
+					color: var(--skin-color-default, $secondary);
 					line-height: $icon-size;
 					text-decoration: underline;
 
@@ -250,14 +252,11 @@ $message-attachment-color: $secondary !default;
 						color: var(--text-color-contrast-switch, $primary);
 						text-decoration: none;
 					}
-				}
-
-				&:hover p {
-					color: var(--text-color-contrast-switch, $primary);
-				}
 
-				svg * {
-					fill: var(--text-color-contrast-switch, $primary);
+					&:hover {
+						color: var(--skin-color-default, $secondary);
+						opacity: 0.8;
+					}
 				}
 			}
 
diff --git a/src/extensions/resources/styles/_overwrites.scss b/src/extensions/resources/styles/_overwrites.scss
index 9dc1cef67..34eaedc60 100644
--- a/src/extensions/resources/styles/_overwrites.scss
+++ b/src/extensions/resources/styles/_overwrites.scss
@@ -1,9 +1,11 @@
-.messageItem__message__attachment__download:hover {
-	p,
-	svg * {
-		fill: var(--text-color-contrast-switch, $white);
-		color: var(--text-color-contrast-switch, $white);
-		opacity: 0.8;
+.messageItem__message--myMessage {
+	.messageItem__message__attachment__download:hover {
+		p,
+		svg * {
+			fill: var(--text-color-contrast-switch, $white);
+			color: var(--text-color-contrast-switch, $white);
+			opacity: 0.8;
+		}
 	}
 }
 

From 914d04006964fb591736cf21438edb0f4ebeb664 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Deborah=20K=C3=B6pfer?= <koepferd@users.noreply.github.com>
Date: Thu, 11 Jul 2024 16:38:02 +0200
Subject: [PATCH 2/3] style(attachment): prettier fix

---
 src/components/message/MessageAttachment.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/message/MessageAttachment.tsx b/src/components/message/MessageAttachment.tsx
index 01eecf779..7676b4313 100644
--- a/src/components/message/MessageAttachment.tsx
+++ b/src/components/message/MessageAttachment.tsx
@@ -159,7 +159,7 @@ export const MessageAttachment = (props: MessageAttachmentProps) => {
 			attachmentStatus === DECRYPTION_FINISHED
 		)
 			return translate('e2ee.attachment.save');
-		else if (props.t === 'e2e' && attachmentStatus != DECRYPTION_FINISHED)
+		else if (props.t === 'e2e' && attachmentStatus !== DECRYPTION_FINISHED)
 			return translate(`e2ee.attachment.${attachmentStatus}`);
 		else return translate('attachments.download.label');
 	};

From 5c2b6de98b702010c1a6b9f8a7d67ac86a5f0467 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Deborah=20K=C3=B6pfer?= <koepferd@users.noreply.github.com>
Date: Fri, 12 Jul 2024 08:49:26 +0200
Subject: [PATCH 3/3] style(prettier): whitespace fix

---
 src/components/message/MessageAttachment.tsx | 40 ++++++++++----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/components/message/MessageAttachment.tsx b/src/components/message/MessageAttachment.tsx
index 7676b4313..6dc3c4430 100644
--- a/src/components/message/MessageAttachment.tsx
+++ b/src/components/message/MessageAttachment.tsx
@@ -193,25 +193,25 @@ export const MessageAttachment = (props: MessageAttachmentProps) => {
 						{props.attachment.image_size
 							? `| ${
 									(
-								getAttachmentSizeMBForKB(
-									props.t === 'e2e'
-										? Math.floor(
-											(props.attachment
-												.image_size -
-												KEY_ID_LENGTH -
-												MAX_PREFIX_LENGTH -
-												VERSION_SEPERATOR.length -
-												ENCRYPTION_VERSION_ACTIVE.length -
-												100) /
-											2 -
-											VECTOR_LENGTH * 2
-										) * 1000
-										: props.attachment.image_size *
-										1000
-								) / 1000
-							).toFixed(2) +
-							translate('attachments.type.label.mb')
-							}`
+										getAttachmentSizeMBForKB(
+											props.t === 'e2e'
+												? Math.floor(
+														(props.attachment
+															.image_size -
+															KEY_ID_LENGTH -
+															MAX_PREFIX_LENGTH -
+															VERSION_SEPERATOR.length -
+															ENCRYPTION_VERSION_ACTIVE.length -
+															100) /
+															2 -
+															VECTOR_LENGTH * 2
+													) * 1000
+												: props.attachment.image_size *
+														1000
+										) / 1000
+									).toFixed(2) +
+									translate('attachments.type.label.mb')
+								}`
 							: null}
 					</p>
 				</span>
@@ -219,7 +219,7 @@ export const MessageAttachment = (props: MessageAttachmentProps) => {
 			{props.t === 'e2e' && (
 				<>
 					{encryptedFile &&
-						attachmentStatus === DECRYPTION_FINISHED ? (
+					attachmentStatus === DECRYPTION_FINISHED ? (
 						<a
 							ref={currentDownloadLink}
 							href={encryptedFile}