diff --git a/src/script/components/MessagesList/Message/ContentMessage/ContentMessage.tsx b/src/script/components/MessagesList/Message/ContentMessage/ContentMessage.tsx index ad95e3fc013..f8ab63156a2 100644 --- a/src/script/components/MessagesList/Message/ContentMessage/ContentMessage.tsx +++ b/src/script/components/MessagesList/Message/ContentMessage/ContentMessage.tsx @@ -199,13 +199,6 @@ export const ContentMessageComponent: React.FC = ({ onClick={onClickDetails} showIconOnly /> - - {/**/} )}
@@ -260,13 +253,6 @@ export const ContentMessageComponent: React.FC = ({ onRetry={() => onRetry(message)} /> )} - -
{!isConversationReadonly && isActionMenuVisible && ( diff --git a/src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageActions.styles.ts b/src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageActions.styles.ts index 9be4af5c601..7b7d031b528 100644 --- a/src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageActions.styles.ts +++ b/src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageActions.styles.ts @@ -32,7 +32,7 @@ export const messageBodyActions: CSSObject = { minWidth: '40px', position: 'absolute', right: '16px', - top: '-20px', + top: '-30px', userSelect: 'none', '@media (max-width: @screen-md-min)': { height: '45px', @@ -103,5 +103,5 @@ export const getActionsMenuCSS = (isActive?: boolean): CSSObject => { }; export const messageWithHeaderTop: CSSObject = { - top: '-53px', + top: '-63px', }; diff --git a/src/script/components/MessagesList/Message/ContentMessage/asset/index.tsx b/src/script/components/MessagesList/Message/ContentMessage/asset/index.tsx index aa46ed7dcb6..6ca98655f37 100644 --- a/src/script/components/MessagesList/Message/ContentMessage/asset/index.tsx +++ b/src/script/components/MessagesList/Message/ContentMessage/asset/index.tsx @@ -43,6 +43,7 @@ import {AssetType} from '../../../../../assets/AssetType'; import {Button} from '../../../../../entity/message/Button'; import {CompositeMessage} from '../../../../../entity/message/CompositeMessage'; import {ContentMessage} from '../../../../../entity/message/ContentMessage'; +import {ReadIndicator} from '../../ReadIndicator'; interface ContentAssetProps { asset: Asset; @@ -95,12 +96,12 @@ const ContentAsset = ({ ))} - {/**/} + ); case AssetType.FILE: @@ -109,13 +110,12 @@ const ContentAsset = ({
- {/**/} +
); } @@ -125,13 +125,12 @@ const ContentAsset = ({
- {/**/} +
); } @@ -141,13 +140,12 @@ const ContentAsset = ({
- {/**/} +
); } @@ -161,13 +159,12 @@ const ContentAsset = ({ isFocusable={isMessageFocused} /> - {/**/} + ); case AssetType.LOCATION: diff --git a/src/script/components/MessagesList/Message/ReadIndicator/ReadIndicator.styles.ts b/src/script/components/MessagesList/Message/ReadIndicator/ReadIndicator.styles.ts index b71a9e65a81..4c757fde492 100644 --- a/src/script/components/MessagesList/Message/ReadIndicator/ReadIndicator.styles.ts +++ b/src/script/components/MessagesList/Message/ReadIndicator/ReadIndicator.styles.ts @@ -25,16 +25,12 @@ export const ReadReceiptText: CSSObject = { verticalAlign: 'bottom', }; -export const ReadIndicatorStyles = (showIconOnly = false, isInAsset = false): CSSObject => ({ +export const ReadIndicatorStyles = (showIconOnly = false): CSSObject => ({ color: 'var(--gray-70)', fontSize: 'var(--font-size-small)', fontWeight: 'var(--font-weight-medium)', lineHeight: 'var(--line-height-sm)', - ...(isInAsset && { - marginTop: '8px', - }), - svg: { width: '10px', minHeight: '10px', @@ -48,8 +44,13 @@ export const ReadIndicatorStyles = (showIconOnly = false, isInAsset = false): CS marginLeft: '8px', }), + '.message-asset &': { + marginTop: '8px', + marginLeft: '12px', + }, + ...(!showIconOnly && { - opacity: 0, + opacity: 1, '.message:hover &': { opacity: '1', }, diff --git a/src/script/components/MessagesList/Message/ReadIndicator/ReadIndicator.tsx b/src/script/components/MessagesList/Message/ReadIndicator/ReadIndicator.tsx index 0daca7a97c0..8646cb85734 100644 --- a/src/script/components/MessagesList/Message/ReadIndicator/ReadIndicator.tsx +++ b/src/script/components/MessagesList/Message/ReadIndicator/ReadIndicator.tsx @@ -31,7 +31,6 @@ interface ReadIndicatorProps { is1to1Conversation?: boolean; isLastDeliveredMessage?: boolean; showIconOnly?: boolean; - isInAsset?: boolean; onClick: (message: Message) => void; } @@ -40,7 +39,6 @@ export const ReadIndicator = ({ is1to1Conversation = false, isLastDeliveredMessage = false, showIconOnly = false, - isInAsset = false, onClick, }: ReadIndicatorProps) => { const {readReceipts} = useKoSubscribableChildren(message, ['readReceipts']); @@ -54,7 +52,7 @@ export const ReadIndicator = ({ const showDeliveredMessage = isLastDeliveredMessage && readReceiptText === ''; return ( - + {showDeliveredMessage && ( {t('conversationMessageDelivered')} )} @@ -75,7 +73,7 @@ export const ReadIndicator = ({ return (