Skip to content

Commit 443b9a8

Browse files
MartinCupelaMartinCupela
authored
fix: adjust padding for messages containing only padding (#3102)
1 parent e15caa4 commit 443b9a8

6 files changed

Lines changed: 91 additions & 81 deletions

File tree

‎src/components/Attachment/styling/Attachment.scss‎

Lines changed: 8 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -143,37 +143,6 @@
143143
/* Box shadow applied to file attachments */
144144
--str-chat__file-attachment-box-shadow: none;
145145

146-
/* Border radius applied to audio recording widget */
147-
--str-chat__voice-recording-attachment-widget-border-radius: calc(
148-
var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
149-
);
150-
151-
/* Text color used in audio recording widget */
152-
--str-chat__voice-recording-attachment-widget-color: var(--str-chat__text-color);
153-
154-
/* Border radius applied to audio recording widget */
155-
--str-chat__voice-recording-attachment-widget-secondary-color: var(
156-
--str-chat__text-low-emphasis-color
157-
);
158-
159-
/* The text/icon color for low emphasis texts (for example file size) in audio recording widget */
160-
--str-chat__voice-recording-attachment-widget-background-color: transparent;
161-
162-
/* Top border of audio recording widget */
163-
--str-chat__voice-recording-attachment-widget-border-block-start: none;
164-
165-
/* Bottom border of audio recording widget */
166-
--str-chat__voice-recording-attachment-widget-border-block-end: none;
167-
168-
/* Left (right in RTL layout) border of audio recording widget */
169-
--str-chat__voice-recording-attachment-widget-border-inline-start: none;
170-
171-
/* Right (left in RTL layout) border of audio recording widget */
172-
--str-chat__voice-recording-attachment-widget-border-inline-end: none;
173-
174-
/* Box shadow applied to audio recording widget */
175-
--str-chat__voice-recording-attachment-widget-box-shadow: none;
176-
177146
/* Border radius applied to the play / pause button of audio widget */
178147
--str-chat__audio-attachment-controls-button-border-radius: var(
179148
--str-chat__border-radius-circle
@@ -382,49 +351,6 @@
382351
@include utils.component-layer-overrides('file-attachment');
383352
}
384353

385-
.str-chat__message-attachment__voice-recording-widget {
386-
@include utils.component-layer-overrides('voice-recording-attachment-widget');
387-
display: flex;
388-
align-items: center;
389-
justify-content: center;
390-
padding-block: var(--spacing-xs);
391-
padding-inline-start: var(--spacing-xs);
392-
padding-inline-end: var(--spacing-sm);
393-
min-height: 60px;
394-
395-
.str-chat__message-attachment__voice-recording-widget__play-button-container {
396-
padding: var(--spacing-xxs);
397-
}
398-
399-
.str-chat__message-attachment__voice-recording-widget__metadata {
400-
flex: 1;
401-
min-width: 180px;
402-
padding-inline: var(--spacing-xs);
403-
404-
a {
405-
cursor: pointer;
406-
text-decoration: none;
407-
color: var(--str-chat__voice-recording-attachment-widget-color);
408-
}
409-
410-
.str-chat__message-attachment-download-icon {
411-
svg {
412-
width: calc(var(--str-chat__spacing-px) * 24);
413-
height: calc(var(--str-chat__spacing-px) * 16);
414-
}
415-
}
416-
}
417-
418-
.str-chat__message-attachment__voice-recording-widget__right-section {
419-
}
420-
421-
.str-chat__message-attachment__voice-recording-widget__timer {
422-
min-width: calc(var(--str-chat__spacing-px) * 40);
423-
width: calc(var(--str-chat__spacing-px) * 40);
424-
font: var(--str-chat__metadata-emphasis-text);
425-
}
426-
}
427-
428354
.str-chat__message-attachment-with-actions.str-chat__message-attachment--giphy {
429355
}
430356

@@ -433,6 +359,14 @@
433359
}
434360
}
435361

362+
.str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-no-text:not(
363+
.str-chat__message--has-quoted-message
364+
) {
365+
.str-chat__message-bubble {
366+
padding: 0;
367+
}
368+
}
369+
436370
.str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-no-text {
437371
.str-chat__message-bubble {
438372
border: 1px solid var(--chat-border-incoming);
@@ -441,11 +375,6 @@
441375

442376
.str-chat__message-attachment {
443377
background-color: var(--chat-bg-incoming);
444-
445-
.str-chat__message-attachment__voice-recording-widget {
446-
padding: unset;
447-
padding-inline-end: var(--spacing-xxs);
448-
}
449378
}
450379
}
451380

‎src/components/Attachment/styling/Audio.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@
8989

9090
.str-chat__message-attachment-file--item-size {
9191
line-height: calc(var(--str-chat__spacing-px) * 14);
92+
font: var(--str-chat__font-metadata-default);
9293
}
9394
}
9495
}

