diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 31f2aa42d..bb0167ae6 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -1061,66 +1061,6 @@
@include color-svg('../images/plus-36.svg', var(--button-icon-stroke-color));
}
-// Module: Staged Link Preview
-
-.module-staged-link-preview {
- position: relative;
- display: flex;
- flex-direction: row;
- align-items: flex-start;
-
- min-height: 65px;
- margin: var(--margins-xs);
-}
-.module-staged-link-preview--is-loading {
- align-items: center;
- justify-content: center;
-}
-.module-staged-link-preview__loading {
- color: var(--text-primary-color);
-
- font-size: 14px;
- text-align: center;
- flex-grow: 1;
- flex-shrink: 1;
-}
-.module-staged-link-preview__icon-container {
- margin-inline-end: 8px;
- padding: var(--margins-sm);
-}
-.module-staged-link-preview__content {
- margin-inline-end: 20px;
- padding: var(--margins-sm);
-}
-.module-staged-link-preview__title {
- font-weight: 500;
- font-size: 14px;
- line-height: 18px;
-
- overflow: hidden;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
-}
-.module-staged-link-preview__location {
- margin-top: 4px;
- font-size: var(--font-size-xs);
- height: 16px;
- letter-spacing: 0.25px;
- text-transform: uppercase;
-}
-.module-staged-link-preview__close-button {
- cursor: pointer;
- position: absolute;
- top: 5px;
- right: 5px;
-
- height: 16px;
- width: 16px;
-
- @include color-svg('../images/x-16.svg', var(--button-icon-stroke-color));
-}
-
// Module: Left Pane
.module-left-pane {
diff --git a/ts/components/conversation/SessionQuotedMessageComposition.tsx b/ts/components/conversation/SessionQuotedMessageComposition.tsx
index af8cc4af2..4993f8474 100644
--- a/ts/components/conversation/SessionQuotedMessageComposition.tsx
+++ b/ts/components/conversation/SessionQuotedMessageComposition.tsx
@@ -102,7 +102,7 @@ export const SessionQuotedMessageComposition = () => {
height={100}
width={100}
url={getAbsoluteAttachmentPath((firstImageAttachment as any).thumbnail.path)}
- softCorners={false}
+ softCorners={true}
/>
) : hasAudioAttachment ? (
@@ -127,6 +127,7 @@ export const SessionQuotedMessageComposition = () => {
iconSize="small"
onClick={removeQuotedMessage}
margin={'0 var(--margins-sm) 0 0'}
+ aria-label={window.i18n('close')}
/>
);
diff --git a/ts/components/conversation/StagedLinkPreview.tsx b/ts/components/conversation/StagedLinkPreview.tsx
index 09596b4aa..15f8e75fb 100644
--- a/ts/components/conversation/StagedLinkPreview.tsx
+++ b/ts/components/conversation/StagedLinkPreview.tsx
@@ -1,5 +1,4 @@
import React from 'react';
-import classNames from 'classnames';
import { Image } from './Image';
@@ -7,6 +6,9 @@ import { SessionSpinner } from '../basic/SessionSpinner';
import { StagedLinkPreviewImage } from './composition/CompositionBox';
import { isImage } from '../../types/MIME';
import { fromArrayBufferToBase64 } from '../../session/utils/String';
+import styled from 'styled-components';
+import { Flex } from '../basic/Flex';
+import { SessionIconButton } from '../icon';
type Props = {
isLoaded: boolean;
@@ -18,10 +20,37 @@ type Props = {
onClose: (url: string) => void;
};
+// Note Similar to QuotedMessageComposition
+const StyledStagedLinkPreview = styled(Flex)`
+ position: relative;
+ /* Same height as a loaded Image Attachment */
+ min-height: 132px;
+ border-top: 1px solid var(--border-color);
+`;
+
+const StyledImage = styled.div`
+ div {
+ border-radius: 4px;
+ overflow: hidden;
+ }
+`;
+
+const StyledText = styled(Flex)`
+ overflow: hidden;
+ text-overflow: ellipsis;
+ word-break: break-all;
+ -webkit-line-clamp: 1;
+ -webkit-box-orient: vertical;
+ display: -webkit-box;
+ font-weight: bold;
+ margin: 0 0 0 var(--margins-sm);
+`;
+
export const StagedLinkPreview = (props: Props) => {
const { isLoaded, onClose, title, image, domain, url } = props;
const isContentTypeImage = image && isImage(image.contentType);
+
if (isLoaded && !(title && domain)) {
return null;
}
@@ -33,42 +62,47 @@ export const StagedLinkPreview = (props: Props) => {
: '';
return (
-
- {isLoading ?
: null}
- {isLoaded && image && isContentTypeImage ? (
-
-
-
- ) : null}
- {isLoaded ? (
-
- ) : null}
-
+
);
};