feat: add styles for unsupported message attachment (#294)

GetStream · May 9, 2024 · 0e59ba5 · 0e59ba5
1 parent f67dca7
commit 0e59ba5
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 0 deletions.
diff --git a/src/v2/styles/AttachmentList/AttachmentList-layout.scss b/src/v2/styles/AttachmentList/AttachmentList-layout.scss
@@ -253,6 +253,32 @@
     }
   }
 
+  .str-chat__message-attachment-unsupported {
+    @include utils.flex-row-center;
+    padding: var(--str-chat__spacing-2);
+    column-gap: var(--str-chat__spacing-4);
+    margin: var(--str-chat__attachment-margin);
+
+    .str-chat__file-icon {
+      width: calc(var(--str-chat__spacing-px)* 30);
+    }
+
+    .str-chat__message-attachment-unsupported__metadata {
+      min-width: 0;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+
+    }
+
+    .str-chat__message-attachment-unsupported__title {
+      @include utils.ellipsis-text;
+      max-width: 100%;
+    }
+  }
+
   .str-chat__message-attachment-file--item,
   .str-chat__message-attachment-audio-widget {
     @include utils.flex-row-center;

diff --git a/src/v2/styles/AttachmentList/AttachmentList-theme.scss b/src/v2/styles/AttachmentList/AttachmentList-theme.scss
@@ -320,10 +320,18 @@
     background-size: 24px 24px;
   }
 
+  .str-chat__message-attachment-unsupported,
   .str-chat__message-attachment-file--item {
     @include utils.component-layer-overrides('file-attachment');
   }
 
+  .str-chat__message-attachment-unsupported {
+    .str-chat__message-attachment-unsupported__title {
+      font: var(--str-chat__subtitle-medium-text);
+      word-break: keep-all;
+    }
+  }
+
   .str-chat__message-attachment-file--item,
   .str-chat__message-attachment-audio-widget {
     .str-chat__message-attachment-file--item-name,

diff --git a/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-layout.scss b/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-layout.scss
@@ -47,6 +47,7 @@
     }
   }
 
+  .str-chat__attachment-preview-unsupported,
   .str-chat__attachment-preview-voice-recording,
   .str-chat__attachment-preview-file {
     display: flex;
@@ -68,6 +69,7 @@
       align-items: flex-start;
       justify-content: center;
 
+      .str-chat__attachment-preview-title,
       .str-chat__attachment-preview-file-name {
         @include utils.ellipsis-text;
         max-width: 100%;

diff --git a/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss b/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss
@@ -107,10 +107,12 @@
     }
   }
 
+  .str-chat__attachment-preview-unsupported,
   .str-chat__attachment-preview-voice-recording,
   .str-chat__attachment-preview-file {
     @include utils.component-layer-overrides('attachment-preview-file');
 
+    .str-chat__attachment-preview-title,
     .str-chat__attachment-preview-file-name {
       font: var(--str-chat__subtitle-medium-text);
     }