diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 349b85b70..54391bce3 100644 --- a/stylesheets/_modules.scss +++ b/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 { diff --git a/ts/components/conversation/H5AudioPlayer.tsx b/ts/components/conversation/H5AudioPlayer.tsx index 490166f9f..2ace8bde9 100644 --- a/ts/components/conversation/H5AudioPlayer.tsx +++ b/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: , pause: , }} + dropShadow={selected} /> ); }; diff --git a/ts/components/conversation/message/message-content/MessageAttachment.tsx b/ts/components/conversation/message/message-content/MessageAttachment.tsx index db3d843d5..1eda378f5 100644 --- a/ts/components/conversation/message/message-content/MessageAttachment.tsx +++ b/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 ( - + {pending ? (