Skip to content

Commit 66c4d00

Browse files
khushal87khushal87
committed
feat: add primitive components and theme
1 parent 5db18de commit 66c4d00

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+836
-319
lines changed

‎examples/SampleApp/src/components/ChannelInfoOverlay.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -332,7 +332,7 @@ export const ChannelInfoOverlay = (props: ChannelInfoOverlayProps) => {
332332
style={[
333333
styles.row,
334334
{
335-
borderTopColor: border,
335+
borderTopColor: border.surfaceSubtle,
336336
},
337337
]}
338338
>
@@ -347,7 +347,7 @@ export const ChannelInfoOverlay = (props: ChannelInfoOverlayProps) => {
347347
style={[
348348
styles.row,
349349
{
350-
borderTopColor: border,
350+
borderTopColor: border.surfaceSubtle,
351351
},
352352
]}
353353
>
@@ -364,7 +364,7 @@ export const ChannelInfoOverlay = (props: ChannelInfoOverlayProps) => {
364364
style={[
365365
styles.row,
366366
{
367-
borderTopColor: border,
367+
borderTopColor: border.surfaceSubtle,
368368
},
369369
]}
370370
>
@@ -379,7 +379,7 @@ export const ChannelInfoOverlay = (props: ChannelInfoOverlayProps) => {
379379

380380
{otherMembers.length > 1 && (
381381
<Pressable onPress={leaveGroup}>
382-
<View style={[styles.row, { borderTopColor: border }]}>
382+
<View style={[styles.row, { borderTopColor: border.surfaceSubtle }]}>
383383
<View style={styles.rowInner}>
384384
<UserMinus pathFill={grey} />
385385
</View>
@@ -392,7 +392,7 @@ export const ChannelInfoOverlay = (props: ChannelInfoOverlayProps) => {
392392
style={[
393393
styles.row,
394394
{
395-
borderTopColor: border,
395+
borderTopColor: border.surfaceSubtle,
396396
},
397397
]}
398398
>
@@ -409,8 +409,8 @@ export const ChannelInfoOverlay = (props: ChannelInfoOverlayProps) => {
409409
style={[
410410
styles.lastRow,
411411
{
412-
borderBottomColor: border,
413-
borderTopColor: border,
412+
borderBottomColor: border.surfaceSubtle,
413+
borderTopColor: border.surfaceSubtle,
414414
},
415415
]}
416416
>

‎examples/SampleApp/src/components/ConfirmationBottomSheet.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export const ConfirmationBottomSheet: React.FC = () => {
8686
style={[
8787
styles.actionButtonsContainer,
8888
{
89-
borderTopColor: border,
89+
borderTopColor: border.surfaceSubtle,
9090
},
9191
]}
9292
>

‎examples/SampleApp/src/components/MessageSearch/MessageSearchList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ export const MessageSearchList: React.FC<MessageSearchListProps> = React.forward
128128
messageId: item.id,
129129
});
130130
}}
131-
style={[styles.itemContainer, { borderBottomColor: border }]}
131+
style={[styles.itemContainer, { borderBottomColor: border.surfaceSubtle }]}
132132
testID='channel-preview-button'
133133
>
134134
<Avatar

‎examples/SampleApp/src/components/ScreenHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ export const ScreenHeader: React.FC<ScreenHeaderProps> = (props) => {
129129
styles.safeAreaContainer,
130130
{
131131
backgroundColor: white,
132-
borderBottomColor: border,
132+
borderBottomColor: border.surfaceSubtle,
133133
height: HEADER_CONTENT_HEIGHT + (inSafeArea ? 0 : insets.top),
134134
},
135135
style,

‎examples/SampleApp/src/components/UnreadCountBadge.tsx‎

Lines changed: 11 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,21 @@
11
import React, { useEffect, useState } from 'react';
2-
import { StyleSheet, Text, View } from 'react-native';
3-
import { useStateStore, useTheme } from 'stream-chat-react-native';
2+
import { BadgeNotification, useStateStore } from 'stream-chat-react-native';
43

54
import { useAppContext } from '../context/AppContext';
65
import { ThreadManagerState } from 'stream-chat';
76

8-
const styles = StyleSheet.create({
9-
unreadContainer: {
10-
alignItems: 'center',
11-
borderRadius: 8,
12-
justifyContent: 'center',
13-
},
14-
unreadText: {
15-
color: '#FFFFFF',
16-
fontSize: 11,
17-
fontWeight: '700',
18-
paddingHorizontal: 5,
19-
paddingVertical: 1,
20-
},
21-
});
22-
237
const selector = (nextValue: ThreadManagerState) =>
24-
({ unreadCount: nextValue.unreadThreadCount } as const);
8+
({ unreadCount: nextValue.unreadThreadCount }) as const;
259

2610
export const ThreadsUnreadCountBadge: React.FC = () => {
2711
const { chatClient } = useAppContext();
2812
const { unreadCount } = useStateStore(chatClient?.threads?.state, selector) ?? { unreadCount: 0 };
2913

30-
return <UnreadCountBadge unreadCount={unreadCount} />;
14+
if (unreadCount === 0) {
15+
return null;
16+
}
17+
18+
return <BadgeNotification count={unreadCount} size='md' type='primary' />;
3119
};
3220

3321
export const ChannelsUnreadCountBadge: React.FC = () => {
@@ -59,26 +47,9 @@ export const ChannelsUnreadCountBadge: React.FC = () => {
5947
};
6048
}, [chatClient]);
6149

62-
return <UnreadCountBadge unreadCount={unreadCount} />;
63-
};
64-
65-
type UnreadCountBadgeProps = {
66-
unreadCount: number | undefined;
67-
};
68-
69-
const UnreadCountBadge: React.FC<UnreadCountBadgeProps> = (props) => {
70-
const { unreadCount } = props;
71-
const {
72-
theme: {
73-
colors: { accent_red },
74-
},
75-
} = useTheme();
50+
if (unreadCount === 0) {
51+
return null;
52+
}
7653

77-
return (
78-
<View style={[styles.unreadContainer, { backgroundColor: accent_red }]}>
79-
{!!unreadCount && (
80-
<Text style={styles.unreadText}>{unreadCount > 99 ? '99+' : unreadCount}</Text>
81-
)}
82-
</View>
83-
);
54+
return <BadgeNotification count={unreadCount} size='md' type='primary' />;
8455
};

‎examples/SampleApp/src/components/UserInfoOverlay.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -283,7 +283,7 @@ export const UserInfoOverlay = (props: UserInfoOverlayProps) => {
283283
style={[
284284
styles.row,
285285
{
286-
borderTopColor: border,
286+
borderTopColor: border.surfaceSubtle,
287287
},
288288
]}
289289
>
@@ -298,7 +298,7 @@ export const UserInfoOverlay = (props: UserInfoOverlayProps) => {
298298
style={[
299299
styles.row,
300300
{
301-
borderTopColor: border,
301+
borderTopColor: border.surfaceSubtle,
302302
},
303303
]}
304304
>
@@ -314,7 +314,7 @@ export const UserInfoOverlay = (props: UserInfoOverlayProps) => {
314314
style={[
315315
styles.row,
316316
{
317-
borderTopColor: border,
317+
borderTopColor: border.surfaceSubtle,
318318
},
319319
]}
320320
>
@@ -332,8 +332,8 @@ export const UserInfoOverlay = (props: UserInfoOverlayProps) => {
332332
style={[
333333
styles.lastRow,
334334
{
335-
borderBottomColor: border,
336-
borderTopColor: border,
335+
borderBottomColor: border.surfaceSubtle,
336+
borderTopColor: border.surfaceSubtle,
337337
},
338338
]}
339339
>

‎examples/SampleApp/src/components/UserSearch/UserSearchResults.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@ export const UserSearchResults: React.FC<UserSearchResultsProps> = ({
199199
styles.searchResultContainer,
200200
{
201201
backgroundColor: white_snow,
202-
borderBottomColor: border,
202+
borderBottomColor: border.surfaceSubtle,
203203
},
204204
]}
205205
>

‎examples/SampleApp/src/hooks/useStreamChatTheme.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ const getChatStyle = (colorScheme: ColorSchemeName): DeepPartial<Theme> => ({
1414
bg_user: '#17191C',
1515
black: '#FFFFFF',
1616
blue_alice: '#00193D',
17-
border: '#141924',
1817
button_background: '#FFFFFF',
1918
button_text: '#005FFF',
2019
code_block: '#222222',
@@ -43,7 +42,6 @@ const getChatStyle = (colorScheme: ColorSchemeName): DeepPartial<Theme> => ({
4342
bg_gradient_start: '#FCFCFC',
4443
black: '#000000',
4544
blue_alice: '#E9F2FF',
46-
border: '#00000014', // 14 = 8% opacity; top: x=0, y=-1; bottom: x=0, y=1
4745
button_background: '#005FFF',
4846
button_text: '#FFFFFF',
4947
grey: '#7A7A7A',

‎examples/SampleApp/src/screens/ChannelFilesScreen.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ export const ChannelFilesScreen: React.FC<ChannelFilesScreenProps> = ({
149149
Alert.alert('Not implemented.');
150150
}}
151151
style={{
152-
borderBottomColor: border,
152+
borderBottomColor: border.surfaceSubtle,
153153
borderBottomWidth: index === section.data.length - 1 ? 0 : 1,
154154
}}
155155
>

‎examples/SampleApp/src/screens/GroupChannelDetailsScreen.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -276,7 +276,7 @@ export const GroupChannelDetailsScreen: React.FC<GroupChannelDetailsProps> = ({
276276
style={[
277277
styles.memberContainer,
278278
{
279-
borderBottomColor: border,
279+
borderBottomColor: border.surfaceSubtle,
280280
},
281281
]}
282282
>
@@ -306,7 +306,7 @@ export const GroupChannelDetailsScreen: React.FC<GroupChannelDetailsProps> = ({
306306
style={[
307307
styles.loadMoreButton,
308308
{
309-
borderBottomColor: border,
309+
borderBottomColor: border.surfaceSubtle,
310310
},
311311
]}
312312
>
@@ -330,7 +330,7 @@ export const GroupChannelDetailsScreen: React.FC<GroupChannelDetailsProps> = ({
330330
style={[
331331
styles.changeNameContainer,
332332
{
333-
borderBottomColor: border,
333+
borderBottomColor: border.surfaceSubtle,
334334
},
335335
]}
336336
>
@@ -382,7 +382,7 @@ export const GroupChannelDetailsScreen: React.FC<GroupChannelDetailsProps> = ({
382382
style={[
383383
styles.actionContainer,
384384
{
385-
borderBottomColor: border,
385+
borderBottomColor: border.surfaceSubtle,
386386
},
387387
]}
388388
>
@@ -427,7 +427,7 @@ export const GroupChannelDetailsScreen: React.FC<GroupChannelDetailsProps> = ({
427427
style={[
428428
styles.actionContainer,
429429
{
430-
borderBottomColor: border,
430+
borderBottomColor: border.surfaceSubtle,
431431
},
432432
]}
433433
>
@@ -457,7 +457,7 @@ export const GroupChannelDetailsScreen: React.FC<GroupChannelDetailsProps> = ({
457457
style={[
458458
styles.actionContainer,
459459
{
460-
borderBottomColor: border,
460+
borderBottomColor: border.surfaceSubtle,
461461
},
462462
]}
463463
>
@@ -487,7 +487,7 @@ export const GroupChannelDetailsScreen: React.FC<GroupChannelDetailsProps> = ({
487487
style={[
488488
styles.actionContainer,
489489
{
490-
borderBottomColor: border,
490+
borderBottomColor: border.surfaceSubtle,
491491
},
492492
]}
493493
>
@@ -513,7 +513,7 @@ export const GroupChannelDetailsScreen: React.FC<GroupChannelDetailsProps> = ({
513513
style={[
514514
styles.actionContainer,
515515
{
516-
borderBottomColor: border,
516+
borderBottomColor: border.surfaceSubtle,
517517
},
518518
]}
519519
>

0 commit comments

Comments
 (0)