feat: converted quote image to styled components

remove border on quote if there is an attachment

ts/components/conversation/message/message-content/MessageQuote.tsx

@@ -48,7 +48,7 @@ export const MessageQuote = (props: Props) => {
     referencedMessageNotFound,
   } = quote;
 
-  const quoteText = text || window.i18n('originalMessageNotFound');
+  const quoteText = text || null;
   const quoteNotFound = referencedMessageNotFound || false;
 
   const shortenedPubkey = PubKey.shorten(quoteAuthor);

ts/components/conversation/message/message-content/quote/Quote.tsx

@@ -11,6 +11,7 @@ import { QuoteGenericFile } from './QuoteGenericFile';
 import { QuoteText } from './QuoteText';
 import { QuoteIconContainer } from './QuoteIconContainer';
 import styled from 'styled-components';
+import { isEmpty } from 'lodash';
 
 export type QuotePropsWithoutListener = {
   attachment?: QuotedAttachmentType;
@@ -54,6 +55,7 @@ function validateQuote(quote: QuotePropsWithoutListener): boolean {
 }
 
 const StyledQuote = styled.div<{
+  hasAttachment: boolean;
   isIncoming: boolean;
   onClick: ((e: MouseEvent<HTMLDivElement>) => void) | undefined;
 }>`
@@ -63,11 +65,11 @@ const StyledQuote = styled.div<{
   flex-direction: row;
   align-items: stretch;
   overflow: hidden;
-  border-left: 4px solid
+  ${props => !props.hasAttachment && 'border-left: 4px solid;'}
-    ${props =>
+  border-color: ${props =>
-      props.isIncoming
+    props.isIncoming
-        ? 'var(--message-bubbles-received-text-color)'
+      ? 'var(--message-bubbles-received-text-color)'
-        : 'var(--message-bubbles-sent-text-color)'};
+      : 'var(--message-bubbles-sent-text-color)'};
   cursor: ${props => (props.onClick ? 'pointer' : 'auto')};
 `;
 
@@ -87,7 +89,12 @@ export const Quote = (props: QuotePropsWithListener) => {
 
   return (
     <div className={classNames('module-quote-container')}>
-      <StyledQuote isIncoming={isIncoming} onClick={onClick} role="button">
+      <StyledQuote
+        hasAttachment={Boolean(!isEmpty(attachment))}
+        isIncoming={isIncoming}
+        onClick={onClick}
+        role="button"
+      >
         <QuoteIconContainer
           attachment={attachment}
           handleImageErrorBound={handleImageErrorBound}

ts/components/conversation/message/message-content/quote/QuoteImage.tsx

@@ -2,6 +2,22 @@ import React from 'react';
 import classNames from 'classnames';
 import { useDisableDrag } from '../../../../../hooks/useDisableDrag';
 import { useEncryptedFileFetch } from '../../../../../hooks/useEncryptedFileFetch';
+import styled from 'styled-components';
+
+const StyledQuoteImage = styled.div`
+  flex: initial;
+  min-width: 54px;
+  width: 54px;
+  max-height: 54px;
+  position: relative;
+  border-radius: 4px;
+  overflow: hidden;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;
 
 export const QuoteImage = (props: {
   handleImageErrorBound: () => void;
@@ -29,7 +45,7 @@ export const QuoteImage = (props: {
   ) : null;
 
   return (
-    <div className="module-quote__icon-container">
+    <StyledQuoteImage>
       <img
         src={srcData}
         alt={window.i18n('quoteThumbnailAlt')}
@@ -37,6 +53,6 @@ export const QuoteImage = (props: {
         onError={handleImageErrorBound}
       />
       {iconElement}
-    </div>
+    </StyledQuoteImage>
   );
 };