styling attachment error mode

app/client/web/src/constants/Strings.ts

@@ -1,4 +1,5 @@
 export const en = {
+  processingError: 'Attachment Error',
   unknownContact: 'Unknown Contact',
   encrypted: 'Encrypted',
   unknown: 'Unknown',
@@ -254,7 +255,8 @@ export const en = {
 }
 
 export const fr = {
-  unknownContact: 'Contact inconnu',
+  processingError: 'erreur de Pièce Jointe',
+  unknownContact: 'Contact Inconnu',
   encrypted: 'Crypté',
   unknown: 'Inconnu',
   sealed: 'Scellé',
@@ -510,6 +512,7 @@ export const fr = {
 }
 
 export const sp = {
+  processingError: 'Error al Adjuntar',
   unkownContact: 'Contacto Desconocido',
   encrypted: 'Cifrado',
   unknown: 'Desconocido',
@@ -765,6 +768,7 @@ export const sp = {
 }
 
 export const pt = {
+  processingError: 'Erro de Anexo',
   unknownContact: 'Contato Desconhecido',
   encrypted: 'Criptografado',
   unknown: 'Desconhecido',
@@ -1020,6 +1024,7 @@ export const pt = {
 }
 
 export const de = {
+  processingError: 'Anhangsfehler',
   unknwonContact: 'Unbekannter Kontakt',
   encrypted: 'Verschlüsselt',
   unknown: 'Unbekannt',
@@ -1275,6 +1280,7 @@ export const de = {
 }
 
 export const ru = {
+  processingError: 'Ошибка прикрепления',
   unknownContact: 'Неизвестный контакт',
   encrypted: 'Зашифрованный',
   unknown: 'Неизвестно',

app/client/web/src/message/Message.module.css

@@ -51,12 +51,13 @@
   } 
 
   .failed {
-    width: 64px;
-    height: 64px;
     margin-left: 72px;
     margin-right: 32px;
     margin-top: 8px;
     border-radius: 8px;
+    color: var(--mantine-color-red-9);
+    display: flex;
+    gap: 8px;
   }
 
   .content {

app/client/web/src/message/Message.tsx

@@ -10,7 +10,7 @@ import { BinaryAsset } from './binaryAsset/BinaryAsset';
 import type { MediaAsset } from '../conversation/Conversation';
 import { useMessage } from './useMessage.hook';
 import failed from '../images/failed.png'
-import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
+import { IconChevronLeft, IconChevronRight, IconFileAlert } from '@tabler/icons-react';
 import { useResizeDetector } from 'react-resize-detector';
 
 export function Message({ topic, card, profile, host }: { topic: Topic, card: Card | null, profile: Profile | null, host: boolean }) {
@@ -118,7 +118,10 @@ export function Message({ topic, card, profile, host }: { topic: Topic, card: Ca
         <Skeleton height={64} circle mb="xl" />
       )}
       { !locked && media.length > 0 && transform !== 'complete' && transform !== 'incomplete' && (
-        <Image className={classes.failed} src={failed} fit="contain" />
+        <div className={classes.failed}>
+          <IconFileAlert />
+          <span>{ state.strings.processingError }</span>
+        </div>
       )}
     </div>
   )