diff --git a/app/(tabs)/sendmessage.tsx b/app/(tabs)/sendmessage.tsx index 79db468..66c0024 100644 --- a/app/(tabs)/sendmessage.tsx +++ b/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 }} > - - Send a Message - + + + updateInputHeight(event.nativeEvent.contentSize.height) + } + /> Send Message - + @@ -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', diff --git a/components/ChangeDateDrawer.tsx b/components/ChangeDateDrawer.tsx index f3e3a17..45e04ed 100644 --- a/components/ChangeDateDrawer.tsx +++ b/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 > - Set New Countdown Date and Time - - setShowDatePicker(true)}> - Select Date - - - setShowTimePicker(true)}> - Select Time - - - {showDatePicker && ( + Set New Countdown Date & Time + + + - )} - - {showTimePicker && ( + + - )} + + - - Selected: {date.toLocaleString()} - - - - Save - - - - Cancel - + + + Save + + + + Cancel + + @@ -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', diff --git a/components/UserSelection.tsx b/components/UserSelection.tsx index 217bd89..e6fce0a 100644 --- a/components/UserSelection.tsx +++ b/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', }, });