Looking okay now

This commit is contained in:
Gabriel Brown 2024-09-10 16:57:14 -05:00
parent f001a0f82d
commit b256316e18
3 changed files with 75 additions and 59 deletions

View File

@ -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 }}
>
<ThemedView style={styles.container}>
<ThemedText style={styles.title}>Send a Message</ThemedText>
<View style={styles.container}>
<TextInput
style={styles.input}
style={[styles.input, { height: inputHeight }]}
value={message}
onChangeText={setMessage}
placeholder="Enter your message"
placeholderTextColor="#BBB"
placeholder="Send a message"
placeholderTextColor="#FFFFFF"
multiline
numberOfLines={4}
textAlignVertical="top"
onContentSizeChange={(event) =>
updateInputHeight(event.nativeEvent.contentSize.height)
}
/>
<TouchableOpacity style={styles.button} onPress={sendMessage}>
<ThemedText style={styles.buttonText}>Send Message</ThemedText>
</TouchableOpacity>
</ThemedView>
</View>
</LinearGradient>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
@ -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',

View File

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

View File

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