feat: implement full results screen

Author: isekovanic

package/src/components/Poll/components/PollResults/PollOptionFullResults.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { FlatList, type FlatListProps, StyleSheet, Text, View } from 'react-native';
 
 import { PollOption, PollVote as PollVoteClass } from 'stream-chat';
@@ -12,6 +12,7 @@ import {
   useTranslationContext,
 } from '../../../../contexts';
 
+import { primitives } from '../../../../theme';
 import { usePollOptionVotesPagination } from '../../hooks/usePollOptionVotesPagination';
 import { usePollState } from '../../hooks/usePollState';
 
@@ -35,32 +36,40 @@ export const PollOptionFullResultsContent = ({
 
   const {
     theme: {
-      colors: { bg_user, black, white },
       poll: {
-        fullResults: { container, contentContainer, headerContainer, headerText },
+        fullResults: { container, contentContainer, headerContainer, headerText, headerTitle },
       },
     },
   } = useTheme();
+  const styles = useStyles();
 
   const PollOptionFullResultsHeader = useCallback(
     () => (
       <View style={[styles.headerContainer, headerContainer]}>
-        <Text style={[styles.headerText, { color: black }, headerText]}>
+        <Text style={[styles.headerTitle, headerTitle]}>{option.text}</Text>
+        <Text style={[styles.headerText, headerText]}>
           {t('{{count}} votes', { count: voteCountsByOption[option.id] ?? 0 })}
         </Text>
       </View>
     ),
-    [black, headerContainer, headerText, option.id, t, voteCountsByOption],
+    [
+      headerContainer,
+      headerText,
+      headerTitle,
+      option.id,
+      option.text,
+      styles.headerContainer,
+      styles.headerText,
+      styles.headerTitle,
+      t,
+      voteCountsByOption,
+    ],
   );
 
   return (
-    <View style={[styles.container, { backgroundColor: white }, container]}>
+    <View style={[styles.container, container]}>
       <FlatList
-        contentContainerStyle={[
-          styles.contentContainer,
-          { backgroundColor: bg_user },
-          contentContainer,
-        ]}
+        contentContainerStyle={[styles.contentContainer, contentContainer]}
         data={votes}
         keyExtractor={(item) => `option_full_results_${item.id}`}
         ListHeaderComponent={PollOptionFullResultsHeader}
@@ -91,16 +100,42 @@ export const PollOptionFullResults = ({
   </PollContextProvider>
 );
 
-const styles = StyleSheet.create({
-  container: { flex: 1 },
-  contentContainer: {
-    borderRadius: 12,
-    marginBottom: 8,
-    marginHorizontal: 16,
-    marginTop: 16,
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-  },
-  headerContainer: { flexDirection: 'row', justifyContent: 'flex-end', marginBottom: 8 },
-  headerText: { fontSize: 16, marginLeft: 16 },
-});
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: { flex: 1, padding: primitives.spacingMd },
+        contentContainer: {
+          backgroundColor: semantics.backgroundCoreSurfaceCard,
+          borderRadius: primitives.radiusLg,
+          marginBottom: primitives.spacingMd,
+          padding: primitives.spacingMd,
+        },
+        headerContainer: {
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          paddingBottom: primitives.spacingXs,
+        },
+        headerTitle: {
+          flex: 1,
+          fontSize: primitives.typographyFontSizeLg,
+          lineHeight: primitives.typographyLineHeightRelaxed,
+          fontWeight: primitives.typographyFontWeightSemiBold,
+          color: semantics.textPrimary,
+          paddingTop: primitives.spacingXs,
+        },
+        headerText: {
+          fontSize: primitives.typographyFontSizeMd,
+          lineHeight: primitives.typographyLineHeightNormal,
+          fontWeight: primitives.typographyFontWeightSemiBold,
+          color: semantics.textPrimary,
+          marginLeft: primitives.spacingMd,
+        },
+      }),
+    [],
+  );
+};

package/src/components/Poll/components/PollResults/PollResultItem.tsx

@@ -49,11 +49,7 @@ export const ShowAllVotesButton = (props: ShowAllVotesButtonProps) => {
     setShowAllVotes(true);
   }, [message, onPress, option, poll]);
 
-  const {
-    theme: {
-      colors: { white },
-    },
-  } = useTheme();
+  const styles = useStyles();
 
   return (
     <>
@@ -68,8 +64,8 @@ export const ShowAllVotesButton = (props: ShowAllVotesButtonProps) => {
           onRequestClose={() => setShowAllVotes(false)}
           visible={showAllVotes}
         >
-          <SafeAreaViewWrapper style={{ backgroundColor: white, flex: 1 }}>
-            <PollModalHeader onPress={() => setShowAllVotes(false)} title={option.text} />
+          <SafeAreaViewWrapper style={styles.safeArea}>
+            <PollModalHeader onPress={() => setShowAllVotes(false)} title={t('Votes')} />
             <PollOptionFullResults message={message} option={option} poll={poll} />
           </SafeAreaViewWrapper>
         </Modal>
@@ -161,6 +157,10 @@ const useStyles = () => {
           color: semantics.textPrimary,
           marginLeft: primitives.spacingMd,
         },
+        safeArea: {
+          backgroundColor: semantics.backgroundElevationElevation1,
+          flex: 1,
+        },
       }),
     [semantics],
   );

package/src/contexts/themeContext/utils/theme.ts

@@ -837,6 +837,7 @@ export type Theme = {
       contentContainer: ViewStyle;
       headerContainer: ViewStyle;
       headerText: TextStyle;
+      headerTitle: TextStyle;
     };
     inputDialog: {
       button: TextStyle;
@@ -1675,6 +1676,7 @@ export const defaultTheme: Theme = {
       contentContainer: {},
       headerContainer: {},
       headerText: {},
+      headerTitle: {},
     },
     inputDialog: {
       button: {},