Merge pull request #52 from djwesty/djwesty/51

Improve layout of decrement+increment buttons (Issue #51)

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}

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}

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}
+      />
     </>
   );
 };

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>