Add AppWordmark header and GameListItem color stripe

src/Navigation.tsx

@@ -7,6 +7,7 @@ import { Platform, View } from 'react-native';
 import { useAppSelector } from '../redux/hooks';
 import AppSettingsButton from '../src/components/Buttons/AppSettingsButton';
 import GameOptionsButton from '../src/components/Buttons/GameOptionsButton';
+import AppWordmark from '../src/components/Headers/AppWordmark';
 import RoundHeaderTitle from '../src/components/Headers/RoundHeaderTitle';
 import AppSettingsScreen from '../src/screens/AppSettingsScreen';
 import DebugLogScreen from '../src/screens/DebugLogScreen';
@@ -64,7 +65,7 @@ export const Navigation = () => {
                         <Stack.Screen name="List" component={ListScreen}
                             options={{
                                 orientation: 'portrait',
-                                title: 'ScorePad',
+                                headerTitle: () => <AppWordmark />,
                                 headerTransparent: isIOS,
                                 headerBlurEffect: isIOS ? 'systemChromeMaterial' : undefined,
                                 headerShadowVisible: isAndroid,

src/components/GameListItem.tsx

@@ -8,6 +8,7 @@ import Animated, { FadeInUp } from 'react-native-reanimated';
 
 import { selectGameById } from '../../redux/GamesSlice';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
+import { selectPlayerById } from '../../redux/PlayersSlice';
 import { setCurrentGameId } from '../../redux/SettingsSlice';
 import { logEvent } from '../Analytics';
 import { useTheme } from '../theme';
@@ -40,6 +41,9 @@ const GameListItem: React.FunctionComponent<Props> = ({ navigation, gameId, inde
     const theme = useTheme();
     const dispatch = useAppDispatch();
     const game = useAppSelector(state => selectGameById(state, gameId));
+    const stripeColor = useAppSelector(
+        state => selectPlayerById(state, game?.playerIds?.[0] ?? '')?.color ?? '#01497c'
+    );
 
     const setCurrentGameCallback = useCallback(() => {
         dispatch(setCurrentGameId(gameId));
@@ -80,28 +84,31 @@ const GameListItem: React.FunctionComponent<Props> = ({ navigation, gameId, inde
                     onPress={Platform.OS == 'android' ? undefined : chooseGameHandler}
                     containerStyle={{ backgroundColor: theme.backgroundSecondary, borderBottomColor: theme.separator }}
                 >
-                    <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1, gap: 16 }}>
-                        <ListItem.Content style={{ flex: 1 }}>
-                            <ListItem.Title style={{ alignItems: 'center', color: theme.text }}>
-                                {gameTitle}
-                                {locked && <Icon name='lock-closed-outline' type='ionicon' size={14} color={theme.success} style={{ paddingHorizontal: 4 }} />}
-                            </ListItem.Title>
-                            <ListItem.Subtitle style={{ color: theme.textTertiary }}>
-                                <Text>{timeAgo(dateCreated)}</Text>
-                            </ListItem.Subtitle>
-                            <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
-                                {playerIds.map((playerId, index) => (
-                                    <GameListItemPlayerName key={playerId} playerId={playerId} last={index == playerIds.length - 1} isWinner={winnerIds?.includes(playerId) === true} />
-                                ))}
-                            </View>
-                        </ListItem.Content>
-                        <Text style={[styles.badgePlayers, { color: theme.badgeBlue }]}>
-                            {playerIds.length} <Icon color={theme.badgeBlue} name='users' type='font-awesome-5' size={16} />
-                        </Text>
-                        <Text style={[styles.badgeRounds, { color: theme.badgeRed }]}>
-                            {roundCount} <Icon color={theme.badgeRed} name='circle-notch' type='font-awesome-5' size={16} />
-                        </Text>
-                        <ListItem.Chevron iconStyle={{ color: theme.separator }} />
+                    <View style={{ flexDirection: 'row', alignItems: 'stretch' }}>
+                        <View style={[styles.stripe, { backgroundColor: stripeColor }]} />
+                        <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1, gap: 16 }}>
+                            <ListItem.Content style={{ flex: 1 }}>
+                                <ListItem.Title style={{ alignItems: 'center', color: theme.text }}>
+                                    {gameTitle}
+                                    {locked && <Icon name='lock-closed-outline' type='ionicon' size={14} color={theme.success} style={{ paddingHorizontal: 4 }} />}
+                                </ListItem.Title>
+                                <ListItem.Subtitle style={{ color: theme.textTertiary }}>
+                                    <Text>{timeAgo(dateCreated)}</Text>
+                                </ListItem.Subtitle>
+                                <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+                                    {playerIds.map((playerId, index) => (
+                                        <GameListItemPlayerName key={playerId} playerId={playerId} last={index == playerIds.length - 1} isWinner={winnerIds?.includes(playerId) === true} />
+                                    ))}
+                                </View>
+                            </ListItem.Content>
+                            <Text style={[styles.badgePlayers, { color: theme.badgeBlue }]}>
+                                {playerIds.length} <Icon color={theme.badgeBlue} name='users' type='font-awesome-5' size={16} />
+                            </Text>
+                            <Text style={[styles.badgeRounds, { color: theme.badgeRed }]}>
+                                {roundCount} <Icon color={theme.badgeRed} name='circle-notch' type='font-awesome-5' size={16} />
+                            </Text>
+                            <ListItem.Chevron iconStyle={{ color: theme.separator }} />
+                        </View>
                     </View>
                 </ListItem>
             </AbstractPopupMenu>
@@ -122,7 +129,14 @@ const styles = StyleSheet.create({
     badgeRounds: {
         alignItems: 'center',
         fontSize: 20,
-    }
+    },
+    stripe: {
+        width: 5,
+        borderRadius: 3,
+        marginVertical: 8,
+        marginLeft: 4,
+        marginRight: 4,
+    },
 });
 
 export default memo(GameListItem);

src/components/Headers/AppWordmark.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Image, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from '../../theme';
+
+const AppWordmark: React.FC = () => {
+    const theme = useTheme();
+    return (
+        <View style={styles.row}>
+            <Image
+                source={require('../../../assets/icon.png')}
+                style={styles.icon}
+                resizeMode="cover"
+            />
+            <View style={styles.lockup}>
+                <Text style={[styles.name, { color: theme.headerText }]}>Scorepad</Text>
+                <Text style={styles.sub}>with rounds</Text>
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 9,
+    },
+    icon: {
+        width: 28,
+        height: 28,
+        borderRadius: 7,
+    },
+    lockup: {
+        flexDirection: 'column',
+        gap: 2,
+    },
+    name: {
+        fontSize: 16,
+        fontWeight: '900',
+        letterSpacing: -0.2,
+        lineHeight: 18,
+    },
+    sub: {
+        fontSize: 8,
+        fontWeight: '800',
+        letterSpacing: 1.6,
+        textTransform: 'uppercase',
+        color: '#F5C800',
+        lineHeight: 10,
+    },
+});
+
+export default AppWordmark;