feat: pass in all props to quote component

converted quote primary text to styled components

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

@@ -39,8 +39,7 @@ export const MessageQuote = (props: Props) => {
   const {
     text,
     attachment,
-    // TODO
+    isFromMe,
-    // isFromMe,
     sender: quoteAuthor,
     authorProfileName,
     authorName,
@@ -106,10 +105,10 @@ export const MessageQuote = (props: Props) => {
       attachment={attachment}
       isIncoming={direction === 'incoming'}
       sender={displayedPubkey}
-      authorProfileName={quote.authorProfileName}
+      authorProfileName={authorProfileName}
-      authorName={quote.authorName}
+      authorName={authorName}
-      referencedMessageNotFound={quote.referencedMessageNotFound || false}
+      referencedMessageNotFound={referencedMessageNotFound || false}
-      isFromMe={quote.isFromMe || false}
+      isFromMe={isFromMe || false}
     />
   );
 };

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

@@ -73,6 +73,13 @@ const StyledQuote = styled.div<{
   cursor: ${props => (props.onClick ? 'pointer' : 'auto')};
 `;
 
+const StyledQuoteTextContent = styled.div`
+  flex-grow: 1;
+  padding-inline-start: 10px;
+  padding-inline-end: 10px;
+  max-width: 100%;
+`;
+
 export const Quote = (props: QuotePropsWithListener) => {
   const [imageBroken, setImageBroken] = useState(false);
   const handleImageErrorBound = () => {
@@ -93,14 +100,13 @@ export const Quote = (props: QuotePropsWithListener) => {
         hasAttachment={Boolean(!isEmpty(attachment))}
         isIncoming={isIncoming}
         onClick={onClick}
-        role="button"
       >
         <QuoteIconContainer
           attachment={attachment}
           handleImageErrorBound={handleImageErrorBound}
           imageBroken={imageBroken}
         />
-        <div className="module-quote__primary">
+        <StyledQuoteTextContent>
           <QuoteAuthor
             authorName={props.authorName}
             author={props.sender}
@@ -111,7 +117,7 @@ export const Quote = (props: QuotePropsWithListener) => {
           />
           <QuoteGenericFile {...props} />
           <QuoteText isIncoming={isIncoming} text={text} attachment={attachment} />
-        </div>
+        </StyledQuoteTextContent>
       </StyledQuote>
     </div>
   );

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

@@ -11,7 +11,7 @@ const StyledQuoteAuthor = styled.div<{ isIncoming: boolean }>`
   font-size: 15px;
   font-weight: bold;
   line-height: 18px;
-  margin-bottom: 5px;
+  margin-bottom: 2px;
   overflow-x: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

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

@@ -7,6 +7,7 @@ import { MessageBody } from '../MessageBody';
 import { MIME } from '../../../../../types';
 import { GoogleChrome } from '../../../../../util';
 import styled from 'styled-components';
+import { isEmpty } from 'lodash';
 
 const StyledQuoteText = styled.div<{ isIncoming: boolean }>`
   display: -webkit-box;
@@ -66,7 +67,7 @@ export const QuoteText = (
   const convoId = useSelector(getSelectedConversationKey);
   const isGroup = !useIsPrivate(convoId);
 
-  if (attachment) {
+  if (attachment && !isEmpty(attachment)) {
     const { contentType, isVoiceMessage } = attachment;
 
     const typeLabel = getTypeLabel({ contentType, isVoiceMessage });