app/index.tsx

@@ -104,6 +104,7 @@ const IndexScreen: React.FC = () => {
                 : i18n.t("switch_to_gray_mode")
             }
             onPress={() => setLightGrayMode(!lightGrayMode)}
+            darkMode={lightGrayMode}
           />
         </Section>
 
@@ -146,6 +147,7 @@ const IndexScreen: React.FC = () => {
           <PlayerSelector
             playerCount={playerCount}
             setPlayerCount={setPlayerCount}
+            darkMode={lightGrayMode}
           />
         </Section>
 
@@ -156,6 +158,7 @@ const IndexScreen: React.FC = () => {
           <BuyInSelector
             selectedCurrency={selectedCurrency}
             setBuyInAmount={setBuyInAmount}
+            darkMode={lightGrayMode}
           />
         </Section>
 
@@ -169,6 +172,7 @@ const IndexScreen: React.FC = () => {
               setTotalChipsCount(chipCountArray);
               setNumberOfChips(chipCountArray.length);
             }}
+            darkMode={lightGrayMode}
           />
         </Section>
 
@@ -183,6 +187,7 @@ const IndexScreen: React.FC = () => {
             setTotalChipsCount={setTotalChipsCount}
             numberOfChips={numberOfChips}
             setNumberOfChips={setNumberOfChips}
+            darkMode={lightGrayMode}
           />
         </Section>
 
@@ -203,24 +208,30 @@ const IndexScreen: React.FC = () => {
           iconName={"save"}
           orientation="row"
         >
+          <>
             <Button
               title={i18n.t("save_slot_1")}
               onPress={() => handleSave("SLOT1")}
               disabled={buyInAmount === null}
+              darkMode={lightGrayMode}
             />
             <Button
               title={i18n.t("save_slot_2")}
               onPress={() => handleSave("SLOT2")}
               disabled={buyInAmount === null}
+              darkMode={lightGrayMode}
             />
             <Button
               title={i18n.t("load_slot_1")}
               onPress={() => handleLoad("SLOT1")}
+              darkMode={lightGrayMode}
             />
             <Button
               title={i18n.t("load_slot_2")}
               onPress={() => handleLoad("SLOT2")}
+              darkMode={lightGrayMode}
             />
+          </>
         </Section>
       </ScrollView>
     </PokerAppUi>

components/BuyInSelector.tsx

@@ -7,6 +7,7 @@ import i18n from "@/i18n/i18n";
 interface BuyInSelectorProps {
   setBuyInAmount: React.Dispatch<React.SetStateAction<number>>;
   selectedCurrency: string;
+  darkMode: boolean;
 }
 
 const defaultBuyInOptions = [10, 25, 50];
@@ -22,6 +23,7 @@ const parseRoundClamp = (num: string): number => {
 const BuyInSelector: React.FC<BuyInSelectorProps> = ({
   setBuyInAmount,
   selectedCurrency,
+  darkMode,
 }) => {
   const [customAmount, setCustomAmount] = useState("");
   const [buyInAmount, setBuyInAmountState] = useState<number | null>(null);
@@ -51,9 +53,9 @@ const BuyInSelector: React.FC<BuyInSelectorProps> = ({
         {defaultBuyInOptions.map((amount) => (
           <Button
             key={amount}
-            color={buyInAmount === amount ? COLORS.PRIMARY : COLORS.SECONDARY}
             onPress={() => handleBuyInSelection(amount)}
             title={`${selectedCurrency} ${amount}`}
+            darkMode={darkMode}
           />
         ))}
       </View>

components/ChipDetection.tsx

@@ -6,8 +6,10 @@ import i18n from "@/i18n/i18n";
 
 const ChipDetection = ({
   updateChipCount,
+  darkMode,
 }: {
   updateChipCount: (chipData: Record<string, number>) => void;
+  darkMode: boolean;
 }) => {
   const [imageUri, setImageUri] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
@@ -94,7 +96,7 @@ const ChipDetection = ({
       const result = await response.json();
 
       if (!response.ok || !result.choices || !result.choices[0].message) {
-        throw new Error(i18n.t("invalid_response")); // Translate invalid response error
+        throw new Error(i18n.t("invalid_response"));
       }
 
       const rawContent = result.choices[0].message.content.trim();
@@ -133,8 +135,16 @@ const ChipDetection = ({
           marginBottom: 10,
         }}
       >
-        <Button title={i18n.t("pick_an_image")} onPress={pickImage} />
+        <Button
-        <Button title={i18n.t("take_a_photo")} onPress={takePhoto} />
+          title={i18n.t("pick_an_image")}
+          onPress={pickImage}
+          darkMode={darkMode}
+        />
+        <Button
+          title={i18n.t("take_a_photo")}
+          onPress={takePhoto}
+          darkMode={darkMode}
+        />
       </View>
 
       {imageUri && (

components/ChipsSelector.tsx

@@ -21,18 +21,19 @@ const ChipInputModal = ({
   setShowModal,
   totalChipsCount,
   update,
+  darkMode,
 }: {
   showModal: [boolean, ColorValue];
   setShowModal: React.Dispatch<React.SetStateAction<[boolean, ColorValue]>>;
   totalChipsCount: number[];
   update: Function;
+  darkMode: boolean;
 }) => {
   const color: ColorValue = useMemo(() => showModal[1], [showModal]);
   const colorIdx = useMemo(() => colors.indexOf(color), [color]);
 
   const [value, setValue] = useState<number | undefined>();
 
-  // Reset the color value when the specific color this modal is for changes
   useEffect(() => {
     setValue(totalChipsCount[colorIdx]);
   }, [colorIdx, totalChipsCount]);
@@ -76,6 +77,7 @@ const ChipInputModal = ({
           update(showModal[1], Number.isNaN(value) ? 0 : value);
           setShowModal([false, color]);
         }}
+        darkMode={darkMode}
       />
     </Modal>
   );
@@ -117,11 +119,13 @@ const ChipsSelector = ({
   totalChipsCount,
   setTotalChipsCount,
   setNumberOfChips,
+  darkMode,
 }: {
   numberOfChips: number;
   totalChipsCount: number[];
   setTotalChipsCount: React.Dispatch<React.SetStateAction<number[]>>;
   setNumberOfChips: React.Dispatch<React.SetStateAction<number>>;
+  darkMode: boolean;
 }) => {
   const [showModal, setShowModal] = useState<[boolean, ColorValue]>([
     false,
@@ -129,11 +133,10 @@ const ChipsSelector = ({
   ]);
 
   const colorsUsed = useMemo(
-    () => colors.slice(0, numberOfChips), // Only show as many colors as the `numberOfChips`
+    () => colors.slice(0, numberOfChips),
     [numberOfChips]
   );
 
-  // Callback for ChipInputModal to update the chips in the parent's state.
   const update = useCallback(
     (color: ColorValue, count: number) => {
       const newTotalChipsCount = totalChipsCount.slice();
@@ -144,7 +147,6 @@ const ChipsSelector = ({
     [totalChipsCount, setTotalChipsCount]
   );
 
-  // Handling number of chips to make sure the array updates accordingly
   useEffect(() => {
     if (numberOfChips !== totalChipsCount.length) {
       let newTotalChipsCount = totalChipsCount.slice();
@@ -169,7 +171,8 @@ const ChipsSelector = ({
         onPress={() => {
           setNumberOfChips(Math.max(1, numberOfChips - 1));
         }}
-        disabled={numberOfChips == 1}
+        disabled={numberOfChips === 1}
+        darkMode={darkMode}
       />
       <View style={[styles.container, { flexDirection: "row" }]}>
         {colorsUsed.map((color) => {
@@ -189,7 +192,8 @@ const ChipsSelector = ({
         onPress={() => {
           setNumberOfChips(Math.min(5, numberOfChips + 1));
         }}
-        disabled={numberOfChips == 5}
+        disabled={numberOfChips === 5}
+        darkMode={darkMode}
       />
 
       <ChipInputModal
@@ -197,40 +201,10 @@ const ChipsSelector = ({
         setShowModal={setShowModal}
         totalChipsCount={totalChipsCount}
         update={update}
+        darkMode={darkMode}
       />
     </>
   );
 };
 
-const styles1 = StyleSheet.create({
-  container: {
-    marginBottom: 20,
-    gap: 10,
-  },
-  title: {
-    fontWeight: "bold",
-    margin: "auto",
-    fontSize: 18,
-  },
-  chipContainer: {
-    padding: 20,
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-evenly",
-    backgroundColor: "#bbb",
-  },
-  chip: {
-    textAlign: "center",
-    fontSize: 16,
-    fontWeight: "bold",
-  },
-  buttonContainer: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-evenly",
-  },
-  button: {},
-});
-
 export default ChipsSelector;

components/PlayerSelector.tsx

@@ -6,12 +6,16 @@ import styles from "@/styles/styles";
 interface PlayerSelectorProps {
   playerCount: number;
   setPlayerCount: React.Dispatch<React.SetStateAction<number>>;
+  darkMode: boolean;
 }
+
 const MIN = 2;
 const MAX = 8;
+
 const PlayerSelector: React.FC<PlayerSelectorProps> = ({
   playerCount,
   setPlayerCount,
+  darkMode,
 }) => {
   const increasePlayers = () => {
     if (playerCount < MAX) setPlayerCount(playerCount + 1);
@@ -22,19 +26,21 @@ const PlayerSelector: React.FC<PlayerSelectorProps> = ({
   };
 
   return (
-    <>
+    <View style={{ flexDirection: "row", alignItems: "center" }}>
       <Button
         title="-"
         onPress={decreasePlayers}
         disabled={playerCount <= MIN}
+        darkMode={darkMode}
       />
       <Text style={styles.h1}>{playerCount}</Text>
       <Button
         title="+"
         onPress={increasePlayers}
         disabled={playerCount >= MAX}
+        darkMode={darkMode}
       />
-    </>
+    </View>
   );
 };
 

components/__tests__/BuyInSelector.test.tsx

@@ -19,6 +19,7 @@ describe("BuyInSelector Component", () => {
       <BuyInSelector
         setBuyInAmount={setBuyInAmount}
         selectedCurrency={selectedCurrency}
+        darkMode={false}
       />
     );
     return {

components/__tests__/ChipDetection.test.tsx

@@ -45,7 +45,7 @@ describe("ChipDetection", () => {
 
   it("renders correctly", () => {
     const { getByText } = render(
-      <ChipDetection updateChipCount={mockUpdateChipCount} />
+      <ChipDetection updateChipCount={mockUpdateChipCount} darkMode={false} />
     );
 
     expect(getByText(/pick an image/i)).toBeTruthy();
@@ -59,7 +59,7 @@ describe("ChipDetection", () => {
     });
 
     const { getByText } = render(
-      <ChipDetection updateChipCount={mockUpdateChipCount} />
+      <ChipDetection updateChipCount={mockUpdateChipCount} darkMode={false} />
     );
     fireEvent.press(getByText(/pick an image/i));
 
@@ -78,7 +78,7 @@ describe("ChipDetection", () => {
     });
 
     const { getByText } = render(
-      <ChipDetection updateChipCount={mockUpdateChipCount} />
+      <ChipDetection updateChipCount={mockUpdateChipCount} darkMode={false} />
     );
     fireEvent.press(getByText(/take a photo/i));
 
@@ -99,7 +99,7 @@ describe("ChipDetection", () => {
     });
 
     const { getByText } = render(
-      <ChipDetection updateChipCount={mockUpdateChipCount} />
+      <ChipDetection updateChipCount={mockUpdateChipCount} darkMode={false} />
     );
     fireEvent.press(getByText(/take a photo/i));
 
@@ -126,7 +126,7 @@ describe("ChipDetection", () => {
     );
 
     const { getByText } = render(
-      <ChipDetection updateChipCount={mockUpdateChipCount} />
+      <ChipDetection updateChipCount={mockUpdateChipCount} darkMode={false} />
     );
     fireEvent.press(getByText(/pick an image/i));
 
@@ -159,7 +159,7 @@ describe("ChipDetection", () => {
     );
 
     const { getByText } = render(
-      <ChipDetection updateChipCount={mockUpdateChipCount} />
+      <ChipDetection updateChipCount={mockUpdateChipCount} darkMode={false} />
     );
     fireEvent.press(getByText(/pick an image/i));
 

components/__tests__/ChipsSelector.test.tsx

@@ -28,6 +28,7 @@ const rend = () =>
       totalChipsCount={TOTAL_CHIPS_COUNT}
       setTotalChipsCount={mocktTotalChipsCount}
       setNumberOfChips={mockSetNumberOfChips}
+      darkMode={false}
     />
   );
 
@@ -82,6 +83,7 @@ describe("tests for ChipsSelector", () => {
       TOTAL_CHIPS_COUNT[4],
     ]);
   });
+
   // skip: There is a jest/DOM issue with the button interaction, despite working correctly in-app. Documented to resolve.
   it.skip("test dec/inc buttons", async () => {
     rend();

components/__tests__/PlayerSelector.test.tsx

@@ -6,7 +6,11 @@ describe("PlayerSelector Component", () => {
   it("renders the initial player count and buttons correctly", () => {
     const setPlayerCount = jest.fn();
     const { getByText, getByRole } = render(
-      <PlayerSelector playerCount={4} setPlayerCount={setPlayerCount} />
+      <PlayerSelector
+        playerCount={4}
+        setPlayerCount={setPlayerCount}
+        darkMode={false}
+      />
     );
 
     expect(getByText("4")).toBeTruthy();
@@ -17,7 +21,11 @@ describe("PlayerSelector Component", () => {
   it('increases player count when "+" button is pressed', () => {
     const setPlayerCount = jest.fn();
     const { getByRole } = render(
-      <PlayerSelector playerCount={4} setPlayerCount={setPlayerCount} />
+      <PlayerSelector
+        playerCount={4}
+        setPlayerCount={setPlayerCount}
+        darkMode={false}
+      />
     );
 
     fireEvent.press(getByRole("button", { name: "+" }));
@@ -27,7 +35,11 @@ describe("PlayerSelector Component", () => {
   it('decreases player count when "-" button is pressed', () => {
     const setPlayerCount = jest.fn();
     const { getByRole } = render(
-      <PlayerSelector playerCount={4} setPlayerCount={setPlayerCount} />
+      <PlayerSelector
+        playerCount={4}
+        setPlayerCount={setPlayerCount}
+        darkMode={false}
+      />
     );
 
     fireEvent.press(getByRole("button", { name: "-" }));
@@ -37,7 +49,11 @@ describe("PlayerSelector Component", () => {
   it("does not increase player count beyond 8", () => {
     const setPlayerCount = jest.fn();
     const { getByRole } = render(
-      <PlayerSelector playerCount={8} setPlayerCount={setPlayerCount} />
+      <PlayerSelector
+        playerCount={8}
+        setPlayerCount={setPlayerCount}
+        darkMode={false}
+      />
     );
 
     fireEvent.press(getByRole("button", { name: "+" }));
@@ -47,7 +63,11 @@ describe("PlayerSelector Component", () => {
   it("does not decrease player count below 2", () => {
     const setPlayerCount = jest.fn();
     const { getByRole } = render(
-      <PlayerSelector playerCount={2} setPlayerCount={setPlayerCount} />
+      <PlayerSelector
+        playerCount={2}
+        setPlayerCount={setPlayerCount}
+        darkMode={false}
+      />
     );
 
     fireEvent.press(getByRole("button", { name: "-" }));

containers/Button.tsx

@@ -18,6 +18,7 @@ const Button: React.FC<ButtonProps> = ({
     <TouchableOpacity
       onPress={onPress}
       disabled={disabled}
+      accessibilityRole="button"
       style={[
         styles.button,
         darkMode ? styles.darkButton : styles.lightButton,

i18n/en.json

@@ -46,6 +46,9 @@
     "load_slot_1": "Load\nSlot 1",
     "load_slot_2": "Load\nSlot 2",
     "please_select_valid_buyin": "Please select a valid buy-in amount",
-    "chip_value_warn": "Be advised that the value of the distributed chips does not equal the buy-in for these inputs.\n\nHowever, results shown are fair to all players"
+    "chip_value_warn": "Be advised that the value of the distributed chips does not equal the buy-in for these inputs.\n\nHowever, results shown are fair to all players",
+    "appearance": "Appearance",
+    "switch_to_gray_mode": "Switch to Gray Mode",
+    "switch_to_light_mode": "Switch to Light Mode"
   }
 }

i18n/es.json

@@ -47,6 +47,9 @@
     "load_slot_1": "Cargar\nSlot 1",
     "load_slot_2": "Cargar\nSlot 2",
     "please_select_valid_buyin": "Por favor seleccione una cantidad de buy-in válida",
-    "chip_value_warn": "Tenga en cuenta que el valor de las fichas distribuidas no es igual al buy-in para estas entradas.\n\nSin embargo, los resultados que se muestran son justos para todos los jugadores."
+    "chip_value_warn": "Tenga en cuenta que el valor de las fichas distribuidas no es igual al buy-in para estas entradas.\n\nSin embargo, los resultados que se muestran son justos para todos los jugadores.",
+    "appearance": "Apariencia",
+    "switch_to_gray_mode": "Cambiar a Modo Gris",
+    "switch_to_light_mode": "Cambiar a Modo Claro"
   }
 }