Looking okay now

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>
-          
-          <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 && (
+          <ThemedText style={styles.modalText}>Set New Countdown Date & Time</ThemedText>
+
+          <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,19 +72,18 @@ export default function ChangeDateDrawer({ isVisible, onClose, onDateChange, cur
               display="default"
               onChange={handleTimeChange}
             />
-          )}
+            </ThemedView>
+          </ThemedView>
           
-          <ThemedText style={styles.dateText}>
-            Selected: {date.toLocaleString()}
-          </ThemedText>
-          
-          <TouchableOpacity style={styles.button} onPress={handleSave}>
-            <ThemedText style={styles.buttonText}>Save</ThemedText>
-          </TouchableOpacity>
-          
-          <TouchableOpacity style={[styles.button, styles.cancelButton]} onPress={onClose}>
-            <ThemedText style={styles.buttonText}>Cancel</ThemedText>
-          </TouchableOpacity>
+          <ThemedView style={styles.buttonContainer}>
+            <TouchableOpacity style={styles.button} onPress={handleSave}>
+              <ThemedText style={styles.buttonText}>Save</ThemedText>
+            </TouchableOpacity>
+
+            <TouchableOpacity style={[styles.button, styles.cancelButton]} onPress={onClose}>
+              <ThemedText style={styles.buttonText}>Cancel</ThemedText>
+            </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',
   },
 });