stream-chat-react 8.1.0 → 8.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/dist/browser.full-bundle.js +45 -28
  2. package/dist/browser.full-bundle.js.map +1 -1
  3. package/dist/browser.full-bundle.min.js +1 -1
  4. package/dist/browser.full-bundle.min.js.map +1 -1
  5. package/dist/components/AutoCompleteTextarea/Item.d.ts.map +1 -1
  6. package/dist/components/AutoCompleteTextarea/List.d.ts.map +1 -1
  7. package/dist/components/AutoCompleteTextarea/Textarea.d.ts.map +1 -1
  8. package/dist/components/Channel/Channel.d.ts.map +1 -1
  9. package/dist/components/Channel/Channel.js +5 -8
  10. package/dist/components/Message/MessageCommerce.d.ts.map +1 -1
  11. package/dist/components/Message/MessageCommerce.js +2 -1
  12. package/dist/components/Message/MessageLivestream.d.ts.map +1 -1
  13. package/dist/components/Message/MessageLivestream.js +2 -1
  14. package/dist/components/Message/MessageSimple.d.ts.map +1 -1
  15. package/dist/components/Message/MessageSimple.js +2 -1
  16. package/dist/components/MessageList/VirtualizedMessageList.d.ts.map +1 -1
  17. package/dist/components/MessageList/VirtualizedMessageList.js +2 -1
  18. package/dist/components/MessageList/hooks/useMessageListElements.d.ts.map +1 -1
  19. package/dist/components/MessageList/hooks/useMessageListElements.js +5 -2
  20. package/dist/components/MessageList/utils.d.ts +1 -0
  21. package/dist/components/MessageList/utils.d.ts.map +1 -1
  22. package/dist/components/MessageList/utils.js +27 -13
  23. package/dist/constants/messageTypes.d.ts +5 -0
  24. package/dist/constants/messageTypes.d.ts.map +1 -0
  25. package/dist/constants/messageTypes.js +4 -0
  26. package/dist/css/index.css +1 -1
  27. package/dist/index.cjs.js +45 -28
  28. package/dist/index.cjs.js.map +1 -1
  29. package/dist/scss/ActionsBox.scss +2 -2
  30. package/dist/scss/Attachment.scss +1 -1
  31. package/dist/scss/ChannelList.scss +6 -0
  32. package/dist/scss/ChannelSearch.scss +12 -1
  33. package/dist/scss/Message.scss +86 -80
  34. package/dist/scss/MessageInput.scss +8 -2
  35. package/dist/scss/MessageInputFlat.scss +4 -0
  36. package/dist/scss/MessageNotification.scss +6 -18
  37. package/dist/scss/Thread.scss +20 -4
  38. package/dist/scss/_base.scss +4 -0
  39. package/dist/stories/connected-user.stories.d.ts.map +1 -1
  40. package/dist/stories/connected-user.stories.js +13 -39
  41. package/dist/stories/mark-read.stories.d.ts +4 -0
  42. package/dist/stories/mark-read.stories.d.ts.map +1 -0
  43. package/dist/stories/mark-read.stories.js +77 -0
  44. package/dist/stories/utils.d.ts +8 -0
  45. package/dist/stories/utils.d.ts.map +1 -1
  46. package/dist/stories/utils.js +33 -0
  47. package/dist/types/types.d.ts +2 -1
  48. package/dist/types/types.d.ts.map +1 -1
  49. package/dist/version.d.ts +1 -1
  50. package/dist/version.js +1 -1
  51. package/package.json +9 -5
package/dist/scss/ActionsBox.scss CHANGED
@@ -41,8 +41,8 @@
41
41
 
