Cleanup

redux/SettingsSlice.ts

@@ -14,6 +14,7 @@ export interface SettingsState {
     onboarded: string | undefined;
     showPointParticles: boolean;
     showPlayerIndex: boolean;
+    showColorPalettes?: boolean;
     interactionType: InteractionType;
     lastStoreReviewPrompt: number;
 };
@@ -48,6 +49,9 @@ const settingsSlice = createSlice({
         toggleShowPlayerIndex(state) {
             state.showPlayerIndex = !state.showPlayerIndex;
         },
+        toggleShowColorPalettes(state) {
+            state.showColorPalettes = !state.showColorPalettes;
+        },
         setMultiplier(state, action: PayloadAction<number>) {
             state.multiplier = action.payload;
         },
@@ -80,6 +84,7 @@ export const {
     setOnboardedVersion,
     toggleShowPointParticles,
     toggleShowPlayerIndex,
+    toggleShowColorPalettes,
     setInteractionType,
     setLastStoreReviewPrompt,
 } = settingsSlice.actions;

src/components/ColorPalettes/PalettePreview.tsx

@@ -18,9 +18,10 @@ const PalettePreview: React.FunctionComponent<Props> = ({ colors, selected }) =>
             width: 40, height: 40,
             flexDirection: 'row',
             flexWrap: 'wrap',
-            borderColor: selected ? '#eee' : 'transparent',
+            borderColor: selected ? 'white' : 'transparent',
             borderWidth: 1,
             borderRadius: 3,
+            padding: 1,
         }}>
             {colors.map((color, index) => (
                 <View

src/components/Sheets/GameSheet.tsx

@@ -190,6 +190,8 @@ const GameSheet: React.FunctionComponent<Props> = ({ navigation, containerHeight
         []
     );
 
+    const showColorPalettes = useAppSelector(state => state.settings.showColorPalettes);
+
     return (
         <BottomSheet
             ref={gameSheetRef}
@@ -229,11 +231,10 @@ const GameSheet: React.FunctionComponent<Props> = ({ navigation, containerHeight
 
                     <Animated.View style={[styles.sheetContent, animatedSheetStyle]}>
                         <Rounds navigation={navigation} show={!fullscreen} />
-                        <Text style={{ color: 'white', margin: 10, marginTop: 0 }}>
-                            Tap on a column to set the current round.
-                        </Text>
 
-                        <PaletteSelector />
+                        {showColorPalettes &&
+                            <PaletteSelector />
+                        }
 
                         <Animated.View layout={Layout.delay(200)}>
 

src/screens/AppInfoScreen.tsx

@@ -8,7 +8,7 @@ import { Alert, Linking, Platform, ScrollView, StyleSheet, Switch, Text, View }
 import { Button } from 'react-native-elements';
 
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
-import { toggleShowPlayerIndex, toggleShowPointParticles } from '../../redux/SettingsSlice';
+import { toggleShowColorPalettes, toggleShowPlayerIndex, toggleShowPointParticles } from '../../redux/SettingsSlice';
 import RotatingIcon from '../components/AppInfo/RotatingIcon';
 
 interface Props {
@@ -41,10 +41,12 @@ const AppInfoScreen: React.FunctionComponent<Props> = ({ navigation }) => {
 
     const showPointParticles = useAppSelector(state => state.settings.showPointParticles);
     const showPlayerIndex = useAppSelector(state => state.settings.showPlayerIndex);
+    const showColorPalettes = useAppSelector(state => state.settings.showColorPalettes);
 
     const dispatch = useAppDispatch();
     const toggleParticleSwitch = () => { dispatch(toggleShowPointParticles()); };
     const togglePlayerIndexSwitch = () => { dispatch(toggleShowPlayerIndex()); };
+    const toggleColorPalettesSwitch = () => { dispatch(toggleShowColorPalettes()); };
 
     const alertWithVersion = async () => {
         Alert.alert('ScorePad with Rounds\n' +
@@ -76,6 +78,10 @@ const AppInfoScreen: React.FunctionComponent<Props> = ({ navigation }) => {
                     <SectionItemText text="Player Numbers" />
                     <Switch onValueChange={togglePlayerIndexSwitch} value={showPlayerIndex} />
                 </SectionItem>
+                <SectionItem>
+                    <SectionItemText text="Color Palettes" />
+                    <Switch onValueChange={toggleColorPalettesSwitch} value={showColorPalettes} />
+                </SectionItem>
             </Section>
 
             <Section title="Help">

src/screens/EditPlayerScreen.tsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import analytics from '@react-native-firebase/analytics';
 import { ParamListBase, RouteProp } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { NativeSyntheticEvent, ScrollView, StyleSheet, Text, TextInput, TextInputEndEditingEventData, View } from 'react-native';
+import { NativeSyntheticEvent, ScrollView, StyleSheet, TextInput, TextInputEndEditingEventData, View } from 'react-native';
 import { Input } from 'react-native-elements';
 
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
@@ -118,9 +118,6 @@ const EditPlayerScreen: React.FC<EditPlayerScreenProps> = ({
 
             <View style={{ margin: 20 }} />
 
-            <Text style={{ color: 'white' }}>Local State: {localPlayerName}</Text>
-            <Text style={{ color: 'white' }}>Player State: {player.playerName}</Text>
-
         </ScrollView>
     );
 };