Clean up stuff

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}
           />
         </ThemedView>
         
@@ -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',
   },

components/status/StatusCard.tsx

@@ -1,9 +1,7 @@
-// components/status/StatusCard.tsx
 import React, { useState } from 'react';
 import { 
   StyleSheet, 
   Modal, 
-  TouchableOpacity, 
   TouchableWithoutFeedback,
   KeyboardAvoidingView,
   Platform,
@@ -66,6 +64,11 @@ export default function StatusCard({ visible, user, onClose, onUpdate }: StatusC
     }
   };
 
+  const handleCancel = () => {
+    setNewStatus('');
+    onClose();
+  };
+  
   return (
     <Modal
       animationType="slide"
@@ -87,14 +90,14 @@ export default function StatusCard({ visible, user, onClose, onUpdate }: StatusC
           <View style={styles.userInfoContainer}>
             <ProfileAvatar
               url={user.profiles.avatar_url}
-              size={60}
+              size={75}
               disabled={true}
             />
             <ThemedText style={styles.userName}>
               {user.profiles.full_name}
             </ThemedText>
             <ThemedText style={styles.currentStatus}>
-              Current: {user.status}
+              {user.status}
             </ThemedText>
           </View>
           
@@ -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}
@@ -126,13 +132,16 @@ export default function StatusCard({ visible, user, onClose, onUpdate }: StatusC
             style={styles.updateButton}
           />
 
-          <TouchableOpacity 
-            style={styles.cancelButton} 
-            onPress={onClose}
+          <ThemedTextButton
+            text='Cancel'
+            onPress={handleCancel}
+            backgroundColor='red'
             disabled={updating}
-          >
-            <ThemedText style={styles.cancelText}>Cancel</ThemedText>
-          </TouchableOpacity>
+            textColor='white'
+            width='100%'
+            fontSize={18}
+            fontWeight='500'
+          />
         </ThemedView>
       </KeyboardAvoidingView>
     </Modal>
@@ -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',
-  },
 });

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<ThemedTextInputProps> = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
+  width='90%',
+  height=50,
   fontSize = 16,
   containerStyle,
   style,
@@ -29,9 +26,9 @@ const ThemedTextInput: React.FC<ThemedTextInputProps> = ({
       style={[
         styles.inputContainer,
         {
+          borderColor: Colors[scheme].accent,
           width,
           height,
-          borderColor: Colors[scheme].accent,
         },
         containerStyle,
       ]}
@@ -43,7 +40,6 @@ const ThemedTextInput: React.FC<ThemedTextInputProps> = ({
             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,
   },
 });