diff --git a/package/src/components/Attachment/Attachment.tsx b/package/src/components/Attachment/Attachment.tsx index 3ea96757ba..496e3c34a0 100644 --- a/package/src/components/Attachment/Attachment.tsx +++ b/package/src/components/Attachment/Attachment.tsx @@ -224,16 +224,17 @@ const useAudioAttachmentStyles = () => { const messageHasSingleAttachment = message.attachments?.length === 1; const messageHasCaption = !!message.text?.trim(); const messageIsQuotedReply = !!(message.quoted_message || message.quoted_message_id); + const shouldRemoveAudioAttachmentPadding = + messageIsQuotedReply && messageHasSingleAttachment && !messageHasCaption; const showBackgroundTransparent = - messageHasOnlySingleAttachment || - (messageIsQuotedReply && messageHasSingleAttachment && !messageHasCaption); + messageHasOnlySingleAttachment || shouldRemoveAudioAttachmentPadding; return useMemo(() => { return StyleSheet.create({ container: { paddingVertical: primitives.spacingXs, - paddingLeft: primitives.spacingXs, - paddingRight: primitives.spacingSm, + paddingLeft: shouldRemoveAudioAttachmentPadding ? 0 : primitives.spacingXs, + paddingRight: shouldRemoveAudioAttachmentPadding ? 0 : primitives.spacingSm, borderWidth: 0, backgroundColor: showBackgroundTransparent ? 'transparent' @@ -255,6 +256,9 @@ const useAudioAttachmentStyles = () => { color: semantics.chatTextIncoming, fontWeight: primitives.typographyFontWeightSemiBold, }, + leftContainer: { + padding: shouldRemoveAudioAttachmentPadding ? 0 : primitives.spacingXxs, + }, }); - }, [semantics, isMyMessage, showBackgroundTransparent]); + }, [shouldRemoveAudioAttachmentPadding, showBackgroundTransparent, isMyMessage, semantics]); }; diff --git a/package/src/components/Attachment/Audio/AudioAttachment.tsx b/package/src/components/Attachment/Audio/AudioAttachment.tsx index 111b93e1b8..b1eec79636 100644 --- a/package/src/components/Attachment/Audio/AudioAttachment.tsx +++ b/package/src/components/Attachment/Audio/AudioAttachment.tsx @@ -78,6 +78,7 @@ export type AudioAttachmentProps = { playPauseButton?: StyleProp; speedSettingsButton?: StyleProp; durationText?: StyleProp; + leftContainer?: StyleProp; }; }; @@ -215,7 +216,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => { style={[styles.container, container, containerStyle, stylesProps?.container]} testID={testID} > - + { fontWeight: primitives.typographyFontWeightSemiBold, lineHeight: primitives.typographyLineHeightTight, }, - leftContainer: { - padding: primitives.spacingXxs, - }, + leftContainer: {}, progressControlContainer: { flex: 1, },