diff --git a/src/Navigation.tsx b/src/Navigation.tsx index 4957c7d3..81ebf100 100644 --- a/src/Navigation.tsx +++ b/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 = () => { , headerTransparent: isIOS, headerBlurEffect: isIOS ? 'systemChromeMaterial' : undefined, headerShadowVisible: isAndroid, diff --git a/src/components/GameListItem.tsx b/src/components/GameListItem.tsx index e2f43d9e..a5490793 100644 --- a/src/components/GameListItem.tsx +++ b/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 = ({ 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 = ({ navigation, gameId, inde onPress={Platform.OS == 'android' ? undefined : chooseGameHandler} containerStyle={{ backgroundColor: theme.backgroundSecondary, borderBottomColor: theme.separator }} > - - - - {gameTitle} - {locked && } - - - {timeAgo(dateCreated)} - - - {playerIds.map((playerId, index) => ( - - ))} - - - - {playerIds.length} - - - {roundCount} - - + + + + + + {gameTitle} + {locked && } + + + {timeAgo(dateCreated)} + + + {playerIds.map((playerId, index) => ( + + ))} + + + + {playerIds.length} + + + {roundCount} + + + @@ -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); diff --git a/src/components/Headers/AppWordmark.tsx b/src/components/Headers/AppWordmark.tsx new file mode 100644 index 00000000..a01782ba --- /dev/null +++ b/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 ( + + + + Scorepad + with rounds + + + ); +}; + +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;