42
42
  .dark.str-chat {
43
43
  .str-chat__message-actions-box {
44
- background: var(--grey);
45
- background-image: linear-gradient(-180deg, var(--bg-gradient-start), var(--bg-gradient-end));
44
+ background: var(--dark-grey);
45
+ background-image: linear-gradient(-180deg, var(--dark-grey), var(--black20));
46
46
  box-shadow: 0 0 2px 0 var(--border), 0 1px 0 0 var(--border), 0 1px 8px 0 var(--border);
47
47
 
48
48
  button {
package/dist/scss/Attachment.scss CHANGED
@@ -166,7 +166,7 @@
166
166
  }
167
167
 
168
168
  &--media {
169
- max-width: 300px;
169
+ width: 300px;
170
170
  }
171
171
 
172
172
  &-card {
package/dist/scss/ChannelList.scss CHANGED
@@ -17,6 +17,12 @@
17
17
  }
18
18
  }
19
19
 
20
+ .dark.str-chat {
21
+ .str-chat__channel-list-messenger {
22
+ background: var(--dark-grey);
23
+ }
24
+ }
25
+
20
26
  .str-chat__button {
21
27
  background: var(--white);
22
28
  box-shadow: 0 1px 1px 0 var(--black10), 0 1px 4px 0 var(--black10);
package/dist/scss/ChannelSearch.scss CHANGED
@@ -102,10 +102,21 @@
102
102
  }
103
103
 
104
104
  .dark.str-chat {
105
- .str-chat__channel-search {
105
+ .str-chat__channel-search,
106
+ .str-chat__channel-search-container.inline {
107
+ background: var(--dark-grey);
108
+ color: var(--white);
109
+
106
110
  input {
107
111
  background: var(--grey-gainsboro);
112
+ }
113
+
114
+ .str-chat__channel-search-result {
108
115
  color: var(--white);
116
+
117
+ &:hover {
118
+ background: var(--white5);
119
+ }
109
120
  }
110
121
  }
111
122
  }
package/dist/scss/Message.scss CHANGED
@@ -2,6 +2,14 @@
2
2
  display: block;
3
3
  position: relative;
4
4
 
5
+ /*
6
+ min-width in a flex context: While the default min-width value is 0, for flex items it is auto.
7
+ This can make block elements take up much more space than desired, resulting in overflow.
8
+ */
9
+ .str-chat__message-inner {
10
+ min-width: 0;
11
+ }
12
+
5
13
  .quoted-message {
6
14
  display: flex;
7
15
  align-items: flex-end;
@@ -63,15 +71,13 @@
63
71
  &-attachment--img,
64
72
  &-attachment-card,
65
73
  .str-chat__gallery {
66
- border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
67
- calc(var(--border-radius-sm) / 2);
74
+ border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
68
75
  }
69
76
 
70
77
  &.str-chat__message--has-text.str-chat__message--has-attachment {
71
78
  .str-chat__message-attachment--img,
72
79
  .str-chat__message-attachment-card {
73
- border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
74
- calc(var(--border-radius-sm) / 2);
80
+ border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
75
81
  }
76
82
  }
77
83
 
@@ -80,28 +86,24 @@
80
86
  .str-chat__message {
81
87
  &-attachment--img,
82
88
  &-attachment-card {
83
- border-radius: var(--border-radius) var(--border-radius)
84
- calc(var(--border-radius-sm) / 2) var(--border-radius);
89
+ border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
85
90
  }
86
91
  }
87
92
 
88
93
  &.str-chat__message--has-text.str-chat__message--has-attachment {
89
94
  .str-chat__message-attachment--img,
90
95
  .str-chat__message-attachment-card {
91
- border-radius: var(--border-radius) var(--border-radius)
92
- calc(var(--border-radius-sm) / 2) var(--border-radius);
96
+ border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
93
97
  }
94
98
  }
95
99
 
96
100
  .str-chat__gallery {
97
- border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
98
- var(--border-radius);
101
+ border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
99
102
  }
100
103
 
101
104
  &.str-chat__message--has-text {
102
105
  .str-chat__gallery {
103
- border-radius: var(--border-radius) var(--border-radius)
104
- calc(var(--border-radius-sm) / 2) var(--border-radius);
106
+ border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
105
107
  }
106
108
  }
107
109
  }
@@ -115,16 +117,14 @@
115
117
  &-attachment--img,
116
118
  &-attachment-card,
117
119
  .str-chat__gallery {
118
- border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
119
- calc(var(--border-radius-sm) / 2);
120
+ border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
120
121
  }
121
122
 
122
123
  &.str-chat__message--has-text.str-chat__message--has-attachment {
123
124
  .str-chat__message-attachment--img,
124
125
  .str-chat__message-attachment-card,
125
126
  .str-chat__gallery {
126
- border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
127
- calc(var(--border-radius-sm) / 2);
127
+ border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
128
128
  }
129
129
  }
130
130
 
@@ -133,8 +133,7 @@
133
133
  &-attachment--img,
134
134
  &-attachment-card,
135
135
  .str-chat__gallery {
136
- border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
137
- calc(var(--border-radius-sm) / 2) var(--border-radius);
136
+ border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
138
137
  }
139
138
  }
140
139
 
@@ -156,16 +155,14 @@
156
155
  &-attachment--img,
157
156
  &-attachment-card,
158
157
  .str-chat__gallery {
159
- border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
160
- calc(var(--border-radius-sm) / 2);
158
+ border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
161
159
  }
162
160
 
163
161
  &.str-chat__message--has-text.str-chat__message--has-attachment {
164
162
  .str-chat__message-attachment--img,
165
163
  .str-chat__message-attachment-card,
166
164
  .str-chat__gallery {
167
- border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
168
- calc(var(--border-radius-sm) / 2);
165
+ border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
169
166
  }
170
167
  }
171
168
 
@@ -174,8 +171,7 @@
174
171
  &-attachment--img,
175
172
  &-attachment-card,
176
173
  .str-chat__gallery {
177
- border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
178
- calc(var(--border-radius-sm) / 2) var(--border-radius);
174
+ border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
179
175
  }
180
176
  }
