feat: use quoteicon component in quoteimage

make sure to load message text is it exists for all quotes

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

@@ -24,7 +24,7 @@ const StyledQuoteIconContainer = styled.div`
   position: relative;
 `;
 
-const StyledQuoteIcon = styled.div`
+export const StyledQuoteIcon = styled.div`
   position: absolute;
   top: 0;
   right: 0;
@@ -37,7 +37,7 @@ const StyledQuoteIcon = styled.div`
   justify-content: center;
 `;
 
-const StyledQuoteIconBackground = styled.div`
+export const StyledQuoteIconBackground = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -58,11 +58,16 @@ const StyledQuoteIconBackground = styled.div`
   }
 `;
 
+export type QuoteIconTypes = Extract<
+  SessionIconType,
+  'file' | 'image' | 'play' | 'movie' | 'microphone'
+>;
+
 type QuoteIconProps = {
-  icon: Extract<SessionIconType, 'file' | 'image' | 'play' | 'movie' | 'microphone'>;
+  icon: QuoteIconTypes;
 };
 
-const QuoteIcon = (props: QuoteIconProps) => {
+export const QuoteIcon = (props: QuoteIconProps) => {
   const { icon } = props;
   const iconProps = icons[icon];
 

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import classNames from 'classnames';
 import { useDisableDrag } from '../../../../../hooks/useDisableDrag';
 import { useEncryptedFileFetch } from '../../../../../hooks/useEncryptedFileFetch';
 import styled from 'styled-components';
+import { QuoteIcon, QuoteIconTypes } from './QuoteIconContainer';
 
 const StyledQuoteImage = styled.div`
   flex: initial;
@@ -23,7 +23,7 @@ export const QuoteImage = (props: {
   handleImageErrorBound: () => void;
   url: string;
   contentType: string;
-  icon?: string;
+  icon?: QuoteIconTypes;
 }) => {
   const { url, icon, contentType, handleImageErrorBound } = props;
   const disableDrag = useDisableDrag();
@@ -31,18 +31,7 @@ export const QuoteImage = (props: {
   const { loading, urlToLoad } = useEncryptedFileFetch(url, contentType, false);
   const srcData = !loading ? urlToLoad : '';
 
-  const iconElement = icon ? (
-    <div className="module-quote__icon-container__inner">
-      <div className="module-quote__icon-container__circle-background">
-        <div
-          className={classNames(
-            'module-quote__icon-container__icon',
-            `module-quote__icon-container__icon--${icon}`
-          )}
-        />
-      </div>
-    </div>
-  ) : null;
+  const iconElement = icon ? <QuoteIcon icon={icon} /> : null;
 
   return (
     <StyledQuoteImage>

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

@@ -55,7 +55,13 @@ function getTypeLabel({
   if (MIME.isAudio(contentType)) {
     return window.i18n('audio');
   }
-
+  if (
+    !GoogleChrome.isVideoTypeSupported(contentType) &&
+    !GoogleChrome.isImageTypeSupported(contentType) &&
+    !MIME.isAudio(contentType)
+  ) {
+    return window.i18n('document');
+  }
   return;
 }
 
@@ -71,7 +77,7 @@ export const QuoteText = (
     const { contentType, isVoiceMessage } = attachment;
 
     const typeLabel = getTypeLabel({ contentType, isVoiceMessage });
-    if (typeLabel) {
+    if (typeLabel && !text) {
       return <div>{typeLabel}</div>;
     }
   }