feat: link message reply done

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 {

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 ? (
               <div style={{ margin: '0 var(--margins-xs) 0 0' }}>
@@ -127,6 +127,7 @@ export const SessionQuotedMessageComposition = () => {
         iconSize="small"
         onClick={removeQuotedMessage}
         margin={'0 var(--margins-sm) 0 0'}
+        aria-label={window.i18n('close')}
       />
     </QuotedMessageComposition>
   );

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 (
-    <div
+    <StyledStagedLinkPreview
-      className={classNames(
+      container={true}
-        'module-staged-link-preview',
+      justifyContent={isLoading ? 'center' : 'space-between'}
-        isLoading ? 'module-staged-link-preview--is-loading' : null
+      alignItems="center"
-      )}
+      width={'100%'}
+      padding={'var(--margins-md)'}
     >
-      {isLoading ? <SessionSpinner loading={isLoading} /> : null}
+      <Flex
-      {isLoaded && image && isContentTypeImage ? (
+        container={true}
-        <div className="module-staged-link-preview__icon-container">
+        justifyContent={isLoading ? 'center' : 'flex-start'}
-          <Image
+        alignItems={'center'}
-            alt={window.i18n('stagedPreviewThumbnail', [domain || ''])}
+      >
-            softCorners={true}
+        {isLoading ? <SessionSpinner loading={isLoading} /> : null}
-            height={72}
+        {isLoaded && image && isContentTypeImage ? (
-            width={72}
+          <StyledImage>
-            url={dataToRender}
+            <Image
-            attachment={image as any}
+              alt={window.i18n('stagedPreviewThumbnail', [domain || ''])}
-          />
+              attachment={image as any}
-        </div>
+              height={100}
-      ) : null}
+              width={100}
-      {isLoaded ? (
+              url={dataToRender}
-        <div className="module-staged-link-preview__content">
+              softCorners={true}
-          <div className="module-staged-link-preview__title">{title}</div>
+            />
-
+          </StyledImage>
-          <div className="module-staged-link-preview__footer">
+        ) : null}
-            <div className="module-staged-link-preview__location">{domain}</div>
+        {isLoaded ? <StyledText>{title}</StyledText> : null}
-          </div>
+      </Flex>
-        </div>
+      <SessionIconButton
-      ) : null}
+        iconType="exit"
-      <button
+        iconColor="var(--chat-buttons-icon-color)"
-        type="button"
+        iconSize="small"
-        className="module-staged-link-preview__close-button"
         onClick={() => {
           onClose(url || '');
         }}
+        margin={'0 var(--margins-sm) 0 0'}
         aria-label={window.i18n('close')}
+        style={{
+          position: isLoading ? 'absolute' : undefined,
+          right: isLoading ? 'var(--margins-sm)' : undefined,
+        }}
       />
-    </div>
+    </StyledStagedLinkPreview>
   );
 };