evandro
434cba2a69
SettingsScreen CC 23 -> below 10. Form parsing, change detection and the dark-theme check moved to utils/ with unit tests; the dark switch now reads the OS scheme instead of comparing the background colour. Adds characterization tests for the screen.
45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import { useThemeColor } from '@/hooks/useThemeColor';
|
|
import React from 'react';
|
|
import { StyleSheet, Text, TextInput, TextInputProps, View } from 'react-native';
|
|
|
|
interface LabeledInputProps extends TextInputProps {
|
|
label: string;
|
|
}
|
|
|
|
export function LabeledInput({ label, style, ...inputProps }: LabeledInputProps) {
|
|
const colors = useThemeColor();
|
|
|
|
return (
|
|
<View style={styles.inputGroup}>
|
|
<Text style={[styles.label, { color: colors.textMuted }]}>{label}</Text>
|
|
<TextInput
|
|
style={[
|
|
styles.textInput,
|
|
{ backgroundColor: colors.inputBg, borderColor: colors.inputBorder, color: colors.text },
|
|
style,
|
|
]}
|
|
placeholderTextColor={colors.textMuted}
|
|
{...inputProps}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
inputGroup: {
|
|
marginBottom: 16,
|
|
},
|
|
label: {
|
|
fontSize: 14,
|
|
fontWeight: '500',
|
|
marginBottom: 8,
|
|
},
|
|
textInput: {
|
|
borderWidth: 1,
|
|
borderRadius: 12,
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 12,
|
|
fontSize: 16,
|
|
},
|
|
});
|