181
177
 
@@ -207,16 +203,14 @@
207
203
  .str-chat__message {
208
204
  &-text {
209
205
  &-inner {
210
- border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
211
- calc(var(--border-radius-sm) / 2);
206
+ border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
212
207
  }
213
208
  }
214
209
 
215
210
  &--me {
216
211
  .str-chat__message-text {
217
212
  &-inner {
218
- border-radius: var(--border-radius) var(--border-radius)
219
- calc(var(--border-radius-sm) / 2) var(--border-radius);
213
+ border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
220
214
  }
221
215
  }
222
216
  }
@@ -227,12 +221,10 @@
227
221
  .str-chat__message {
228
222
  &-text {
229
223
  &-inner {
230
- border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
231
- calc(var(--border-radius-sm) / 2);
224
+ border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
232
225
 
233
226
  &--has-attachment {
234
- border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius)
235
- var(--border-radius) calc(var(--border-radius-sm) / 2);
227
+ border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
236
228
  }
237
229
  }
238
230
  }
@@ -240,12 +232,10 @@
240
232
  &--me {
241
233
  .str-chat__message-text {
242
234
  &-inner {
243
- border-radius: var(--border-radius) var(--border-radius)
244
- calc(var(--border-radius-sm) / 2) var(--border-radius);
235
+ border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
245
236
 
246
237
  &--has-attachment {
247
- border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
248
- calc(var(--border-radius-sm) / 2) var(--border-radius);
238
+ border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
249
239
  }
250
240
  }
251
241
  }
@@ -258,16 +248,14 @@
258
248
  .str-chat__message {
259
249
  &-text {
260
250
  &-inner {
261
- border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
262
- calc(var(--border-radius-sm) / 2);
251
+ border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
263
252
  }
264
253
  }
265
254
 
266
255
  &--me {
267
256
  .str-chat__message-text {
268
257
  &-inner {
269
- border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
270
- calc(var(--border-radius-sm) / 2) var(--border-radius);
258
+ border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
271
259
 
272
260
  &--has-attachment {
273
261
  margin: 0;
@@ -278,8 +266,7 @@
278
266
  .str-chat__message-attachment-card {
279
267
  margin: 0;
280
268
  padding: 0;
281
- border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
282
- calc(var(--border-radius-sm) / 2) var(--border-radius);
269
+ border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
283
270
  }
284
271
  }
285
272
  }
@@ -400,8 +387,7 @@
400
387
  }
401
388
 
402
389
  &--has-attachment {
403
- border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
404
- calc(var(--border-radius-sm) / 2);
390
+ border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
405
391
  }
406
392
 
407
393
  /* if text consists of just one emoji */
@@ -491,8 +477,7 @@
491
477
  background: var(--grey-whisper);
492
478
  border-color: transparent;
493
479
  text-align: right;
494
- border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
495
- var(--border-radius);
480
+ border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
496
481
  margin-right: 0; /* set spacing when unfocused */
497
482
 
498
483
  &--focused {
@@ -503,8 +488,7 @@
503
488
  }
504
489
 
505
490
  &--has-attachment {
506
- border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
507
- calc(var(--border-radius-sm) / 2) var(--border-radius);
491
+ border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
508
492
  }
509
493
 
510
494
  &--is-emoji {
@@ -617,7 +601,9 @@
617
601
  }
618
602
  }
619
603
  }
620
- } /* __li*/
604
+ }
605
+
606
+ /* __li*/
621
607
  }
