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,
},
});