diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index f7b11b558..f3ad5c529 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -152,10 +152,17 @@
background: white;
color: black;
border-radius: var(--border-radius-message-box);
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+ background-color: white; // TODO theming update // var(--message-link-preview-background-color)
margin: var(--padding-link-preview);
.module-image {
- margin: -1px;
+ margin-bottom: 0;
+ border-radius: 0;
+ margin-top: -1px;
+ margin-left: -1px;
+ border-top-left-radius: var(--border-radius-message-box);
}
&__text {
@@ -164,25 +171,23 @@
}
.module-message__link-preview__content {
- padding: 0 0 var(--margins-xs) 0;
display: flex;
flex-direction: row;
align-items: center;
flex-grow: 1;
- margin-left: var(--margins-sm);
}
.module-message__link-preview__image_container {
- margin: -2px;
margin-inline-end: 8px;
display: inline-block;
}
.module-message__link-preview__icon_container {
+ display: flex;
+ justify-content: center;
flex: initial;
- min-width: 54px;
- width: 54px;
- max-height: 54px;
+ width: 100px;
+ height: 100px;
position: relative;
margin-left: -2px;
margin-inline-end: 8px;
diff --git a/ts/components/conversation/message/message-content/MessageLinkPreview.tsx b/ts/components/conversation/message/message-content/MessageLinkPreview.tsx
index df808902b..82715f5d8 100644
--- a/ts/components/conversation/message/message-content/MessageLinkPreview.tsx
+++ b/ts/components/conversation/message/message-content/MessageLinkPreview.tsx
@@ -1,13 +1,14 @@
import classNames from 'classnames';
import React from 'react';
import { isImageAttachment } from '../../../../types/Attachment';
-import { ImageGrid } from '../../ImageGrid';
import { Image } from '../../Image';
import { MessageRenderingProps } from '../../../../models/messageType';
import { useDispatch, useSelector } from 'react-redux';
-import { getMessageLinkPreviewProps } from '../../../../state/selectors/conversations';
+import {
+ getIsMessageSelectionMode,
+ getMessageLinkPreviewProps,
+} from '../../../../state/selectors/conversations';
import { SessionIcon } from '../../../icon';
-import { MINIMUM_LINK_PREVIEW_IMAGE_WIDTH } from '../message-item/Message';
import { showLinkVisitWarningDialog } from '../../../dialog/SessionConfirm';
export type MessageLinkPreviewSelectorProps = Pick<
@@ -20,9 +21,12 @@ type Props = {
messageId: string;
};
+const linkPreviewsImageSize = 100;
+
export const MessageLinkPreview = (props: Props) => {
const selected = useSelector(state => getMessageLinkPreviewProps(state as any, props.messageId));
const dispatch = useDispatch();
+ const isMessageSelectionMode = useSelector(getIsMessageSelectionMode);
if (!selected) {
return null;
@@ -44,10 +48,11 @@ export const MessageLinkPreview = (props: Props) => {
}
const previewHasImage = first.image && isImageAttachment(first.image);
- const width = first.image && first.image.width;
- const isFullSizeImage = width && width >= MINIMUM_LINK_PREVIEW_IMAGE_WIDTH;
function openLinkFromPreview() {
+ if (isMessageSelectionMode) {
+ return;
+ }
if (previews?.length && previews[0].url) {
showLinkVisitWarningDialog(previews[0].url, dispatch);
}
@@ -59,23 +64,20 @@ export const MessageLinkPreview = (props: Props) => {
className={classNames('module-message__link-preview')}
onClick={openLinkFromPreview}
>
- {first.image && previewHasImage && isFullSizeImage ? (
-