622
608
  }
623
609
  }
@@ -655,7 +641,6 @@
655
641
  /* error messages */
656
642
  &--error,
657
643
  &--failed {
658
- margin: 0 0 var(--lg-m) var(--xl-m);
659
644
  font-size: var(--sm-font);
660
645
  padding: var(--xxs-p) 0;
661
646
 
@@ -796,6 +781,12 @@
796
781
  }
797
782
  }
798
783
 
784
+ &--deleted-inner {
785
+ background: var(--dark-grey);
786
+ color: var(--white);
787
+ }
788
+
789
+
799
790
  &--me {
800
791
  .str-chat__message-simple-reply-button {
801
792
  display: flex;
@@ -964,8 +955,7 @@
964
955
  &:first-of-type {
965
956
  border-bottom: 1px solid var(--grey-gainsboro);
966
957
  border-top: 1px solid var(--grey-gainsboro);
967
- border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
968
- calc(var(--border-radius-sm) / 2);
958
+ border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
969
959
  }
970
960
  }
971
961
  }
@@ -976,8 +966,7 @@
976
966
 
977
967
  &--me {
978
968
  .str-chat__message-attachment-card {
979
- border-radius: var(--border-radius) var(--border-radius-sm) var(--border-radius-sm)
980
- var(--border-radius-sm);
969
+ border-radius: var(--border-radius) var(--border-radius-sm) var(--border-radius-sm) var(--border-radius-sm);
981
970
  }
982
971
 
983
972
  .str-chat__message-attachment--file {
@@ -987,8 +976,7 @@
987
976
  border-radius: 0 0 calc(var(--border-radius-sm) / 2) var(--border-radius);
988
977
 
989
978
  &:first-of-type:not(.str-chat-angular__message-attachment-file-single) {
990
- border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
991
- var(--border-radius);
979
+ border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
992
980
  }
993
981
  }
994
982
  }
@@ -1005,11 +993,12 @@
1005
993
  .str-chat__message-actions-box {
1006
994
  right: unset;
1007
995
  left: 100%;
1008
- border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
1009
- calc(var(--border-radius-sm) / 2);
996
+ border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
1010
997
  }
1011
998
  }
1012
999
  }
1000
+
1001
+
1013
1002
  }
1014
1003
 
1015
1004
  .livestream.str-chat {
@@ -1039,14 +1028,19 @@
1039
1028
  }
1040
1029
 
