feat: converted quote author and text to styled components

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

@@ -1,7 +1,24 @@
-import classNames from 'classnames';
 import React = require('react');
 import { ContactName } from '../../../ContactName';
 import { PubKey } from '../../../../../session/types';
+import styled from 'styled-components';
+
+const StyledQuoteAuthor = styled.div<{ isIncoming: boolean }>`
+  color: ${props =>
+    props.isIncoming
+      ? 'var(--message-bubbles-received-text-color)'
+      : 'var(--message-bubbles-sent-text-color)'};
+  font-size: 15px;
+  font-weight: bold;
+  line-height: 18px;
+  margin-bottom: 5px;
+  overflow-x: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  .module-contact-name {
+    font-weight: bold;
+  }
+`;
 
 type QuoteAuthorProps = {
   author: string;
@@ -16,12 +33,7 @@ export const QuoteAuthor = (props: QuoteAuthorProps) => {
   const { authorProfileName, author, authorName, isFromMe, isIncoming } = props;
 
   return (
-    <div
-      className={classNames(
-        'module-quote__primary__author',
-        isIncoming ? 'module-quote__primary__author--incoming' : null
-      )}
-    >
+    <StyledQuoteAuthor isIncoming={isIncoming}>
       {isFromMe ? (
         window.i18n('you')
       ) : (
@@ -33,6 +45,6 @@ export const QuoteAuthor = (props: QuoteAuthorProps) => {
           shouldShowPubkey={Boolean(props.showPubkeyForAuthor)}
         />
       )}
-    </div>
+    </StyledQuoteAuthor>
   );
 };

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

@@ -7,6 +7,34 @@ import classNames from 'classnames';
 import { MessageBody } from '../MessageBody';
 import { MIME } from '../../../../../types';
 import { GoogleChrome } from '../../../../../util';
+import styled from 'styled-components';
+
+const StyledQuoteText = styled.div<{ isIncoming: boolean }>`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+
+  font-size: 15px;
+  line-height: 18px;
+  text-align: start;
+
+  overflow: hidden;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
+
+  color: ${props =>
+    props.isIncoming
+      ? 'var(--message-bubbles-received-text-color)'
+      : 'var(--message-bubbles-sent-text-color)'};
+  a {
+    color: ${props =>
+      props.isIncoming
+        ? 'var(--color-received-message-text)'
+        : 'var(--message-bubbles-sent-text-color)'};
+  }
+`;
 
 function getTypeLabel({
   contentType,
@@ -41,15 +69,9 @@ export const QuoteText = (
 
   if (text) {
     return (
-      <div
-        dir="auto"
-        className={classNames(
-          'module-quote__primary__text',
-          isIncoming ? 'module-quote__primary__text--incoming' : null
-        )}
-      >
+      <StyledQuoteText isIncoming={isIncoming} dir="auto">
         <MessageBody text={text} disableLinks={true} disableJumbomoji={true} isGroup={isGroup} />
-      </div>
+      </StyledQuoteText>
     );
   }