Looking okay now

app/(tabs)/sendmessage.tsx

@@ -7,7 +7,8 @@ import {
   Keyboard, 
   TouchableWithoutFeedback,
   KeyboardAvoidingView,
-  Platform
+  Platform,
+  View
 } from 'react-native';
 import { ThemedText } from '@/components/ThemedText';
 import { ThemedView } from '@/components/ThemedView';
@@ -21,6 +22,11 @@ const BASE_URL = process.env.EXPO_PUBLIC_BASE_URL;
 export default function SendMessageScreen() {
   const [message, setMessage] = useState('');
   const [userId, setUserId] = useState(null);
+  const [inputHeight, setInputHeight] = useState(100);
+
+  const updateInputHeight = (height: number) => {
+    setInputHeight(Math.max(100, height));
+  };
 
   useEffect(() => {
     getUserId();
@@ -75,20 +81,24 @@ export default function SendMessageScreen() {
           start={{ x: 0, y: 0 }}
           end={{ x: 1, y: 1 }}
         >
-          <ThemedView style={styles.container}>
-            <ThemedText style={styles.title}>Send a Message</ThemedText>
+        <View style={styles.container}>
           <TextInput
-              style={styles.input}
+            style={[styles.input, { height: inputHeight }]}
             value={message}
             onChangeText={setMessage}
-              placeholder="Enter your message"
-              placeholderTextColor="#BBB"
+            placeholder="Send a message"
+            placeholderTextColor="#FFFFFF"
             multiline
+            numberOfLines={4}
+            textAlignVertical="top"
+            onContentSizeChange={(event) => 
+              updateInputHeight(event.nativeEvent.contentSize.height)
+            }
           />
             <TouchableOpacity style={styles.button} onPress={sendMessage}>
               <ThemedText style={styles.buttonText}>Send Message</ThemedText>
             </TouchableOpacity>
-          </ThemedView>
+          </View>
         </LinearGradient>
       </TouchableWithoutFeedback>
     </KeyboardAvoidingView>
@@ -101,26 +111,21 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     padding: 20,
     backgroundColor: 'transparent',
-  },
-  title: {
-    fontSize: 48,
-    lineHeight: 60,
-    fontWeight: 'bold',
-    marginTop: 80,
-    marginBottom: 40,
-    textAlign: 'center',
+    width: '100%',
   },
   input: {
     width: '100%',
-    height: 80,
+    minHeight: 100,
+    borderColor: 'transparent',
     borderWidth: 1,
     borderRadius: 10,
     padding: 10,
     marginBottom: 20,
-    textAlignVertical: 'top',
-    color: '#FFF',
-    fontSize: 32,
-    backgroundColor: 'black',
+    fontSize: 42,
+    textAlign: 'center',
+    color: '#FFFFFF',
+    fontWeight: 'bold',
+    backgroundColor: 'transparent',
   },
   button: {
     backgroundColor: '#730FF8',

components/ChangeDateDrawer.tsx

@@ -17,18 +17,14 @@ interface ChangeDateDrawerProps {
 
 export default function ChangeDateDrawer({ isVisible, onClose, onDateChange, currentDate }: ChangeDateDrawerProps) {
   const [date, setDate] = useState(currentDate);
-  const [showDatePicker, setShowDatePicker] = useState(false);
-  const [showTimePicker, setShowTimePicker] = useState(false);
 
   const handleDateChange = (event: any, selectedDate?: Date) => {
     const currentDate = selectedDate || date;
-    setShowDatePicker(Platform.OS === 'ios');
     setDate(currentDate);
   };
 
   const handleTimeChange = (event: any, selectedTime?: Date) => {
     const currentTime = selectedTime || date;
-    setShowTimePicker(Platform.OS === 'ios');
     setDate(currentTime);
   };
 
@@ -54,17 +50,10 @@ export default function ChangeDateDrawer({ isVisible, onClose, onDateChange, cur
     >
       <ThemedView style={styles.centeredView}>
         <ThemedView style={styles.modalView}>
-          <ThemedText style={styles.modalText}>Set New Countdown Date and Time</ThemedText>
+          <ThemedText style={styles.modalText}>Set New Countdown Date & Time</ThemedText>
 
-          <TouchableOpacity style={styles.button} onPress={() => setShowDatePicker(true)}>
-            <ThemedText style={styles.buttonText}>Select Date</ThemedText>
-          </TouchableOpacity>
-          
-          <TouchableOpacity style={styles.button} onPress={() => setShowTimePicker(true)}>
-            <ThemedText style={styles.buttonText}>Select Time</ThemedText>
-          </TouchableOpacity>
-          
-          {showDatePicker && (
+          <ThemedView style={styles.buttonContainer}>
+            <ThemedView style={styles.dateContainer}>
             <DateTimePicker
               testID="datePicker"
               value={date}
@@ -73,9 +62,8 @@ export default function ChangeDateDrawer({ isVisible, onClose, onDateChange, cur
               display="default"
               onChange={handleDateChange}
             />
-          )}
-          
-          {showTimePicker && (
+            </ThemedView>
+            <ThemedView style={styles.timeContainer}>
             <DateTimePicker
               testID="timePicker"
               value={date}
@@ -84,12 +72,10 @@ export default function ChangeDateDrawer({ isVisible, onClose, onDateChange, cur
               display="default"
               onChange={handleTimeChange}
             />
-          )}
-          
-          <ThemedText style={styles.dateText}>
-            Selected: {date.toLocaleString()}
-          </ThemedText>
+            </ThemedView>
+          </ThemedView>
           
+          <ThemedView style={styles.buttonContainer}>
             <TouchableOpacity style={styles.button} onPress={handleSave}>
               <ThemedText style={styles.buttonText}>Save</ThemedText>
             </TouchableOpacity>
@@ -99,6 +85,7 @@ export default function ChangeDateDrawer({ isVisible, onClose, onDateChange, cur
             </TouchableOpacity>
           </ThemedView>
         </ThemedView>
+      </ThemedView>
     </Modal>
   );
 }
@@ -125,13 +112,35 @@ const styles = StyleSheet.create({
     shadowRadius: 4,
     elevation: 5
   },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    margin: 'auto',
+    marginBottom: 20,
+    backgroundColor: 'transparent',
+  },
+  dateContainer: {
+    width: '50%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+    marginRight: 10,
+  },
+  timeContainer: {
+    width: '50%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+  },
   button: {
-    backgroundColor: '#2196F3',
+    backgroundColor: '#730FF8',
     borderRadius: 20,
     padding: 10,
     elevation: 2,
     marginVertical: 10,
     minWidth: 120,
+    marginHorizontal: 10,
   },
   cancelButton: {
     backgroundColor: '#FF3B30',

components/UserSelection.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { TouchableOpacity, StyleSheet, ActivityIndicator } from 'react-native';
 import { ThemedView } from '@/components/ThemedView';
 import { ThemedText } from '@/components/ThemedText';
+import { LinearGradient } from 'expo-linear-gradient';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import axios from 'axios';
 
@@ -93,12 +94,13 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   title: {
-    fontSize: 24,
+    fontSize: 48,
+    lineHeight: 56,
     fontWeight: 'bold',
     marginBottom: 20,
   },
   button: {
-    backgroundColor: '#007AFF',
+    backgroundColor: '#730FF8',
     padding: 15,
     borderRadius: 5,
     marginVertical: 10,
@@ -107,7 +109,7 @@ const styles = StyleSheet.create({
   },
   buttonText: {
     color: 'white',
-    fontSize: 18,
+    fontSize: 24,
     fontWeight: 'bold',
   },
 });