fix: use styled for generic attachment shadow

renamed attachment container to image grid container

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 {

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(
+      selected={selected}
-        'module-message__generic-attachment',
+      className={'module-message__generic-attachment'}
-        selected ? 'message-selected' : undefined
-      )}
     >
       {pending ? (
         <div className="module-message__generic-attachment__spinner-container">
@@ -220,7 +222,7 @@ export const MessageAttachment = (props: Props) => {
           {fileSize}
         </div>
       </div>
-    </MessageHighlighter>
+    </StyledGenericAttachmentContainer>
   );
 };
 

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}`}
     >