From 2e5efda69a90a705a94b17bc9b5584d369cda88a Mon Sep 17 00:00:00 2001
From: David Westgate <davidjwestgate@gmail.com>
Date: Mon, 17 Mar 2025 23:48:31 -0700
Subject: [PATCH] abstract picker component; added small buttons; visual tweaks

---
 app/index.tsx                   | 33 +++++++--------------
 components/CurrencySelector.tsx | 52 +++++----------------------------
 containers/Button.tsx           | 39 ++++++++++++++++---------
 containers/Picker.tsx           | 49 +++++++++++++++++++++++++++++++
 styles/styles.ts                |  6 +++-
 5 files changed, 98 insertions(+), 81 deletions(-)
 create mode 100644 containers/Picker.tsx

diff --git a/app/index.tsx b/app/index.tsx
index 704688a..97c3a43 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -15,8 +15,9 @@ import {
 import styles, { COLORS } from "@/styles/styles";
 import Section from "@/containers/Section";
 import AppContext from "@/util/context";
-import { Picker } from "@react-native-picker/picker";
 import i18n from "@/i18n/i18n";
+import { Picker, PickerItem } from "@/containers/Picker";
+import { ItemValue } from "@react-native-picker/picker/typings/Picker";
 
 const IndexScreen: React.FC = () => {
   const [playerCount, setPlayerCount] = useState(2);
@@ -84,9 +85,9 @@ const IndexScreen: React.FC = () => {
     }
   };
 
-  const handleLanguageChange = (language: string) => {
-    setSelectedLanguage(language);
-    i18n.changeLanguage(language);
+  const handleLanguageChange = (language: ItemValue, _: any) => {
+    setSelectedLanguage(language.toString());
+    i18n.changeLanguage(language.toString());
   };
 
   return (
@@ -121,25 +122,9 @@ const IndexScreen: React.FC = () => {
             <Picker
               selectedValue={selectedLanguage}
               onValueChange={handleLanguageChange}
-              style={[styles.picker, { color: colors.TEXT }]}
-              dropdownIconColor={colors.TEXT}
             >
-              <Picker.Item
-                label={i18n.t("english")}
-                value="en"
-                style={{
-                  color: colors.TEXT,
-                  backgroundColor: colors.PRIMARY,
-                }}
-              />
-              <Picker.Item
-                label={i18n.t("spanish")}
-                value="es"
-                style={{
-                  color: colors.TEXT,
-                  backgroundColor: colors.PRIMARY,
-                }}
-              />
+              <PickerItem label={i18n.t("english")} value="en" />
+              <PickerItem label={i18n.t("spanish")} value="es" />
             </Picker>
           </Section>
 
@@ -227,19 +212,23 @@ const IndexScreen: React.FC = () => {
             title={i18n.t("save_slot_1")}
             onPress={() => handleSave("SLOT1")}
             disabled={buyInAmount === null}
+            size="small"
           />
           <Button
             title={i18n.t("save_slot_2")}
             onPress={() => handleSave("SLOT2")}
             disabled={buyInAmount === null}
+            size="small"
           />
           <Button
             title={i18n.t("load_slot_1")}
             onPress={() => handleLoad("SLOT1")}
+            size="small"
           />
           <Button
             title={i18n.t("load_slot_2")}
             onPress={() => handleLoad("SLOT2")}
+            size="small"
           />
         </>
       </Section>
diff --git a/components/CurrencySelector.tsx b/components/CurrencySelector.tsx
index b67214a..3224d0d 100644
--- a/components/CurrencySelector.tsx
+++ b/components/CurrencySelector.tsx
@@ -1,8 +1,6 @@
-import React, { useMemo } from "react";
-import { Picker } from "@react-native-picker/picker";
-import styles, { COLORS } from "@/styles/styles";
+import React from "react";
 import i18n from "@/i18n/i18n";
-import { useColorScheme } from "react-native";
+import { Picker, PickerItem } from "@/containers/Picker";
 
 interface CurrencySelectorProps {
   selectedCurrency: string;
@@ -13,53 +11,17 @@ const CurrencySelector: React.FC<CurrencySelectorProps> = ({
   selectedCurrency,
   setSelectedCurrency,
 }) => {
-  const colorScheme = useColorScheme();
-  const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]);
-  const colors = useMemo(
-    () => (darkMode ? COLORS.DARK : COLORS.LIGHT),
-    [darkMode]
-  );
   return (
     <>
       <Picker
         selectedValue={selectedCurrency}
-        onValueChange={(itemValue) => setSelectedCurrency(itemValue)}
-        style={[styles.picker, { color: colors.TEXT }]}
-        dropdownIconColor={colors.TEXT}
+        onValueChange={(itemValue) => setSelectedCurrency(itemValue.toString())}
         testID="currency-picker" // ✅ Add testID here
       >
-        <Picker.Item
-          label={i18n.t("usd")}
-          value="$"
-          style={{
-            color: colors.TEXT,
-            backgroundColor: colors.PRIMARY,
-          }}
-        />
-        <Picker.Item
-          label={i18n.t("euro")}
-          value="€"
-          style={{
-            color: colors.TEXT,
-            backgroundColor: colors.PRIMARY,
-          }}
-        />
-        <Picker.Item
-          label={i18n.t("pound")}
-          value="£"
-          style={{
-            color: colors.TEXT,
-            backgroundColor: colors.PRIMARY,
-          }}
-        />
-        <Picker.Item
-          label={i18n.t("inr")}
-          value="₹"
-          style={{
-            color: colors.TEXT,
-            backgroundColor: colors.PRIMARY,
-          }}
-        />
+        <PickerItem label={i18n.t("usd")} value="$" />
+        <PickerItem label={i18n.t("euro")} value="€" />
+        <PickerItem label={i18n.t("pound")} value="£" />
+        <PickerItem label={i18n.t("inr")} value="₹" />
       </Picker>
     </>
   );
diff --git a/containers/Button.tsx b/containers/Button.tsx
index 6285f15..5a4dd66 100644
--- a/containers/Button.tsx
+++ b/containers/Button.tsx
@@ -11,9 +11,15 @@ interface ButtonProps {
   title: string;
   onPress: () => void;
   disabled?: boolean;
+  size?: "normal" | "small";
 }
 
-const Button: React.FC<ButtonProps> = ({ title, onPress, disabled }) => {
+const Button: React.FC<ButtonProps> = ({
+  title,
+  onPress,
+  disabled,
+  size = "normal",
+}) => {
   const colorScheme = useColorScheme();
   const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]);
   const colors = useMemo(
@@ -26,12 +32,19 @@ const Button: React.FC<ButtonProps> = ({ title, onPress, disabled }) => {
       disabled={disabled}
       accessibilityRole="button"
       style={[
-        styles.button,
+        size == "normal" ? styles.button : styles.buttonSmall,
         { backgroundColor: colors.PRIMARY },
         disabled && styles.disabled,
       ]}
     >
-      <Text style={[styles.buttonText, { color: colors.TEXT }]}>{title}</Text>
+      <Text
+        style={[
+          size == "normal" ? styles.buttonText : styles.buttonTextSmall,
+          { color: colors.TEXT },
+        ]}
+      >
+        {title}
+      </Text>
     </TouchableOpacity>
   );
 };
@@ -44,22 +57,22 @@ const styles = StyleSheet.create({
     marginHorizontal: 5,
     marginVertical: 5,
   },
-  darkButton: {
-    backgroundColor: "#333333",
-  },
-  lightButton: {
-    backgroundColor: "#DDDDDD",
-  },
   buttonText: {
     fontSize: 16,
     fontWeight: "bold",
     textAlign: "center",
   },
-  darkText: {
-    color: "#FFFFFF",
+  buttonSmall: {
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+    borderRadius: 8,
+    marginHorizontal: 2,
+    marginVertical: 2,
   },
-  lightText: {
-    color: "#000000",
+  buttonTextSmall: {
+    fontSize: 12,
+    fontWeight: "bold",
+    textAlign: "center",
   },
   disabled: {
     opacity: 0.5,
diff --git a/containers/Picker.tsx b/containers/Picker.tsx
new file mode 100644
index 0000000..2d7a68c
--- /dev/null
+++ b/containers/Picker.tsx
@@ -0,0 +1,49 @@
+import styles, { COLORS } from "@/styles/styles";
+import { PickerItemProps, PickerProps } from "@react-native-picker/picker";
+import { useMemo } from "react";
+import { useColorScheme, View } from "react-native";
+import { Picker as RNPicker } from "@react-native-picker/picker";
+
+export const PickerItem: React.FC<PickerItemProps> = (props) => {
+  const colorScheme = useColorScheme();
+  const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]);
+  const colors = useMemo(
+    () => (darkMode ? COLORS.DARK : COLORS.LIGHT),
+    [darkMode]
+  );
+
+  return (
+    <RNPicker.Item
+      style={[
+        styles.pickerItem,
+        { color: colors.TEXT, backgroundColor: colors.PRIMARY },
+      ]}
+      {...props}
+    />
+  );
+};
+
+export const Picker: React.FC<PickerProps> = (props) => {
+  const colorScheme = useColorScheme();
+  const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]);
+  const colors = useMemo(
+    () => (darkMode ? COLORS.DARK : COLORS.LIGHT),
+    [darkMode]
+  );
+
+  return (
+    <View style={styles.pickerWrapper}>
+      <RNPicker
+        style={[
+          styles.picker,
+          {
+            color: colors.TEXT,
+            backgroundColor: colors.PRIMARY,
+          },
+        ]}
+        dropdownIconColor={colors.TEXT}
+        {...props}
+      />
+    </View>
+  );
+};
diff --git a/styles/styles.ts b/styles/styles.ts
index fca2156..0b17051 100644
--- a/styles/styles.ts
+++ b/styles/styles.ts
@@ -32,7 +32,7 @@ const GlobalStyles = StyleSheet.create({
     gap: 10,
   },
 
-  h1: { fontSize: 20, fontWeight: "bold" },
+  h1: { fontSize: 19, fontWeight: "bold" },
   h2: { fontSize: 18, fontWeight: "normal" },
   p: {
     fontSize: 16,
@@ -63,6 +63,10 @@ const GlobalStyles = StyleSheet.create({
     width: 150,
   },
   pickerItem: {},
+  pickerWrapper: {
+    borderRadius: 10,
+    overflow: "hidden",
+  },
 });
 
 export default GlobalStyles;