From a3e0ba84cb5b79eb4dc9e52fdadb82e0bcc8d7dd Mon Sep 17 00:00:00 2001
From: Tiffany Barclay <tiffany@neromotion.co.nz>
Date: Wed, 30 Nov 2022 20:47:16 +1300
Subject: [PATCH] Change width of select label

---
 Select.tsx       | 6 ++++--
 SettingsPage.tsx | 9 +++++++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/Select.tsx b/Select.tsx
index 5e580a1..42ee202 100644
--- a/Select.tsx
+++ b/Select.tsx
@@ -1,5 +1,5 @@
 import {useCallback, useMemo, useState} from 'react'
-import {View} from 'react-native'
+import {StyleProp, View, ViewStyle} from 'react-native'
 import {Button, Menu, Subheading, useTheme} from 'react-native-paper'
 
 export interface Item {
@@ -13,11 +13,13 @@ export default function Select({
   onChange,
   items,
   label,
+  style,
 }: {
   value: string
   onChange: (value: string) => void
   items: Item[]
   label?: string
+  style?: StyleProp<ViewStyle>
 }) {
   const [show, setShow] = useState(false)
   const {colors} = useTheme()
@@ -41,7 +43,7 @@ export default function Select({
         flexDirection: 'row',
         alignItems: 'center',
       }}>
-      {label && <Subheading>{label}</Subheading>}
+      {label && <Subheading style={style}>{label}</Subheading>}
       <Menu
         visible={show}
         onDismiss={() => setShow(false)}
diff --git a/SettingsPage.tsx b/SettingsPage.tsx
index c7eb1a0..46f623b 100644
--- a/SettingsPage.tsx
+++ b/SettingsPage.tsx
@@ -6,6 +6,7 @@ import {
   FlatList,
   NativeModules,
   Platform,
+  StyleSheet,
   View,
 } from 'react-native'
 import DocumentPicker from 'react-native-document-picker'
@@ -236,6 +237,7 @@ export default function SettingsPage() {
             label="Theme"
             value={theme}
             onChange={changeTheme}
+            style={styles.select}
             items={[
               {label: 'Follow system theme', value: 'system'},
               {label: 'Dark theme', value: 'dark'},
@@ -248,6 +250,7 @@ export default function SettingsPage() {
             label="Dark color"
             value={darkColor}
             onChange={changeDarkColor}
+            style={styles.select}
             items={lightColors.map(color => ({
               label: color.name,
               value: color.hex,
@@ -260,6 +263,7 @@ export default function SettingsPage() {
             value={lightColor}
             onChange={changeLightColor}
             label="Light color"
+            style={styles.select}
             items={darkColors.map(color => ({
               label: color.name,
               value: color.hex,
@@ -272,6 +276,7 @@ export default function SettingsPage() {
             value={date}
             onChange={changeDate}
             label="Date format"
+            style={styles.select}
             items={formatOptions.map(option => ({
               label: format(today, option),
               value: option,
@@ -292,3 +297,7 @@ export default function SettingsPage() {
     </>
   )
 }
+
+const styles = StyleSheet.create({
+  select: {width: 100},
+})