feat: align the autocomplete and link preview styles with message composer addition (#328)

### 🎯 Goal

Needed for GetStream/stream-chat-react#2669

Author: MartinCupela

src/v2/styles/Autocomplete/Autocomplete-layout.scss

@@ -38,6 +38,16 @@
     padding: unset;
     margin: unset;
   }
+
+  .str-chat__suggestion-list--react {
+    overflow-y: unset;
+
+    .str-chat__suggestion-list-item {
+      > button {
+        width: 100%;
+      }
+    }
+  }
 }
 
 .str-chat__slash-command {
@@ -58,6 +68,8 @@
   .str-chat__user-item--name {
     @include utils.ellipsis-text;
     @include utils.prevent-glitch-text-overflow;
+    display: flex;
+    align-items: center;
     width: 100%;
   }
 }
@@ -69,6 +81,8 @@
 
   .str-chat__emoji-item--name {
     @include utils.ellipsis-text;
+    display: flex;
+    align-items: center;
     width: 100%;
   }
 }

src/v2/styles/Autocomplete/Autocomplete-theme.scss

@@ -156,6 +156,8 @@
 
 .str-chat__slash-command {
   @include utils.component-layer-overrides('slash-command');
+  text-align: left;
+  font: var(--str-chat__subtitle-text);
 
   .str-chat__slash-command-header {
     .str-chat__slash-command-name {
@@ -206,4 +208,13 @@
       background-color: var(--str-chat__suggestion-list-item--selected-background-color);
     }
   }
+
+  .str-chat__suggestion-list--react {
+    .str-chat__suggestion-list-item {
+      > button {
+        @include utils.button-reset;
+        text-decoration: none;
+      }
+    }
+  }
 }

src/v2/styles/LinkPreview/LinkPreview-layout.scss

@@ -46,4 +46,22 @@
     @include utils.button-reset;
     cursor: pointer;
   }
+}
+
+.str-chat__link-preview-card--loading {
+  .str-chat__link-preview-card__content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+
+    .str-chat__link-preview-card__content-title {
+      height: calc(var(--str-chat__spacing-px) * 16);
+      width: 100%
+    }
+
+    .str-chat__link-preview-card__content-description {
+      height: calc(var(--str-chat__spacing-px) * 12);
+      width: 100%;
+    }
+  }
 }

src/v2/styles/LinkPreview/LinkPreview-theme.scss

@@ -1,3 +1,9 @@
+@use '../utils';
+
+.str-chat {
+  --str-chat__link-preview-loading-state-color: var(--str-chat__disabled-color);
+}
+
 .str-chat__link-preview-card {
   .str-chat__link-preview-card__content {
     border-left: 2px solid var(--str-chat__primary-color);
@@ -14,4 +20,13 @@
   .str-chat__link-preview-card__dismiss-button svg path {
     fill: var(--str-chat__text-low-emphasis-color);
   }
+}
+
+.str-chat__link-preview-card--loading {
+  .str-chat__link-preview-card__content-title,
+  .str-chat__link-preview-card__content-description {
+    @include utils.loading-item-background('link-preview');
+    @include utils.loading-animation;
+    border-radius: calc(var(--str-chat__spacing-px) * 3);
+  }
 }