diff --git a/app/(tabs)/settings/profile.tsx b/app/(tabs)/settings/profile.tsx index fe30655..1715a02 100644 --- a/app/(tabs)/settings/profile.tsx +++ b/app/(tabs)/settings/profile.tsx @@ -134,11 +134,13 @@ const ProfileScreen = () => { onChangeText={(text) => setProfile(prev => ({ ...prev, full_name: text }))} placeholder="Enter your full name" style={styles.input} + fontSize={20} editable={!updating} autoCapitalize='words' textContentType='name' maxLength={50} returnKeyType='done' + secureTextEntry={false} /> @@ -183,30 +185,33 @@ const styles = StyleSheet.create({ }, formSection: { marginBottom: 20, + width: '100%', + alignItems: 'center', }, label: { marginBottom: 8, - fontSize: 16, + fontSize: 18, fontWeight: '500', + alignSelf: 'flex-start', + marginLeft: '5%', }, input: { - fontSize: 16, paddingVertical: 12, paddingHorizontal: 10, borderRadius: 8, marginBottom: 20, - width: '100%', }, disabledInput: { opacity: 0.7, }, saveButton: { borderRadius: 8, - alignItems: 'center', + marginTop: 20, marginBottom: 10, + alignItems: 'center', }, logoutButton: { - marginTop: 30, + marginTop: 10, borderRadius: 8, alignItems: 'center', }, diff --git a/components/status/StatusCard.tsx b/components/status/StatusCard.tsx index 7d193b0..3f744bb 100644 --- a/components/status/StatusCard.tsx +++ b/components/status/StatusCard.tsx @@ -1,9 +1,7 @@ -// components/status/StatusCard.tsx import React, { useState } from 'react'; import { StyleSheet, Modal, - TouchableOpacity, TouchableWithoutFeedback, KeyboardAvoidingView, Platform, @@ -65,6 +63,11 @@ export default function StatusCard({ visible, user, onClose, onUpdate }: StatusC setUpdating(false); } }; + + const handleCancel = () => { + setNewStatus(''); + onClose(); + }; return ( {user.profiles.full_name} - Current: {user.status} + {user.status} @@ -104,7 +107,10 @@ export default function StatusCard({ visible, user, onClose, onUpdate }: StatusC value={newStatus} onChangeText={setNewStatus} placeholder="What's happening?" + fontSize={18} maxLength={80} + width='95%' + height={80} multiline style={styles.input} editable={!updating} @@ -125,14 +131,17 @@ export default function StatusCard({ visible, user, onClose, onUpdate }: StatusC width='100%' style={styles.updateButton} /> - - - Cancel - + textColor='white' + width='100%' + fontSize={18} + fontWeight='500' + /> @@ -142,7 +151,6 @@ export default function StatusCard({ visible, user, onClose, onUpdate }: StatusC const styles = StyleSheet.create({ modalOverlay: { flex: 1, - backgroundColor: 'rgba(0,0,0,0.5)', }, keyboardAvoidingView: { position: 'absolute', @@ -169,47 +177,41 @@ const styles = StyleSheet.create({ marginBottom: 20, }, userName: { - fontSize: 18, + fontSize: 20, fontWeight: '600', marginTop: 10, }, currentStatus: { - fontSize: 16, + fontSize: 18, marginTop: 5, opacity: 0.7, }, inputContainer: { - marginBottom: 20, + marginBottom: 10, + alignItems: 'center', + padding: 10, }, inputLabel: { - fontSize: 16, + fontSize: 18, fontWeight: '500', marginBottom: 8, + alignSelf: 'flex-start', + marginLeft: '5%', }, input: { - fontSize: 16, paddingVertical: 12, paddingHorizontal: 10, - borderRadius: 8, - minHeight: 80, + minHeight: 100, textAlignVertical: 'top', }, charCount: { fontSize: 12, alignSelf: 'flex-end', - marginTop: 4, + marginTop: 5, opacity: 0.6, }, updateButton: { borderRadius: 8, marginBottom: 15, }, - cancelButton: { - alignItems: 'center', - padding: 10, - }, - cancelText: { - fontSize: 16, - color: '#FF3B30', - }, }); diff --git a/components/theme/inputs/ThemedTextInput.tsx b/components/theme/inputs/ThemedTextInput.tsx index db7631e..7013049 100644 --- a/components/theme/inputs/ThemedTextInput.tsx +++ b/components/theme/inputs/ThemedTextInput.tsx @@ -4,9 +4,6 @@ import ThemedView from '@/components/theme/default/ThemedView'; import { Colors } from '@/constants/Colors'; import { useColorScheme } from '@/hooks/useColorScheme'; -const DEFAULT_WIDTH = 320; -const DEFAULT_HEIGHT = 50; - type ThemedTextInputProps = TextInputProps & { width?: DimensionValue; height?: DimensionValue; @@ -15,8 +12,8 @@ type ThemedTextInputProps = TextInputProps & { }; const ThemedTextInput: React.FC = ({ - width = DEFAULT_WIDTH, - height = DEFAULT_HEIGHT, + width='90%', + height=50, fontSize = 16, containerStyle, style, @@ -29,9 +26,9 @@ const ThemedTextInput: React.FC = ({ style={[ styles.inputContainer, { + borderColor: Colors[scheme].accent, width, height, - borderColor: Colors[scheme].accent, }, containerStyle, ]} @@ -43,7 +40,6 @@ const ThemedTextInput: React.FC = ({ color: Colors[scheme].text, backgroundColor: Colors[scheme].background, fontSize, - lineHeight: fontSize * 1.5, }, style, ]} @@ -65,7 +61,6 @@ const styles = StyleSheet.create({ input: { width: '100%', height: '100%', - borderRadius: 8, paddingHorizontal: 15, }, });