feat: add drop shadow to all selected message elements

stylesheets/_modules.scss

@@ -69,6 +69,10 @@
     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/H5AudioPlayer.tsx

@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
 import { setNextMessageToPlayId } from '../../state/ducks/conversations';
+import { useMessageSelected } from '../../state/selectors';
 import {
   getNextMessageToPlayId,
   getSortedMessagesOfSelectedConversation,
@@ -25,7 +26,7 @@ const StyledSpeedButton = styled.div`
   }
 `;
 
-export const StyledH5AudioPlayer = styled(H5AudioPlayer)`
+export const StyledH5AudioPlayer = styled(H5AudioPlayer)<{ dropShadow?: boolean }>`
   &.rhap_container {
     min-width: 220px;
     padding: 0px;
@@ -145,6 +146,8 @@ export const StyledH5AudioPlayer = styled(H5AudioPlayer)`
     height: 20px;
     margin-right: 0px;
   }
+
+  ${props => props.dropShadow && 'box-shadow: var(--drop-shadow);'}
 `;
 
 export const AudioPlayerWithEncryptedFile = (props: {
@@ -162,6 +165,7 @@ export const AudioPlayerWithEncryptedFile = (props: {
   const messageProps = useSelector(getSortedMessagesOfSelectedConversation);
   const nextMessageToPlayId = useSelector(getNextMessageToPlayId);
   const multiSelectMode = useSelector(isMessageSelectionMode);
+  const selected = useMessageSelected(messageId);
 
   const dataTestId = `audio-${messageId}`;
 
@@ -263,6 +267,7 @@ export const AudioPlayerWithEncryptedFile = (props: {
         play: <SessionIcon iconType="play" iconSize="small" />,
         pause: <SessionIcon iconType="pause" iconSize="small" />,
       }}
+      dropShadow={selected}
     />
   );
 };

ts/components/conversation/message/message-content/MessageAttachment.tsx

@@ -11,6 +11,7 @@ import {
   toggleSelectedMessageId,
 } from '../../../../state/ducks/conversations';
 import { StateType } from '../../../../state/reducer';
+import { useMessageSelected } from '../../../../state/selectors';
 import {
   getMessageAttachmentProps,
   isMessageSelectionMode,
@@ -72,6 +73,7 @@ export const MessageAttachment = (props: Props) => {
   );
 
   const multiSelectMode = useSelector(isMessageSelectionMode);
+  const selected = useMessageSelected(messageId);
   const onClickOnImageGrid = useCallback(
     (attachment: AttachmentTypeWithPath | AttachmentType) => {
       if (multiSelectMode) {
@@ -176,7 +178,13 @@ export const MessageAttachment = (props: Props) => {
   const extension = getExtensionForDisplay({ contentType, fileName });
 
   return (
-    <MessageHighlighter highlight={highlight} className="module-message__generic-attachment">
+    <MessageHighlighter
+      highlight={highlight}
+      className={classNames(
+        'module-message__generic-attachment',
+        selected ? 'message-selected' : undefined
+      )}
+    >
       {pending ? (
         <div className="module-message__generic-attachment__spinner-container">
           <Spinner size="small" />