From abeed9cebe55767de11b9ff944f125c80703ea2e Mon Sep 17 00:00:00 2001 From: Justin Wyne <1986068+wyne@users.noreply.github.com> Date: Fri, 17 Nov 2023 20:13:56 -0800 Subject: [PATCH 1/6] App Settings styles and Game setting styles --- src/components/Buttons/CheckButton.tsx | 7 +- src/components/EditGame.tsx | 49 +++++----- src/components/EditPlayer.tsx | 50 +++++++--- src/components/Rounds.tsx | 2 +- src/components/ScoreLog/PlayerNameColumn.tsx | 22 +---- src/screens/AppInfoScreen.tsx | 99 ++++++++++++++------ src/screens/SettingsScreen.tsx | 74 ++++++++------- src/screens/ShareScreen.tsx | 2 +- 8 files changed, 185 insertions(+), 120 deletions(-) diff --git a/src/components/Buttons/CheckButton.tsx b/src/components/Buttons/CheckButton.tsx index c05d8c92..37553f7b 100644 --- a/src/components/Buttons/CheckButton.tsx +++ b/src/components/Buttons/CheckButton.tsx @@ -4,8 +4,8 @@ import { NativeStackNavigationProp } from '@react-navigation/native-stack'; import { ParamListBase } from '@react-navigation/native'; import HeaderButton from './HeaderButton'; -import { Icon } from 'react-native-elements/dist/icons/Icon'; import { systemBlue } from '../../constants'; +import { Text } from 'react-native'; interface Props { navigation: NativeStackNavigationProp; @@ -17,10 +17,7 @@ const CheckButton: React.FunctionComponent = ({ navigation }) => { await analytics().logEvent('save_game'); navigation.goBack(); }}> - + Done ); }; diff --git a/src/components/EditGame.tsx b/src/components/EditGame.tsx index d9683947..3e94a8c4 100644 --- a/src/components/EditGame.tsx +++ b/src/components/EditGame.tsx @@ -37,41 +37,48 @@ const EditGame = ({ }) => { }; return ( - - - - Created: {new Date(currentGame.dateCreated).toLocaleDateString()} -   {new Date(currentGame.dateCreated).toLocaleTimeString()} - - + <> + + + + + + Created: {new Date(currentGame.dateCreated).toLocaleDateString()} +   {new Date(currentGame.dateCreated).toLocaleTimeString()} + + + ); }; const styles = StyleSheet.create({ - container: { + inputContainer: { alignItems: 'flex-start', flexDirection: 'column', justifyContent: 'flex-start', - margin: 10, + backgroundColor: '#222', + borderRadius: 10, + padding: 2, + paddingHorizontal: 10, marginVertical: 5, + marginHorizontal: 10, }, input: { color: '#eee', }, creation: { color: '#eee', - margin: 10, } }); diff --git a/src/components/EditPlayer.tsx b/src/components/EditPlayer.tsx index 175b1d99..bd998c2d 100644 --- a/src/components/EditPlayer.tsx +++ b/src/components/EditPlayer.tsx @@ -1,13 +1,14 @@ import React from 'react'; -import { Text, View, StyleSheet, TouchableOpacity, NativeSyntheticEvent, TextInputEndEditingEventData } from 'react-native'; +import { Text, View, StyleSheet, TouchableOpacity, NativeSyntheticEvent, TextInputEndEditingEventData, Alert } from 'react-native'; import { Icon, Input } from 'react-native-elements'; -import { palette, systemBlue } from '../constants'; +import { palette } from '../constants'; import { selectGameById, updateGame } from '../../redux/GamesSlice'; import { selectPlayerById } from '../../redux/PlayersSlice'; import { removePlayer, updatePlayer } from '../../redux/PlayersSlice'; import analytics from '@react-native-firebase/analytics'; import { useAppDispatch, useAppSelector } from '../../redux/hooks'; +import Animated from 'react-native-reanimated'; interface Props { playerId: string; @@ -32,7 +33,6 @@ const EditPlayer: React.FunctionComponent = ({ playerId, index, setPlayer playerName: name, } })); - // dispatch(playerNameSet(index, name)); setPlayerWasAdded(false); }; @@ -73,21 +73,39 @@ const EditPlayer: React.FunctionComponent = ({ playerId, index, setPlayer } })(); + const deleteConfirmHandler = async () => { + Alert.alert( + "Delete Player", + "Are you sure you want to delete this player? This will delete all scores for this player.", + [ + { + text: "Cancel", + style: "cancel", + }, + { + text: "Delete", + onPress: () => { + deleteHandler(); + } + } + ] + ); + }; + const DeleteButton = ({ }) => { if (index == 0) { return <>; }; return - - - Delete + + ; }; return ( - + {index + 1} @@ -109,10 +127,11 @@ const EditPlayer: React.FunctionComponent = ({ playerId, index, setPlayer renderErrorMessage={false} selectTextOnFocus={true} style={styles.input} + inputContainerStyle={{ borderBottomWidth: 0 }} /> - + ); }; @@ -121,12 +140,16 @@ const styles = StyleSheet.create({ alignItems: 'center', flexDirection: 'row', justifyContent: 'flex-start', - margin: 10, + backgroundColor: '#222', + borderRadius: 10, + padding: 2, + paddingHorizontal: 10, marginVertical: 5, + marginHorizontal: 10, }, playerNumber: { - color: systemBlue, - fontSize: 35, + color: '#eee', + fontSize: 25, fontVariant: ['tabular-nums'], fontWeight: "bold", padding: 5, @@ -134,11 +157,10 @@ const styles = StyleSheet.create({ colorBadge: { borderColor: '#eee', borderRadius: 25, - borderWidth: 1, - height: 30, + height: 25, marginHorizontal: 5, padding: 5, - width: 30, + width: 25, }, input: { color: '#eee', diff --git a/src/components/Rounds.tsx b/src/components/Rounds.tsx index 55c1463b..49b30074 100644 --- a/src/components/Rounds.tsx +++ b/src/components/Rounds.tsx @@ -55,7 +55,7 @@ const Rounds: React.FunctionComponent = ({ navigation }) => { return ( - + ; - disabled?: boolean; -} - -const PlayerNameColumn: React.FunctionComponent = ({ navigation, disabled = false }) => { +const PlayerNameColumn: React.FunctionComponent = ({ }) => { const currentGameId = useAppSelector(state => state.settings.currentGameId); const currentGame = useAppSelector(state => selectGameById(state, currentGameId)); @@ -27,29 +22,22 @@ const PlayerNameColumn: React.FunctionComponent = ({ navigation, disabled ).sort((a, b) => currentGame.playerIds.indexOf(a.id) - currentGame.playerIds.indexOf(b.id)); return ( - { - if (disabled) return; - - await analytics().logEvent('edit_game', { - game_id: currentGameId - }); - navigation.navigate("Settings"); - }}> +   + color='white' /> {players.map((player, index) => ( - + {player.playerName} ))} - + ); }; diff --git a/src/screens/AppInfoScreen.tsx b/src/screens/AppInfoScreen.tsx index fdb4a8bc..0b4abfa1 100644 --- a/src/screens/AppInfoScreen.tsx +++ b/src/screens/AppInfoScreen.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Text, View, StyleSheet, Alert, ScrollView } from 'react-native'; +import { Text, View, StyleSheet, Alert, ScrollView, Linking } from 'react-native'; import { Platform, Switch } from 'react-native'; import * as Application from 'expo-application'; import analytics from '@react-native-firebase/analytics'; @@ -15,6 +15,26 @@ interface Props { navigation: NativeStackNavigationProp; } +const Section = ({ children, title }: { children: React.ReactNode, title: string }) => ( + <> + {title} + + {children} + + +); +const SectionItem = ({ children }: { children: React.ReactNode }) => ( + + {children} + +); +const SectionItemText = ({ text }: { text: string }) => ( + {text} +); +const SectionSeparator = () => ( + +); + const AppInfoScreen: React.FunctionComponent = ({ navigation }) => { const buildNumber = Application.nativeBuildVersion; const appVersion = Application.nativeApplicationVersion; @@ -33,7 +53,7 @@ const AppInfoScreen: React.FunctionComponent = ({ navigation }) => { }; return ( - + @@ -41,25 +61,34 @@ const AppInfoScreen: React.FunctionComponent = ({ navigation }) => { - - Settings - - - Point particle effect - +
+ + - - + +
+ +
+ + +
+ +
+ + + + + +
- - Instructions - - Tap the button below to view the onboarding tutorial. - -