‎src/components/Attachment/styling/VoiceRecording.scss‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
@use '../../../styling/utils';
2+
3+
.str-chat {
4+
/* Border radius applied to audio recording widget */
5+
--str-chat__voice-recording-attachment-widget-border-radius: calc(
6+
var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
7+
);
8+
9+
/* Text color used in audio recording widget */
10+
--str-chat__voice-recording-attachment-widget-color: var(--str-chat__text-color);
11+
12+
/* Border radius applied to audio recording widget */
13+
--str-chat__voice-recording-attachment-widget-secondary-color: var(
14+
--str-chat__text-low-emphasis-color
15+
);
16+
17+
/* The text/icon color for low emphasis texts (for example file size) in audio recording widget */
18+
--str-chat__voice-recording-attachment-widget-background-color: transparent;
19+
20+
/* Top border of audio recording widget */
21+
--str-chat__voice-recording-attachment-widget-border-block-start: none;
22+
23+
/* Bottom border of audio recording widget */
24+
--str-chat__voice-recording-attachment-widget-border-block-end: none;
25+
26+
/* Left (right in RTL layout) border of audio recording widget */
27+
--str-chat__voice-recording-attachment-widget-border-inline-start: none;
28+
29+
/* Right (left in RTL layout) border of audio recording widget */
30+
--str-chat__voice-recording-attachment-widget-border-inline-end: none;
31+
32+
/* Box shadow applied to audio recording widget */
33+
--str-chat__voice-recording-attachment-widget-box-shadow: none;
34+
}
35+
36+
.str-chat__message-attachment__voice-recording-widget {
37+
@include utils.component-layer-overrides('voice-recording-attachment-widget');
38+
display: flex;
39+
align-items: center;
40+
justify-content: center;
41+
min-height: 60px;
42+
padding: var(--spacing-xs);
43+
44+
.str-chat__message-attachment__voice-recording-widget__play-button-container {
45+
padding: var(--spacing-xxs);
46+
}
47+
48+
.str-chat__message-attachment__voice-recording-widget__metadata {
49+
flex: 1;
50+
min-width: 180px;
51+
52+
a {
53+
cursor: pointer;
54+
text-decoration: none;
55+
color: var(--str-chat__voice-recording-attachment-widget-color);
56+
}
57+
58+
.str-chat__message-attachment-download-icon {
59+
svg {
60+
width: calc(var(--str-chat__spacing-px) * 24);
61+
height: calc(var(--str-chat__spacing-px) * 16);
62+
}
63+
}
64+
}
65+
66+
.str-chat__message-attachment__voice-recording-widget__right-section {
67+
}
68+
69+
.str-chat__message-attachment__voice-recording-widget__timer {
70+
min-width: calc(var(--str-chat__spacing-px) * 40);
71+
width: calc(var(--str-chat__spacing-px) * 40);
72+
font: var(--str-chat__metadata-emphasis-text);
73+
}
74+
}

‎src/components/Attachment/styling/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@
77
@use 'LinkPreview';
88
@use 'ModalGallery';
99
@use 'UnsupportedAttachment';
10+
@use 'VoiceRecording';

‎src/components/Message/MessageUI.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {
2424
isMessageErrorRetryable,
2525
messageHasAttachments,
2626
messageHasGiphyAttachment,
27+
messageHasQuotedMessage,
2728
messageHasReactions,
2829
messageHasSingleAttachment,
2930
messageTextHasEmojisOnly,
@@ -125,6 +126,7 @@ const MessageUIWithContext = ({
125126
const hasSingleAttachment = !isDeleted && messageHasSingleAttachment(message);
126127
const hasGiphyAttachment = !isDeleted && messageHasGiphyAttachment(message);
127128
const hasReactions = !isDeleted && messageHasReactions(message);
129+
const hasQuotedMessage = !isDeleted && messageHasQuotedMessage(message);
128130
const textHasEmojisOnly = !isDeleted && messageTextHasEmojisOnly(message);
129131

130132
const allowRetry = isMessageErrorRetryable(message);
@@ -142,9 +144,9 @@ const MessageUIWithContext = ({
142144
'str-chat__message--has-attachment': hasAttachment,
143145
'str-chat__message--has-giphy-attachment': hasGiphyAttachment,
144146
'str-chat__message--has-no-text': !message.text,
145-
'str-chat__message--has-text': !!message.text,
146-
// eslint-disable-next-line sort-keys
147+
'str-chat__message--has-quoted-message': hasQuotedMessage,
147148
'str-chat__message--has-single-attachment': hasSingleAttachment,
149+
'str-chat__message--has-text': !!message.text,
148150
'str-chat__message--highlighted': highlighted,
149151
'str-chat__message--is-emoji-only': textHasEmojisOnly,
150152
[`str-chat__message--is-emoji-only-count-${countEmojis(message.text)}`]:

‎src/components/Message/utils.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -277,6 +277,9 @@ export const areMessageUIPropsEqual = (
277277
export const messageHasReactions = (message?: LocalMessage) =>
278278
Object.values(message?.reaction_groups ?? {}).some(({ count }) => count > 0);
279279

280+
export const messageHasQuotedMessage = (message?: LocalMessage) =>
281+
!!message?.quoted_message;
282+
280283
export const messageHasAttachments = (message?: LocalMessage) =>
281284
!!message?.attachments && !!message.attachments.length;
282285

0 commit comments

Comments
 (0)