redesign completed

alot of work ahead

apps/mobile/src/components/GoalCreationModal.tsx

@@ -8,6 +8,7 @@ import {
     TouchableOpacity,
     ScrollView,
     Platform,
+    Alert,
 } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import DateTimePicker from '@react-native-community/datetimepicker';
@@ -59,7 +60,7 @@ export function GoalCreationModal({ visible, onClose, onSubmit }: GoalCreationMo
 
     const handleSubmit = async () => {
         if (!title.trim()) {
-            alert('Please enter a goal title');
+            Alert.alert('Error', 'Please enter a goal title');
             return;
         }
 
@@ -81,7 +82,7 @@ export function GoalCreationModal({ visible, onClose, onSubmit }: GoalCreationMo
             onClose();
         } catch (error) {
             console.error('Error creating goal:', error);
-            alert('Failed to create goal. Please try again.');
+            Alert.alert('Error', 'Failed to create goal. Please try again.');
         } finally {
             setSubmitting(false);
         }
@@ -203,28 +204,31 @@ export function GoalCreationModal({ visible, onClose, onSubmit }: GoalCreationMo
                         <Text style={styles.label}>Target Date</Text>
                         <TouchableOpacity
                             style={styles.dateButton}
-                            onPress={() => setShowDatePicker(true)}
+                            onPress={() => setShowDatePicker(!showDatePicker)}
                         >
                             <Text style={targetDate ? styles.dateText : styles.datePlaceholder}>
                                 {targetDate ? targetDate.toLocaleDateString() : 'Select target date'}
                             </Text>
-                            <Ionicons name="calendar-outline" size={20} color="#6b7280" />
+                            <Ionicons name={showDatePicker ? "chevron-up" : "calendar-outline"} size={20} color="#6b7280" />
                         </TouchableOpacity>
                     </View>
 
                     {showDatePicker && (
-                        <DateTimePicker
-                            value={targetDate || new Date()}
-                            mode="date"
-                            display={Platform.OS === 'ios' ? 'spinner' : 'default'}
-                            onChange={(event, selectedDate) => {
-                                setShowDatePicker(Platform.OS === 'ios');
-                                if (selectedDate) {
-                                    setTargetDate(selectedDate);
-                                }
-                            }}
-                            minimumDate={new Date()}
-                        />
+                        <View style={Platform.OS === 'ios' ? styles.datePickerContainer : undefined}>
+                            <DateTimePicker
+                                value={targetDate || new Date()}
+                                mode="date"
+                                display={Platform.OS === 'ios' ? 'inline' : 'default'}
+                                onChange={(event, selectedDate) => {
+                                    setShowDatePicker(Platform.OS === 'ios');
+                                    if (selectedDate) {
+                                        setTargetDate(selectedDate);
+                                    }
+                                }}
+                                minimumDate={new Date()}
+                                themeVariant="light"
+                            />
+                        </View>
                     )}
 
                     {/* Priority */}
@@ -411,4 +415,12 @@ const styles = StyleSheet.create({
         fontWeight: '600',
         color: '#fff',
     },
+    datePickerContainer: {
+        backgroundColor: '#fff',
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: '#d1d5db',
+        marginTop: 8,
+        overflow: 'hidden',
+    },
 });