1041
1030
  .dark.str-chat {
1031
+ .str-chat__message,
1042
1032
  .str-chat__message-simple {
1043
1033
  &-text-inner {
1044
- background: var(--white-smoke);
1034
+ background: var(--dark-grey);
1045
1035
  color: var(--white);
1046
1036
 
1047
1037
  &--is-emoji {
1048
1038
  background: transparent;
1049
1039
  }
1040
+
1041
+ .quoted-message-inner {
1042
+ background: var(--dark-grey);
1043
+ }
1050
1044
  }
1051
1045
 
1052
1046
  &__actions {
@@ -1064,17 +1058,22 @@
1064
1058
  background: transparent;
1065
1059
 
1066
1060
  &--content {
1067
- background: var(--white-smoke);
1061
+ background: var(--dark-grey);
1068
1062
  }
1069
1063
 
1070
1064
  &--url {
1071
1065
  color: var(--grey-gainsboro);
1072
1066
  }
1067
+
1068
+ &--title {
1069
+ color: var(--primary-color);
1070
+ }
1073
1071
  }
1074
1072
 
1075
1073
  .str-chat__message-attachment--file {
1076
1074
  border-color: transparent;
1077
- background: var(--white-smoke);
1075
+ background: var(--dark-grey);
1076
+ color: var(--white10);
1078
1077
 
1079
1078
  a,
1080
1079
  span {
@@ -1092,25 +1091,35 @@
1092
1091
  }
1093
1092
  }
1094
1093
 
1094
+ .str-chat__message-simple--deleted-inner,
1095
+ .str-chat__message--deleted-inner {
1096
+ background: var(--dark-grey);
1097
+ color: var(--white);
1098
+ }
1099
+
1095
1100
  &--me {
1096
- .str-chat__message-simple {
1097
- &-text-inner {
1098
- background: var(--black);
1101
+ .str-chat__message-text-inner {
1102
+ background: var(--black40);
1099
1103
 
1100
- &--is-emoji {
1101
- background: transparent;
1102
- }
1104
+ &--is-emoji {
1105
+ background: transparent;
1103
1106
  }
1107
+ }
1104
1108
 
1105
- .str-chat__message-attachment-card {
1106
- &--content {
1107
- background: var(--black);
1108
- }
1109
+ .str-chat__message-attachment-card {
1110
+ &--content {
1111
+ background: var(--black40);
1109
1112
  }
1113
+ }
1110
1114
 
1111
- .str-chat__message-attachment--file {
1112
- background: var(--overlay);
1113
- }
1115
+ .str-chat__message-attachment--file {
1116
+ background: var(--black40);
1117
+ }
1118
+
1119
+ .str-chat__message-simple--deleted-inner,
1120
+ .str-chat__message--deleted-inner {
1121
+ background: var(--black40);
1122
+ color: var(--white);
1114
1123
  }
1115
1124
  }
1116
1125
  }
@@ -1142,22 +1151,19 @@
1142
1151
  &--reverse {
1143
1152
  right: 100%;
1144
1153
  left: unset;
1145
- border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
1146
- var(--border-radius);
1154
+ border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
1147
1155
  }
1148
1156
  }
1149
1157
 
1150
1158
  .str-chat__message-actions-box--mine {
1151
1159
  right: 100%;
1152
1160
  left: unset;
1153
- border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
1154
- var(--border-radius);
1161
+ border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
1155
1162
 
1156
1163
  &.str-chat__message-actions-box--reverse {
1157
1164
  left: 100%;
1158
1165
  right: unset;
1159
- border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
1160
- calc(var(--border-radius-sm) / 2);
1166
+ border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
1161
1167
  }
1162
1168
  }
1163
1169
  }
package/dist/scss/MessageInput.scss CHANGED
@@ -82,6 +82,12 @@
82
82
  }
83
83
  }
84
84
 
85
+ .dark .str-chat__textarea {
86
+ textarea::placeholder {
87
+ color: var(--white30);
88
+ }
89
+ }
90
+
85
91
  .str-chat__textarea {
86
92
  height: auto;
87
93
  flex: 1;
@@ -104,7 +110,7 @@
104
110
  box-shadow: 0 0 0 2px var(--primary-color-faded);
105
111
  }
106
112
 
107
- &:placeholder {
113
+ &::placeholder {
108
114
  color: var(--black50);
109
115
  }
110
116
  }
@@ -117,7 +123,7 @@
117
123
  position: absolute;
118
124
  background: var(--white95);
119
125
  box-shadow: 0 0 1px 0 var(--black30), 0 0 6px 0 var(--black10);
120
- z-index: -1;
126
+ z-index: 10001;
121
127
  border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
122
128
  margin: 0 var(--xs-m);
123
129
  max-height: 360px;
package/dist/scss/MessageInputFlat.scss CHANGED
@@ -289,6 +289,10 @@
289
289
  fill: var(--white);
290
290
  }
291
291
  }
