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',
},
});