diff --git a/src/v2/styles/Autocomplete/Autocomplete-layout.scss b/src/v2/styles/Autocomplete/Autocomplete-layout.scss index bbf864b0..986b930b 100644 --- a/src/v2/styles/Autocomplete/Autocomplete-layout.scss +++ b/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%; } } diff --git a/src/v2/styles/Autocomplete/Autocomplete-theme.scss b/src/v2/styles/Autocomplete/Autocomplete-theme.scss index af265b47..d1008cb1 100644 --- a/src/v2/styles/Autocomplete/Autocomplete-theme.scss +++ b/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; + } + } + } } diff --git a/src/v2/styles/LinkPreview/LinkPreview-layout.scss b/src/v2/styles/LinkPreview/LinkPreview-layout.scss index 680135c2..ba155dba 100644 --- a/src/v2/styles/LinkPreview/LinkPreview-layout.scss +++ b/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%; + } + } } \ No newline at end of file diff --git a/src/v2/styles/LinkPreview/LinkPreview-theme.scss b/src/v2/styles/LinkPreview/LinkPreview-theme.scss index 3b4ac7c5..c6f8a7e2 100644 --- a/src/v2/styles/LinkPreview/LinkPreview-theme.scss +++ b/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); + } } \ No newline at end of file