Skip to content

Commit 1dd116d

Browse files
vanGalileavanGalilea
authored
Merge pull request #1404 from GetStream/hotfix/borderRadius
fix: hotfixes borderRadius
2 parents df3f34b + 8ae367d commit 1dd116d

File tree

4 files changed

+96
-74
lines changed

4 files changed

+96
-74
lines changed

‎examples/TypeScriptMessaging/useStreamChatTheme.ts‎

Lines changed: 42 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -14,49 +14,49 @@ export const useStreamChatTheme = () => {
1414
colors:
1515
colorScheme === 'dark'
1616
? {
17-
accent_blue: '#005FFF',
18-
accent_green: '#20E070',
19-
accent_red: '#FF3742',
20-
bg_gradient_end: '#101214',
21-
bg_gradient_start: '#070A0D',
22-
black: '#FFFFFF',
23-
blue_alice: '#00193D',
24-
border: '#141924',
25-
grey: '#7A7A7A',
26-
grey_gainsboro: '#2D2F2F',
27-
grey_whisper: '#1C1E22',
28-
icon_background: '#FFFFFF',
29-
modal_shadow: '#000000',
30-
overlay: '#FFFFFFCC', // CC = 80% opacity
31-
shadow_icon: '#00000080', // 80 = 50% opacity
32-
targetedMessageBackground: '#302D22',
33-
transparent: 'transparent',
34-
white: '#101418',
35-
white_smoke: '#13151B',
36-
white_snow: '#070A0D',
37-
}
17+
accent_blue: '#005FFF',
18+
accent_green: '#20E070',
19+
accent_red: '#FF3742',
20+
bg_gradient_end: '#101214',
21+
bg_gradient_start: '#070A0D',
22+
black: '#FFFFFF',
23+
blue_alice: '#00193D',
24+
border: '#141924',
25+
grey: '#7A7A7A',
26+
grey_gainsboro: '#2D2F2F',
27+
grey_whisper: '#1C1E22',
28+
icon_background: '#FFFFFF',
29+
modal_shadow: '#000000',
30+
overlay: '#FFFFFFCC', // CC = 80% opacity
31+
shadow_icon: '#00000080', // 80 = 50% opacity
32+
targetedMessageBackground: '#302D22',
33+
transparent: 'transparent',
34+
white: '#101418',
35+
white_smoke: '#13151B',
36+
white_snow: '#070A0D',
37+
}
3838
: {
39-
accent_blue: '#005FFF',
40-
accent_green: '#20E070',
41-
accent_red: '#FF3742',
42-
bg_gradient_end: '#F7F7F7',
43-
bg_gradient_start: '#FCFCFC',
44-
black: '#000000',
45-
blue_alice: '#E9F2FF',
46-
border: '#00000014', // 14 = 8% opacity; top: x=0, y=-1; bottom: x=0, y=1
47-
grey: '#7A7A7A',
48-
grey_gainsboro: '#DBDBDB',
49-
grey_whisper: '#ECEBEB',
50-
icon_background: '#FFFFFF',
51-
modal_shadow: '#00000099', // 99 = 60% opacity; x=0, y= 1, radius=4
52-
overlay: '#00000099', // 99 = 60% opacity
53-
shadow_icon: '#00000040', // 40 = 25% opacity; x=0, y=0, radius=4
54-
targetedMessageBackground: '#FBF4DD', // dark mode = #302D22
55-
transparent: 'transparent',
56-
white: '#FFFFFF',
57-
white_smoke: '#F2F2F2',
58-
white_snow: '#FCFCFC',
59-
},
39+
accent_blue: '#005FFF',
40+
accent_green: '#20E070',
41+
accent_red: '#FF3742',
42+
bg_gradient_end: '#F7F7F7',
43+
bg_gradient_start: '#FCFCFC',
44+
black: '#000000',
45+
blue_alice: '#E9F2FF',
46+
border: '#00000014', // 14 = 8% opacity; top: x=0, y=-1; bottom: x=0, y=1
47+
grey: '#7A7A7A',
48+
grey_gainsboro: '#DBDBDB',
49+
grey_whisper: '#ECEBEB',
50+
icon_background: '#FFFFFF',
51+
modal_shadow: '#00000099', // 99 = 60% opacity; x=0, y= 1, radius=4
52+
overlay: '#00000099', // 99 = 60% opacity
53+
shadow_icon: '#00000040', // 40 = 25% opacity; x=0, y=0, radius=4
54+
targetedMessageBackground: '#FBF4DD', // dark mode = #302D22
55+
transparent: 'transparent',
56+
white: '#FFFFFF',
57+
white_smoke: '#F2F2F2',
58+
white_snow: '#FCFCFC',
59+
},
6060
spinner: {
6161
height: 15,
6262
width: 15,

‎examples/TypeScriptMessaging/yarn.lock‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6861,10 +6861,10 @@ [email protected]:
68616861
resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4"
68626862
integrity sha1-kdX1Ew0c75bc+n9yaUUYh0HQnuQ=
68636863

6864-
stream-chat-react-native-core@4.3.1:
6865-
version "4.3.1"
6866-
resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-4.3.1.tgz#bc53a044c45b60f6bd3feb425e70100d077cc064"
6867-
integrity sha512-2DZO89EyDtXtmc5MhivD1kOOU6aklK/rgZVvo4RZ15419VlpVFqMjswvFAcF41z2ZJujP86cSSKg5YMhNy7uZw==
6864+
stream-chat-react-native-core@4.6.0:
6865+
version "4.6.0"
6866+
resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-4.6.0.tgz#444a88017c74e0b0ac0c8f030925320175c61934"
6867+
integrity sha512-065qcp5Bv0t6TFN+UIFZlaoUTh2aXbvwkDLWAJInWYUKuMFmZkYlSfqdw+XBN9tMVlmuxoL06jltVru8HpP/NQ==
68686868
dependencies:
68696869
"@babel/runtime" "^7.12.5"
68706870
"@gorhom/bottom-sheet" "4.1.5"

‎package/src/components/Message/MessageSimple/MessageContent.tsx‎

Lines changed: 50 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,16 @@ const MessageContentWithContext = <
143143
colors: { accent_red, blue_alice, grey_gainsboro, grey_whisper, transparent, white },
144144
messageSimple: {
145145
content: {
146-
container: { borderRadius, borderRadiusL, borderRadiusS, ...container },
146+
container: {
147+
borderBottomLeftRadius,
148+
borderBottomRightRadius,
149+
borderRadius,
150+
borderRadiusL,
151+
borderRadiusS,
152+
borderTopLeftRadius,
153+
borderTopRightRadius,
154+
...container
155+
},
147156
containerInner,
148157
errorContainer,
149158
errorIcon,
@@ -225,18 +234,46 @@ const MessageContentWithContext = <
225234

226235
const isBorderColor = isMyMessage && !error;
227236

228-
const shouldApplyBorderRadius = (firstGroupStyle: string, secondGroupStyle: string): boolean =>
229-
(groupStyle === firstGroupStyle || groupStyle === secondGroupStyle) &&
230-
(!hasThreadReplies || threadList);
237+
const getBorderRadius = () => {
238+
// enum('top', 'middle', 'bottom', 'single')
239+
const groupPosition = groupStyles?.[0];
240+
241+
const isBottomOrSingle = groupPosition === 'single' || groupPosition === 'bottom';
242+
let borderBottomLeftRadius = borderRadiusL;
243+
let borderBottomRightRadius = borderRadiusL;
244+
245+
if (isBottomOrSingle && (!hasThreadReplies || threadList)) {
246+
// add relevant sharp corner
247+
if (alignment === 'left') {
248+
borderBottomLeftRadius = borderRadiusS;
249+
} else {
250+
borderBottomRightRadius = borderRadiusS;
251+
}
252+
}
253+
254+
return {
255+
borderBottomLeftRadius,
256+
borderBottomRightRadius,
257+
};
258+
};
231259

232-
const applyBorderRadius = (
233-
firstGroupStyle: string,
234-
secondGroupStyle: string,
235-
): number | undefined => {
236-
if (shouldApplyBorderRadius(firstGroupStyle, secondGroupStyle)) {
237-
return borderRadiusS;
260+
const getBorderRadiusFromTheme = () => {
261+
const bordersFromTheme: Record<string, number | undefined> = {
262+
borderBottomLeftRadius,
263+
borderBottomRightRadius,
264+
borderRadius,
265+
borderTopLeftRadius,
266+
borderTopRightRadius,
267+
};
268+
269+
// filter out undefined values
270+
for (const key in bordersFromTheme) {
271+
if (bordersFromTheme[key] === undefined) {
272+
delete bordersFromTheme[key];
273+
}
238274
}
239-
return borderRadiusL;
275+
276+
return bordersFromTheme;
240277
};
241278

242279
return (
@@ -313,12 +350,9 @@ const MessageContentWithContext = <
313350
styles.containerInner,
314351
{
315352
backgroundColor,
316-
borderBottomLeftRadius: applyBorderRadius('left_bottom', 'left_single'),
317-
borderBottomRightRadius: applyBorderRadius('right_bottom', 'right_single'),
318353
borderColor: isBorderColor ? backgroundColor : grey_whisper,
319-
borderRadius,
320-
borderTopLeftRadius: applyBorderRadius('left_top', 'right_single'),
321-
borderTopRightRadius: applyBorderRadius('right_top', 'right_single'),
354+
...getBorderRadius(),
355+
...getBorderRadiusFromTheme(),
322356
},
323357
noBorder ? { borderWidth: 0 } : {},
324358
containerInner,

‎package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -369,9 +369,6 @@ exports[`Thread should match thread snapshot 1`] = `
369369
"borderBottomLeftRadius": 0,
370370
"borderBottomRightRadius": 16,
371371
"borderColor": "#ECEBEB",
372-
"borderRadius": undefined,
373-
"borderTopLeftRadius": 16,
374-
"borderTopRightRadius": 16,
375372
},
376373
Object {},
377374
Object {},
@@ -620,9 +617,6 @@ exports[`Thread should match thread snapshot 1`] = `
620617
"borderBottomLeftRadius": 0,
621618
"borderBottomRightRadius": 16,
622619
"borderColor": "#ECEBEB",
623-
"borderRadius": undefined,
624-
"borderTopLeftRadius": 16,
625-
"borderTopRightRadius": 16,
626620
},
627621
Object {},
628622
Object {},
@@ -871,9 +865,6 @@ exports[`Thread should match thread snapshot 1`] = `
871865
"borderBottomLeftRadius": 0,
872866
"borderBottomRightRadius": 16,
873867
"borderColor": "#ECEBEB",
874-
"borderRadius": undefined,
875-
"borderTopLeftRadius": 16,
876-
"borderTopRightRadius": 16,
877868
},
878869
Object {},
879870
Object {},
@@ -1170,9 +1161,6 @@ exports[`Thread should match thread snapshot 1`] = `
11701161
"borderBottomLeftRadius": 0,
11711162
"borderBottomRightRadius": 16,
11721163
"borderColor": "#ECEBEB",
1173-
"borderRadius": undefined,
1174-
"borderTopLeftRadius": 16,
1175-
"borderTopRightRadius": 16,
11761164
},
11771165
Object {},
11781166
Object {},

0 commit comments

Comments
 (0)