Skip to content

Commit 621398d

Browse files
isekovanicisekovanic
authored
feat: poll screens redesign (#3435)
## 🎯 Goal This PR implements the design changes for all of the `Poll` related screens. It also: - Updates the design tokens (messages and channel list items are affected pretty heavily) - Fixes some poll UI bugs we've had - Addresses some remaining darkmode issues ## 🛠 Implementation details <!-- Provide a description of the implementation --> ## 🎨 UI Changes <!-- Add relevant screenshots --> <details> <summary>iOS</summary> <table> <thead> <tr> <td>Before</td> <td>After</td> </tr> </thead> <tbody> <tr> <td> <!--<img src="" /> --> </td> <td> <!--<img src="" /> --> </td> </tr> </tbody> </table> </details> <details> <summary>Android</summary> <table> <thead> <tr> <td>Before</td> <td>After</td> </tr> </thead> <tbody> <tr> <td> <!--<img src="" /> --> </td> <td> <!--<img src="" /> --> </td> </tr> </tbody> </table> </details> ## 🧪 Testing <!-- Explain how this change can be tested (or why it can't be tested) --> ## ☑️ Checklist - [ ] I have signed the [Stream CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform) (required) - [ ] PR targets the `develop` branch - [ ] Documentation is updated - [ ] New code is tested in main example apps, including all possible scenarios - [ ] SampleApp iOS and Android - [ ] Expo iOS and Android
1 parent 2f570e1 commit 621398d

Some content is hidden

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

47 files changed

+942
-578
lines changed

‎package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,16 +175,18 @@ const useCommandPickerStyle = () => {
175175
flexGrow: 1,
176176
paddingHorizontal: primitives.spacingXxs,
177177
paddingBottom: primitives.spacing2xl,
178+
backgroundColor: semantics.composerBg,
178179
},
179180
title: {
181+
backgroundColor: semantics.composerBg,
180182
fontWeight: primitives.typographyFontWeightSemiBold,
181183
fontSize: primitives.typographyFontSizeMd,
182184
color: semantics.textPrimary,
183185
paddingHorizontal: primitives.spacingMd,
184186
paddingBottom: primitives.spacingMd,
185187
},
186188
}),
187-
[semantics.textPrimary],
189+
[semantics.composerBg, semantics.textPrimary],
188190
);
189191
};
190192

