From 19b883291f8e20096b6f2672d7d8a0f287d2d101 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Fri, 9 Feb 2024 11:04:59 +1100
Subject: [PATCH] fix: use styled for generic attachment shadow

renamed attachment container to image grid container
---
 stylesheets/_modules.scss                     |  4 ----
 .../message-content/MessageAttachment.tsx     | 20 ++++++++++---------
 .../message-item/GenericReadableMessage.tsx   |  2 +-
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 54391bce3..349b85b70 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -69,10 +69,6 @@
     color: var(--message-bubbles-received-text-color);
     background: var(--message-bubbles-received-background-color);
   }
-
-  &.message-selected {
-    box-shadow: var(--drop-shadow);
-  }
 }
 
 .module-message__generic-attachment__icon-container {
diff --git a/ts/components/conversation/message/message-content/MessageAttachment.tsx b/ts/components/conversation/message/message-content/MessageAttachment.tsx
index 1eda378f5..4864af173 100644
--- a/ts/components/conversation/message/message-content/MessageAttachment.tsx
+++ b/ts/components/conversation/message/message-content/MessageAttachment.tsx
@@ -54,7 +54,7 @@ type Props = {
   highlight?: boolean;
 };
 
-const StyledAttachmentContainer = styled.div<{
+const StyledImageGridContainer = styled.div<{
   messageDirection: MessageModelType;
 }>`
   text-align: center;
@@ -64,6 +64,10 @@ const StyledAttachmentContainer = styled.div<{
   justify-content: ${props => (props.messageDirection === 'incoming' ? 'flex-start' : 'flex-end')};
 `;
 
+const StyledGenericAttachmentContainer = styled(MessageHighlighter)<{ selected: boolean }>`
+  ${props => props.selected && 'box-shadow: var(--drop-shadow);'}
+`;
+
 export const MessageAttachment = (props: Props) => {
   const { messageId, imageBroken, handleImageError, highlight = false } = props;
 
@@ -141,14 +145,14 @@ export const MessageAttachment = (props: Props) => {
   ) {
     return (
       <MessageHighlighter highlight={highlight}>
-        <StyledAttachmentContainer messageDirection={direction}>
+        <StyledImageGridContainer messageDirection={direction}>
           <ImageGrid
             messageId={messageId}
             attachments={attachments}
             onError={handleImageError}
             onClickAttachment={onClickOnImageGrid}
           />
-        </StyledAttachmentContainer>
+        </StyledImageGridContainer>
       </MessageHighlighter>
     );
   }
@@ -178,12 +182,10 @@ export const MessageAttachment = (props: Props) => {
   const extension = getExtensionForDisplay({ contentType, fileName });
 
   return (
-    <MessageHighlighter
+    <StyledGenericAttachmentContainer
       highlight={highlight}
-      className={classNames(
-        'module-message__generic-attachment',
-        selected ? 'message-selected' : undefined
-      )}
+      selected={selected}
+      className={'module-message__generic-attachment'}
     >
       {pending ? (
         <div className="module-message__generic-attachment__spinner-container">
@@ -220,7 +222,7 @@ export const MessageAttachment = (props: Props) => {
           {fileSize}
         </div>
       </div>
-    </MessageHighlighter>
+    </StyledGenericAttachmentContainer>
   );
 };
 
diff --git a/ts/components/conversation/message/message-item/GenericReadableMessage.tsx b/ts/components/conversation/message/message-item/GenericReadableMessage.tsx
index 1d65214c6..2ec184836 100644
--- a/ts/components/conversation/message/message-item/GenericReadableMessage.tsx
+++ b/ts/components/conversation/message/message-item/GenericReadableMessage.tsx
@@ -142,7 +142,7 @@ export const GenericReadableMessage = (props: Props) => {
       selected={selected}
       isDetailView={isDetailView}
       isRightClicked={isRightClicked}
-      className={classNames(selected && 'message-selected')}
+      className={classNames(selected ? 'message-selected' : undefined)}
       onContextMenu={handleContextMenu}
       key={`readable-message-${messageId}`}
     >