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, Keyboard,
TouchableWithoutFeedback, TouchableWithoutFeedback,
KeyboardAvoidingView, KeyboardAvoidingView,
Platform Platform,
View
} from 'react-native'; } from 'react-native';
import { ThemedText } from '@/components/ThemedText'; import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView'; import { ThemedView } from '@/components/ThemedView';
@ -21,6 +22,11 @@ const BASE_URL = process.env.EXPO_PUBLIC_BASE_URL;
export default function SendMessageScreen() { export default function SendMessageScreen() {
const [message, setMessage] = useState(''); const [message, setMessage] = useState('');
const [userId, setUserId] = useState(null); const [userId, setUserId] = useState(null);
const [inputHeight, setInputHeight] = useState(100);
const updateInputHeight = (height: number) => {
setInputHeight(Math.max(100, height));
};
useEffect(() => { useEffect(() => {
getUserId(); getUserId();
@ -75,20 +81,24 @@ export default function SendMessageScreen() {
start={{ x: 0, y: 0 }} start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }} end={{ x: 1, y: 1 }}
> >
<ThemedView style={styles.container}> <View style={styles.container}>
<ThemedText style={styles.title}>Send a Message</ThemedText>
<TextInput <TextInput
style={styles.input} style={[styles.input, { height: inputHeight }]}
value={message} value={message}
onChangeText={setMessage} onChangeText={setMessage}
placeholder="Enter your message" placeholder="Send a message"
placeholderTextColor="#BBB" placeholderTextColor="#FFFFFF"
multiline multiline
numberOfLines={4}
textAlignVertical="top"
onContentSizeChange={(event) =>
updateInputHeight(event.nativeEvent.contentSize.height)
}
/> />
<TouchableOpacity style={styles.button} onPress={sendMessage}> <TouchableOpacity style={styles.button} onPress={sendMessage}>
<ThemedText style={styles.buttonText}>Send Message</ThemedText> <ThemedText style={styles.buttonText}>Send Message</ThemedText>
</TouchableOpacity> </TouchableOpacity>
</ThemedView> </View>
</LinearGradient> </LinearGradient>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
</KeyboardAvoidingView> </KeyboardAvoidingView>
@ -101,26 +111,21 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
padding: 20, padding: 20,
backgroundColor: 'transparent', backgroundColor: 'transparent',
}, width: '100%',
title: {
fontSize: 48,
lineHeight: 60,
fontWeight: 'bold',
marginTop: 80,
marginBottom: 40,
textAlign: 'center',
}, },
input: { input: {
width: '100%', width: '100%',
height: 80, minHeight: 100,
borderColor: 'transparent',
borderWidth: 1, borderWidth: 1,
borderRadius: 10, borderRadius: 10,
padding: 10, padding: 10,
marginBottom: 20, marginBottom: 20,
textAlignVertical: 'top', fontSize: 42,
color: '#FFF', textAlign: 'center',
fontSize: 32, color: '#FFFFFF',
backgroundColor: 'black', fontWeight: 'bold',
backgroundColor: 'transparent',
}, },
button: { button: {
backgroundColor: '#730FF8', backgroundColor: '#730FF8',

View File

@ -17,18 +17,14 @@ interface ChangeDateDrawerProps {
export default function ChangeDateDrawer({ isVisible, onClose, onDateChange, currentDate }: ChangeDateDrawerProps) { export default function ChangeDateDrawer({ isVisible, onClose, onDateChange, currentDate }: ChangeDateDrawerProps) {
const [date, setDate] = useState(currentDate); const [date, setDate] = useState(currentDate);
const [showDatePicker, setShowDatePicker] = useState(false);
const [showTimePicker, setShowTimePicker] = useState(false);
const handleDateChange = (event: any, selectedDate?: Date) => { const handleDateChange = (event: any, selectedDate?: Date) => {
const currentDate = selectedDate || date; const currentDate = selectedDate || date;
setShowDatePicker(Platform.OS === 'ios');
setDate(currentDate); setDate(currentDate);
}; };
const handleTimeChange = (event: any, selectedTime?: Date) => { const handleTimeChange = (event: any, selectedTime?: Date) => {
const currentTime = selectedTime || date; const currentTime = selectedTime || date;
setShowTimePicker(Platform.OS === 'ios');
setDate(currentTime); setDate(currentTime);
}; };
@ -54,17 +50,10 @@ export default function ChangeDateDrawer({ isVisible, onClose, onDateChange, cur
> >
<ThemedView style={styles.centeredView}> <ThemedView style={styles.centeredView}>
<ThemedView style={styles.modalView}> <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)}> <ThemedView style={styles.buttonContainer}>
<ThemedText style={styles.buttonText}>Select Date</ThemedText> <ThemedView style={styles.dateContainer}>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={() => setShowTimePicker(true)}>
<ThemedText style={styles.buttonText}>Select Time</ThemedText>
</TouchableOpacity>
{showDatePicker && (
<DateTimePicker <DateTimePicker
testID="datePicker" testID="datePicker"
value={date} value={date}
@ -73,9 +62,8 @@ export default function ChangeDateDrawer({ isVisible, onClose, onDateChange, cur
display="default" display="default"
onChange={handleDateChange} onChange={handleDateChange}
/> />
)} </ThemedView>
<ThemedView style={styles.timeContainer}>
{showTimePicker && (
<DateTimePicker <DateTimePicker
testID="timePicker" testID="timePicker"
value={date} value={date}
@ -84,12 +72,10 @@ export default function ChangeDateDrawer({ isVisible, onClose, onDateChange, cur
display="default" display="default"
onChange={handleTimeChange} onChange={handleTimeChange}
/> />
)} </ThemedView>
</ThemedView>
<ThemedText style={styles.dateText}>
Selected: {date.toLocaleString()}
</ThemedText>
<ThemedView style={styles.buttonContainer}>
<TouchableOpacity style={styles.button} onPress={handleSave}> <TouchableOpacity style={styles.button} onPress={handleSave}>
<ThemedText style={styles.buttonText}>Save</ThemedText> <ThemedText style={styles.buttonText}>Save</ThemedText>
</TouchableOpacity> </TouchableOpacity>
@ -99,6 +85,7 @@ export default function ChangeDateDrawer({ isVisible, onClose, onDateChange, cur
</TouchableOpacity> </TouchableOpacity>
</ThemedView> </ThemedView>
</ThemedView> </ThemedView>
</ThemedView>
</Modal> </Modal>
); );
} }
@ -125,13 +112,35 @@ const styles = StyleSheet.create({
shadowRadius: 4, shadowRadius: 4,
elevation: 5 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: { button: {
backgroundColor: '#2196F3', backgroundColor: '#730FF8',
borderRadius: 20, borderRadius: 20,
padding: 10, padding: 10,
elevation: 2, elevation: 2,
marginVertical: 10, marginVertical: 10,
minWidth: 120, minWidth: 120,
marginHorizontal: 10,
}, },
cancelButton: { cancelButton: {
backgroundColor: '#FF3B30', backgroundColor: '#FF3B30',

View File

@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
import { TouchableOpacity, StyleSheet, ActivityIndicator } from 'react-native'; import { TouchableOpacity, StyleSheet, ActivityIndicator } from 'react-native';
import { ThemedView } from '@/components/ThemedView'; import { ThemedView } from '@/components/ThemedView';
import { ThemedText } from '@/components/ThemedText'; import { ThemedText } from '@/components/ThemedText';
import { LinearGradient } from 'expo-linear-gradient';
import AsyncStorage from '@react-native-async-storage/async-storage'; import AsyncStorage from '@react-native-async-storage/async-storage';
import axios from 'axios'; import axios from 'axios';
@ -93,12 +94,13 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
}, },
title: { title: {
fontSize: 24, fontSize: 48,
lineHeight: 56,
fontWeight: 'bold', fontWeight: 'bold',
marginBottom: 20, marginBottom: 20,
}, },
button: { button: {
backgroundColor: '#007AFF', backgroundColor: '#730FF8',
padding: 15, padding: 15,
borderRadius: 5, borderRadius: 5,
marginVertical: 10, marginVertical: 10,
@ -107,7 +109,7 @@ const styles = StyleSheet.create({
}, },
buttonText: { buttonText: {
color: 'white', color: 'white',
fontSize: 18, fontSize: 24,
fontWeight: 'bold', fontWeight: 'bold',
}, },
}); });