Truly an MVP Now. Needs to look good

app/(tabs)/countdown.tsx

@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, ActivityIndicator } from 'react-native';
+import { StyleSheet, ActivityIndicator, TouchableOpacity } from 'react-native';
 import { ThemedText } from '@/components/ThemedText';
 import { ThemedView } from '@/components/ThemedView';
 import axios from 'axios';
+import ChangeDateDrawer from '@/components/ChangeDateDrawer';
+
+const API_KEY = process.env.EXPO_PUBLIC_API_KEY;
+const BASE_URL = process.env.EXPO_PUBLIC_BASE_URL;
 
-const API_KEY = 'I_Love_Madeline';
-//const BASE_URL = 'http://192.168.0.39:3000/api';
-const BASE_URL = 'https://ismadelinethecutest.gibbyb.com/api';
 
 // Separate API call function
 const fetchCountdownDate = async () => {
@@ -14,7 +15,6 @@ const fetchCountdownDate = async () => {
     const response = await axios.get(`${BASE_URL}/getCountdown`, {
       params: { apiKey: API_KEY }
     });
-    //const response = await axios.get(`${BASE_URL}/getCountdown?apiKey=I_Love_Madeline`);
     console.log('API response:', response.data);
     if (response.data && response.data[0] && response.data[0].countdown) {
       console.log('Countdown date:', response.data[0].countdown);
@@ -38,6 +38,7 @@ export default function TabTwoScreen() {
   });
   const [targetDate, setTargetDate] = useState<Date | null>(null);
   const [isLoading, setIsLoading] = useState(true);
+  const [isDateDrawerVisible, setIsDateDrawerVisible] = useState(false);
 
   useEffect(() => {
     const loadCountdownDate = async () => {
@@ -45,9 +46,6 @@ export default function TabTwoScreen() {
       const date = await fetchCountdownDate();
       if (date) {
         setTargetDate(date);
-      } else {
-        // Fallback to a default date if API call fails
-        setTargetDate(new Date());
       }
       setIsLoading(false);
     };
@@ -78,6 +76,10 @@ export default function TabTwoScreen() {
     return () => clearInterval(interval);
   }, [targetDate]);
 
+  const handleDateChange = (newDate: Date) => {
+    setTargetDate(newDate);
+  };
+
   if (isLoading) {
     return (
       <ThemedView style={styles.container}>
@@ -95,6 +97,20 @@ export default function TabTwoScreen() {
         <CountdownItem value={countdown.minutes} label="Minutes" />
         <CountdownItem value={countdown.seconds} label="Seconds" />
       </ThemedView>
+      <TouchableOpacity 
+        style={styles.changeButton} 
+        onPress={() => setIsDateDrawerVisible(true)}
+      >
+        <ThemedText style={styles.changeButtonText}>Change Date</ThemedText>
+      </TouchableOpacity>
+      {targetDate && (
+        <ChangeDateDrawer
+          isVisible={isDateDrawerVisible}
+          onClose={() => setIsDateDrawerVisible(false)}
+          onDateChange={handleDateChange}
+          currentDate={targetDate}
+        />
+      )}
     </ThemedView>
   );
 }
@@ -140,4 +156,15 @@ const styles = StyleSheet.create({
   countdownLabel: {
     fontSize: 24,
   },
+  changeButton: {
+    backgroundColor: '#007AFF',
+    padding: 10,
+    borderRadius: 5,
+    marginTop: 20,
+  },
+  changeButtonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
 });

app/(tabs)/index.tsx

@@ -5,8 +5,8 @@ import { ThemedView } from '@/components/ThemedView';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import axios from 'axios';
 
-const API_KEY = 'I_Love_Madeline';
-const BASE_URL = 'https://ismadelinethecutest.gibbyb.com/api';
+const API_KEY = process.env.EXPO_PUBLIC_API_KEY;
+const BASE_URL = process.env.EXPO_PUBLIC_BASE_URL;
 
 export default function HomeScreen() {
   const [message, setMessage] = useState('Loading message...');

app/(tabs)/sendmessage.tsx

@@ -1,12 +1,21 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, TextInput, TouchableOpacity, Alert, Keyboard } from 'react-native';
+import { 
+  StyleSheet, 
+  TextInput, 
+  TouchableOpacity, 
+  Alert, 
+  Keyboard, 
+  TouchableWithoutFeedback,
+  KeyboardAvoidingView,
+  Platform
+} from 'react-native';
 import { ThemedText } from '@/components/ThemedText';
 import { ThemedView } from '@/components/ThemedView';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import axios from 'axios';
 
-const API_KEY = 'I_Love_Madeline';
-const BASE_URL = 'https://ismadelinethecutest.gibbyb.com/api';
+const API_KEY = process.env.EXPO_PUBLIC_API_KEY;
+const BASE_URL = process.env.EXPO_PUBLIC_BASE_URL;
 
 export default function SendMessageScreen() {
   const [message, setMessage] = useState('');
@@ -53,20 +62,27 @@ export default function SendMessageScreen() {
   };
 
   return (
-    <ThemedView style={styles.container}>
-      <ThemedText style={styles.title}>Send a Message</ThemedText>
-      <TextInput
-        style={styles.input}
-        value={message}
-        onChangeText={setMessage}
-        placeholder="Enter your message"
-        placeholderTextColor="#999"
-        multiline
-      />
-      <TouchableOpacity style={styles.button} onPress={sendMessage}>
-        <ThemedText style={styles.buttonText}>Send Message</ThemedText>
-      </TouchableOpacity>
-    </ThemedView>
+    <KeyboardAvoidingView 
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      style={{flex: 1}}
+    >
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
+        <ThemedView style={styles.container}>
+          <ThemedText style={styles.title}>Send a Message</ThemedText>
+          <TextInput
+            style={styles.input}
+            value={message}
+            onChangeText={setMessage}
+            placeholder="Enter your message"
+            placeholderTextColor="#999"
+            multiline
+          />
+          <TouchableOpacity style={styles.button} onPress={sendMessage}>
+            <ThemedText style={styles.buttonText}>Send Message</ThemedText>
+          </TouchableOpacity>
+        </ThemedView>
+      </TouchableWithoutFeedback>
+    </KeyboardAvoidingView>
   );
 }
 
@@ -78,14 +94,15 @@ const styles = StyleSheet.create({
     padding: 20,
   },
   title: {
-    fontSize: 24,
+    fontSize: 36,
+    lineHeight: 40,
     fontWeight: 'bold',
     marginBottom: 20,
     textAlign: 'center',
   },
   input: {
     width: '100%',
-    height: 100,
+    height: 80,
     borderColor: '#ccc',
     borderWidth: 1,
     borderRadius: 5,
@@ -93,6 +110,7 @@ const styles = StyleSheet.create({
     marginBottom: 20,
     textAlignVertical: 'top',
     color: '#FFF',
+    fontSize: 18,
   },
   button: {
     backgroundColor: '#007AFF',