Clean up stuff

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 (
     <Modal
@@ -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}
@@ -125,14 +131,17 @@ export default function StatusCard({ visible, user, onClose, onUpdate }: StatusC
             width='100%'
             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',
-  },
 });