From 07cbfe7172be623661849afe51d55c35b4d14ae7 Mon Sep 17 00:00:00 2001
From: David Westgate <davidjwestgate@gmail.com>
Date: Fri, 7 Mar 2025 09:18:25 -0800
Subject: [PATCH] move buttons around; add optional style prop to section
 container

---
 app/index.tsx                 |  3 +++
 components/ChipsSelector.tsx  | 30 ++++++++++++++----------------
 components/PlayerSelector.tsx | 22 ++++++++++------------
 containers/Section.tsx        | 12 ++++++++++--
 4 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/app/index.tsx b/app/index.tsx
index bed4639..6062e36 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -138,6 +138,7 @@ const IndexScreen: React.FC = () => {
         title={i18n.t("select_number_of_players")}
         iconName={"people"}
         orientation="row"
+        contentStyle={{ justifyContent: "center", gap: 30 }}
       >
         <PlayerSelector
           playerCount={playerCount}
@@ -170,6 +171,8 @@ const IndexScreen: React.FC = () => {
       <Section
         title={i18n.t("manual_chip_adjustment")}
         iconName={"account-balance"}
+        orientation="row"
+        contentStyle={{ alignItems: "center" }}
       >
         <ChipsSelector
           totalChipsCount={totalChipsCount}
diff --git a/components/ChipsSelector.tsx b/components/ChipsSelector.tsx
index b39bcdd..25c973c 100644
--- a/components/ChipsSelector.tsx
+++ b/components/ChipsSelector.tsx
@@ -163,6 +163,13 @@ const ChipsSelector = ({
 
   return (
     <>
+      <Button
+        title="-"
+        onPress={() => {
+          setNumberOfChips(Math.max(1, numberOfChips - 1));
+        }}
+        disabled={numberOfChips == 1}
+      />
       <View style={[styles.container, { flexDirection: "row" }]}>
         {colorsUsed.map((color) => (
           <Chip
@@ -173,22 +180,13 @@ const ChipsSelector = ({
           />
         ))}
       </View>
-      <View style={[styles.container, { flexDirection: "row" }]}>
-        <Button
-          title="-"
-          onPress={() => {
-            setNumberOfChips(Math.max(1, numberOfChips - 1));
-          }}
-          disabled={numberOfChips == 1}
-        />
-        <Button
-          title="+"
-          onPress={() => {
-            setNumberOfChips(Math.min(5, numberOfChips + 1));
-          }}
-          disabled={numberOfChips == 5}
-        />
-      </View>
+      <Button
+        title="+"
+        onPress={() => {
+          setNumberOfChips(Math.min(5, numberOfChips + 1));
+        }}
+        disabled={numberOfChips == 5}
+      />
 
       <ChipInputModal
         showModal={showModal}
diff --git a/components/PlayerSelector.tsx b/components/PlayerSelector.tsx
index 3a79983..e4eb0ce 100644
--- a/components/PlayerSelector.tsx
+++ b/components/PlayerSelector.tsx
@@ -23,19 +23,17 @@ const PlayerSelector: React.FC<PlayerSelectorProps> = ({
 
   return (
     <>
+      <Button
+        title="-"
+        onPress={decreasePlayers}
+        disabled={playerCount <= MIN}
+      />
       <Text style={styles.h1}>{playerCount}</Text>
-      <View style={{ flexDirection: "row", gap: 10 }}>
-        <Button
-          title="-"
-          onPress={decreasePlayers}
-          disabled={playerCount <= MIN}
-        />
-        <Button
-          title="+"
-          onPress={increasePlayers}
-          disabled={playerCount >= MAX}
-        />
-      </View>
+      <Button
+        title="+"
+        onPress={increasePlayers}
+        disabled={playerCount >= MAX}
+      />
     </>
   );
 };
diff --git a/containers/Section.tsx b/containers/Section.tsx
index ae883ff..6f1e540 100644
--- a/containers/Section.tsx
+++ b/containers/Section.tsx
@@ -9,17 +9,19 @@ const titleCase = (input: string) =>
     .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
     .join(" ");
 
-//Higher Order Component (HOC) for styling purposes
+// Wrapper container for styling purposes
 const Section = ({
   title,
   iconName,
   children,
   orientation = "column",
+  contentStyle = {},
 }: {
   title: string;
   iconName: string | any;
   children: React.JSX.Element;
   orientation?: "row" | "column";
+  contentStyle?: object;
 }) => {
   return (
     <View style={styles.container}>
@@ -32,7 +34,13 @@ const Section = ({
         />
         <Text style={styles.title}>{titleCase(title)}</Text>
       </View>
-      <View style={{ ...styles.content, flexDirection: orientation }}>
+      <View
+        style={{
+          ...styles.content,
+          ...contentStyle,
+          flexDirection: orientation,
+        }}
+      >
         {children}
       </View>
     </View>