‎package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export const CommandSuggestionItem = (item: CommandSuggestion) => {
7373
const { args, name } = item;
7474
const {
7575
theme: {
76-
colors: { black, grey },
76+
semantics,
7777
messageInput: {
7878
suggestions: {
7979
command: { args: argsStyle, container: commandContainer, title },
@@ -86,10 +86,16 @@ export const CommandSuggestionItem = (item: CommandSuggestion) => {
8686
return (
8787
<View style={[styles.commandContainer, commandContainer]}>
8888
{name ? <AutoCompleteSuggestionCommandIcon name={name} /> : null}
89-
<Text style={[styles.title, { color: black }, title]} testID='commands-item-title'>
89+
<Text
90+
style={[styles.title, { color: semantics.textPrimary }, title]}
91+
testID='commands-item-title'
92+
>
9093
{(name || '').replace(/^\w/, (char) => char.toUpperCase())}
9194
</Text>
92-
<Text style={[styles.args, { color: grey }, argsStyle]} testID='commands-item-args'>
95+
<Text
96+
style={[styles.args, { color: semantics.textTertiary }, argsStyle]}
97+
testID='commands-item-args'
98+
>
9399
{`/${name} ${args}`}
94100
</Text>
95101
</View>

‎package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,6 @@ export const AutoCompleteSuggestionList = ({
6262

6363
const {
6464
theme: {
65-
colors: { black, white },
6665
messageInput: {
6766
container: { maxHeight },
6867
},
@@ -106,7 +105,7 @@ export const AutoCompleteSuggestionList = ({
106105
onEndReached={loadMore}
107106
onEndReachedThreshold={0.1}
108107
renderItem={renderItem}
109-
style={[styles.flatlist, { backgroundColor: white, maxHeight, shadowColor: black }]}
108+
style={[styles.flatlist, { maxHeight }]}
110109
testID={'auto-complete-suggestion-list'}
111110
/>
112111
</Animated.View>
@@ -132,6 +131,8 @@ const useStyles = () => {
132131
borderColor: semantics.borderCoreDefault,
133132
},
134133
flatlist: {
134+
backgroundColor: semantics.composerBg,
135+
shadowColor: semantics.accentBlack,
135136
borderRadius: 8,
136137
elevation: 3,
137138
marginHorizontal: 8,

‎package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ exports[`MessageAvatar should render message avatar 1`] = `
2222
"width": 32,
2323
},
2424
{
25-
"backgroundColor": "#003a3f",
25+
"backgroundColor": "#006970",
2626
},
2727
{
2828
"borderColor": "rgba(255, 255, 255, 0.2)",

‎package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageTextContainer.test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ exports[`MessageTextContainer should render message text container 1`] = `
2929
"alignItems": "flex-start",
3030
"flexDirection": "row",
3131
"flexWrap": "wrap",
32-
"fontSize": 15,
32+
"fontSize": 17,
3333
"justifyContent": "flex-start",
3434
"lineHeight": 20,
3535
"marginBottom": 8,
@@ -41,7 +41,7 @@ exports[`MessageTextContainer should render message text container 1`] = `
4141
style={
4242
{
4343
"color": "#000000",
44-
"fontSize": 15,
44+
"fontSize": 17,
4545
"lineHeight": 20,
4646
}
4747
}

‎package/src/components/MessageInput/MessageInput.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -418,10 +418,12 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
418418
<>
419419
<MessageInputLeadingView />
420420

421-
<AutoCompleteInput
422-
TextInputComponent={TextInputComponent}
423-
{...additionalTextInputProps}
424-
/>
421+
<Animated.View layout={LinearTransition.duration(200)}>
422+
<AutoCompleteInput
423+
TextInputComponent={TextInputComponent}
424+
{...additionalTextInputProps}
425+
/>
426+
</Animated.View>
425427
</>
426428
)}
427429

‎package/src/components/MessageInput/MessageInputLeadingView.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React, { useEffect } from 'react';
2-
import { StyleSheet, View } from 'react-native';
2+
import { StyleSheet } from 'react-native';
3+
4+
import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated';
35

46
import { AttachmentManagerState } from 'stream-chat';
57

@@ -31,9 +33,13 @@ export const MessageInputLeadingView = () => {
3133
}, [textComposer, hasAttachments]);
3234

3335
return command && !hasAttachments ? (
34-
<View style={styles.giphyContainer}>
36+
<Animated.View
37+
entering={ZoomIn.duration(200)}
38+
exiting={ZoomOut.duration(200)}
39+
style={styles.giphyContainer}
40+
>
3541
<GiphyChip />
36-
</View>
42+
</Animated.View>
3743
) : null;
3844
};
3945

‎package/src/components/Poll/CreatePollContent.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ export const CreatePollContent = () => {
157157
<MultipleAnswersField />
158158
<View style={[styles.optionCard, anonymousPoll.wrapper]}>
159159
<View style={[styles.optionCardContent, anonymousPoll.optionCardContent]}>
160-
<Text style={[styles.title, anonymousPoll.title]}>{t('Anonymous poll')}</Text>
160+
<Text style={[styles.title, anonymousPoll.title]}>{t('Anonymous voting')}</Text>
161161
<Text style={[styles.description, anonymousPoll.description]}>Hide who voted</Text>
162162
</View>
163163

@@ -273,14 +273,14 @@ const useStyles = () => {
273273
alignItems: 'center',
274274
justifyContent: 'space-between',
275275
flexDirection: 'row',
276-
backgroundColor: semantics.inputOptionCardBg,
276+
backgroundColor: semantics.backgroundCoreSurfaceCard,
277277
padding: primitives.spacingMd,
278278
borderRadius: primitives.radiusLg,
279279
},
280280
optionCardWrapper: {
281281
gap: primitives.spacingMd,
282282
},
283-
optionCardSwitch: {},
283+
optionCardSwitch: { width: 64 },
284284
});
285285
}, [semantics]);
286286
};

‎package/src/components/Poll/Poll.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const PollHeader = () => {
3232

3333
const subtitle = useMemo(() => {
3434
if (isClosed) {
35-
return t('Vote ended');
35+
return t('Poll has ended');
3636
}
3737
if (enforceUniqueVote) {
3838
return t('Select one');

‎package/src/components/Poll/components/CreatePollHeader.tsx‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React, { useMemo } from 'react';
1+
import React, { useCallback, useMemo } from 'react';
22
import { StyleSheet, Text, View } from 'react-native';
33

44
import { useTheme } from '../../../contexts/themeContext/ThemeContext';
55
import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
6-
import { IconProps, SendPoll } from '../../../icons';
6+
import { Check, IconProps } from '../../../icons';
77
import { NewCross } from '../../../icons/NewCross';
88
import { primitives } from '../../../theme';
99
import { Button } from '../../ui';
@@ -41,18 +41,12 @@ export const CreatePollHeader = ({
4141
} = useTheme();
4242
const styles = useStyles();
4343

44-
const renderSendPollIcon = (props: IconProps) => {
45-
return (
46-
<SendPoll
47-
{...props}
48-
height={18}
49-
fill={semantics.textOnAccent}
50-
width={18}
51-
stroke={'none'}
52-
strokeWidth={0}
53-
/>
54-
);
55-
};
44+
const renderSendPollIcon = useCallback(
45+
(props: IconProps) => {
46+
return <Check {...props} height={18} stroke={semantics.textOnAccent} width={18} />;
47+
},
48+
[semantics.textOnAccent],
49+
);
5650

5751
return (
5852
<View style={[styles.headerContainer, headerContainer]}>

0 commit comments

Comments
 (0)