292
+
293
+ &-quoted .quoted-message-preview-content {
294
+ background: var(--black20);
295
+ }
292
296
  }
293
297
 
294
298
  &.commerce {
package/dist/scss/MessageNotification.scss CHANGED
@@ -15,35 +15,23 @@
15
15
  align-self: flex-end;
16
16
  }
17
17
 
18
- &-scroll-down {
18
+ &-scroll-to-latest {
19
19
  cursor: pointer;
20
- display: block;
20
+ display: flex;
21
+ justify-content: center;
22
+ align-items: center;
21
23
  width: 42px;
22
24
  height: 42px;
23
- background-size: 14px auto;
24
25
  border-radius: 50%;
25
26
  background: var(--white);
27
+ color: var(--primary-color);
26
28
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
27
29
 
28
- &::before {
29
- position: absolute;
30
- top: calc(50% - 8px);
31
- left: calc(50% - 6px);
32
- transform: rotate(-45deg);
33
- display: block;
34
- width: 12px;
35
- height: 12px;
36
- content: '';
37
- border: 2px solid var(--primary-color);
38
- border-width: 0 0 2px 2px;
39
- }
40
-
41
30
  &-unread-count {
42
31
  font-size: 10px;
43
- position: relative;
44
32
  left: 50%;
45
33
  transform: translateX(-50%);
46
- bottom: 18px;
34
+ bottom: 30px;
47
35
  }
48
36
  }
49
37
  }
package/dist/scss/Thread.scss CHANGED
@@ -61,11 +61,18 @@
61
61
  .str-chat__message:first-of-type .str-chat__message-inner {
62
62
  margin-left: unset;
63
63
  margin-right: unset;
64
+ width: 100%;
64
65
  }
65
66
 
66
- .str-chat__message-attachment.str-chat__message-attachment--file {
67
- border-radius: var(--border-radius-md);
68
- border-bottom: 1px solid var(--grey-whisper);
67
+ .str-chat__message-attachment.str-chat__message-attachment {
68
+ &--file {
69
+ border-radius: var(--border-radius-md);
70
+ border-bottom: 1px solid var(--grey-whisper);
71
+ }
72
+
73
+ &--media {
74
+ width: 100%;
75
+ }
69
76
  }
70
77
 
71
78
  .quoted-message {
@@ -206,7 +213,8 @@
206
213
  background: var(--white5);
207
214
 
208
215
  &-header {
209
- background: var(--black80);
216
+ background: var(--dark-grey);
217
+
210
218
  box-shadow: 0 7px 9px 0 var(--black5), 0 1px 0 0 var(--black5);
211
219
  color: var(--white);
212
220
  }
@@ -308,3 +316,11 @@
308
316
  }
309
317
  }
310
318
  }
319
+
320
+ .dark.str-chat.messaging {
321
+ .str-chat__thread-list {
322
+ .quoted-message-inner {
323
+ background: var(--dark-grey);
324
+ }
325
+ }
326
+ }
package/dist/scss/_base.scss CHANGED
@@ -49,6 +49,10 @@
49
49
  font-family: var(--second-font);
50
50
  color: var(--black);
51
51
 
52
+ &.dark {
53
+ color: var(--white);
54
+ }
55
+
52
56
  &.messaging,
53
57
  &.commerce {
54
58
  background-color: var(--grey-gainsboro);
package/dist/stories/connected-user.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"connected-user.stories.d.ts","sourceRoot":"","sources":["../../src/stories/connected-user.stories.tsx"],"names":[],"mappings":"AACA,OAAO,+CAA+C,CAAC;AAyFvD,eAAO,MAAM,KAAK,mBAUjB,CAAC;AAEF,eAAO,MAAM,KAAK,mBAUjB,CAAC"}
1
+ {"version":3,"file":"connected-user.stories.d.ts","sourceRoot":"","sources":["../../src/stories/connected-user.stories.tsx"],"names":[],"mappings":"AACA,OAAO,+CAA+C,CAAC;AA0DvD,eAAO,MAAM,KAAK,mBAUjB,CAAC;AAEF,eAAO,MAAM,KAAK,mBAUjB,CAAC"}