real settings view impl

server management mostly working
changing active server needs work

app/components/Button.tsx

@@ -1,18 +1,21 @@
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import React from 'react'
-import { GestureResponderEvent, StyleSheet, Text } from 'react-native'
+import { GestureResponderEvent, StyleProp, StyleSheet, Text, ViewStyle } from 'react-native'
 import PressableOpacity from './PressableOpacity'
 
 const Button: React.FC<{
   title?: string
   buttonStyle?: 'hollow' | 'highlight'
   onPress: (event: GestureResponderEvent) => void
-}> = ({ title, buttonStyle, onPress, children }) => {
+  style?: StyleProp<ViewStyle>
+  disabled?: boolean
+}> = ({ title, buttonStyle, onPress, children, style, disabled }) => {
   return (
     <PressableOpacity
       onPress={onPress}
-      style={[styles.container, buttonStyle !== undefined ? styles[buttonStyle] : {}]}>
+      disabled={disabled}
+      style={[styles.container, buttonStyle !== undefined ? styles[buttonStyle] : {}, style]}>
       {title ? <Text style={styles.text}>{title}</Text> : children}
     </PressableOpacity>
   )
@@ -28,7 +31,7 @@ const styles = StyleSheet.create({
   },
   hollow: {
     backgroundColor: 'transparent',
-    borderColor: colors.text.secondary,
+    borderColor: colors.text.primary,
     borderWidth: 1.5,
   },
   highlight: {

app/components/ListPlayerControls.tsx

@@ -23,7 +23,7 @@ const ListPlayerControls = React.memo<{
           {downloaded ? (
             <IconMat name="file-download-done" size={26} color={colors.text.primary} />
           ) : (
-            <IconMat name="file-download" size={26} color={colors.text.secondary} />
+            <IconMat name="file-download" size={26} color={colors.text.primary} />
           )}
         </Button>
       </View>

app/components/SettingsItem.tsx

@@ -0,0 +1,47 @@
+import colors from '@app/styles/colors'
+import font from '@app/styles/font'
+import React from 'react'
+import { StyleSheet, View, Text } from 'react-native'
+import PressableOpacity from './PressableOpacity'
+
+const SettingsItem: React.FC<{
+  title: string
+  subtitle?: string
+  onPress?: () => void
+}> = ({ title, subtitle, onPress, children }) => {
+  return (
+    <View style={styles.item}>
+      <PressableOpacity style={styles.itemText} onPress={onPress}>
+        <Text style={styles.itemTitle}>{title}</Text>
+        {subtitle ? <Text style={styles.itemSubtitle}>{subtitle}</Text> : <></>}
+      </PressableOpacity>
+      {children}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  item: {
+    height: 60,
+    marginBottom: 10,
+    alignItems: 'stretch',
+    flexDirection: 'row',
+  },
+  itemText: {
+    flex: 1,
+    alignSelf: 'stretch',
+    alignItems: 'flex-start',
+  },
+  itemTitle: {
+    fontFamily: font.regular,
+    color: colors.text.primary,
+    fontSize: 15,
+  },
+  itemSubtitle: {
+    fontFamily: font.regular,
+    color: colors.text.secondary,
+    fontSize: 15,
+  },
+})
+
+export default SettingsItem