Slowly making it look not completely bad, but still need to do a lot of work.
This commit is contained in:
parent
1e6b2f8df7
commit
f001a0f82d
@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
|
||||
import { StyleSheet, ActivityIndicator, TouchableOpacity } from 'react-native';
|
||||
import { ThemedText } from '@/components/ThemedText';
|
||||
import { ThemedView } from '@/components/ThemedView';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import axios from 'axios';
|
||||
import ChangeDateDrawer from '@/components/ChangeDateDrawer';
|
||||
|
||||
@ -15,9 +16,8 @@ const fetchCountdownDate = async () => {
|
||||
const response = await axios.get(`${BASE_URL}/getCountdown`, {
|
||||
params: { apiKey: API_KEY }
|
||||
});
|
||||
console.log('API response:', response.data);
|
||||
if (response.data && response.data[0] && response.data[0].countdown) {
|
||||
console.log('Countdown date:', response.data[0].countdown);
|
||||
//console.log('Countdown date:', response.data[0].countdown);
|
||||
return new Date(response.data[0].countdown);
|
||||
} else {
|
||||
console.error('Unexpected API response format:', response.data);
|
||||
@ -87,15 +87,25 @@ export default function TabTwoScreen() {
|
||||
</ThemedView>
|
||||
);
|
||||
}
|
||||
let days = countdown.days <= 1 ? 'Day' : 'Days';
|
||||
let hours = countdown.hours <= 1 ? 'Hour' : 'Hours';
|
||||
let minutes = countdown.minutes <= 1 ? 'Minute' : 'Minutes';
|
||||
let seconds = countdown.seconds <= 1 ? 'Second' : 'Seconds';
|
||||
|
||||
return (
|
||||
<LinearGradient
|
||||
colors={['#F67C0A', '#F60AD3']}
|
||||
style={styles.container}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
>
|
||||
<ThemedView style={styles.container}>
|
||||
<ThemedText style={styles.title}>Countdown to Next Visit</ThemedText>
|
||||
<ThemedView style={styles.countdownContainer}>
|
||||
<CountdownItem value={countdown.days} label="Days" />
|
||||
<CountdownItem value={countdown.hours} label="Hours" />
|
||||
<CountdownItem value={countdown.minutes} label="Minutes" />
|
||||
<CountdownItem value={countdown.seconds} label="Seconds" />
|
||||
<CountdownItem value={countdown.days} label={days} />
|
||||
<CountdownItem value={countdown.hours} label={hours} />
|
||||
<CountdownItem value={countdown.minutes} label={minutes} />
|
||||
<CountdownItem value={countdown.seconds} label={seconds} />
|
||||
</ThemedView>
|
||||
<TouchableOpacity
|
||||
style={styles.changeButton}
|
||||
@ -112,6 +122,7 @@ export default function TabTwoScreen() {
|
||||
/>
|
||||
)}
|
||||
</ThemedView>
|
||||
</LinearGradient>
|
||||
);
|
||||
}
|
||||
|
||||
@ -128,13 +139,14 @@ const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
title: {
|
||||
fontSize: 56,
|
||||
lineHeight: 64,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 20,
|
||||
marginTop: 100,
|
||||
marginBottom: 60,
|
||||
textAlign: 'center',
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
@ -142,29 +154,33 @@ const styles = StyleSheet.create({
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
marginBottom: 180,
|
||||
},
|
||||
countdownItem: {
|
||||
margin: 10,
|
||||
lineHeight: 32,
|
||||
lineHeight: 42,
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
countdownValue: {
|
||||
fontSize: 32,
|
||||
lineHeight: 32,
|
||||
fontSize: 36,
|
||||
lineHeight: 42,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
countdownLabel: {
|
||||
fontSize: 24,
|
||||
fontSize: 32,
|
||||
lineHeight: 42,
|
||||
},
|
||||
changeButton: {
|
||||
backgroundColor: '#007AFF',
|
||||
padding: 10,
|
||||
borderRadius: 5,
|
||||
marginTop: 20,
|
||||
backgroundColor: '#730FF8',
|
||||
padding: 15,
|
||||
borderRadius: 10,
|
||||
marginTop: 40,
|
||||
},
|
||||
changeButtonText: {
|
||||
color: 'white',
|
||||
fontSize: 16,
|
||||
fontSize: 22,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
});
|
||||
|
@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
import { ThemedText } from '@/components/ThemedText';
|
||||
import { ThemedView } from '@/components/ThemedView';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import axios from 'axios';
|
||||
|
||||
@ -44,9 +45,16 @@ export default function HomeScreen() {
|
||||
};
|
||||
|
||||
return (
|
||||
<LinearGradient
|
||||
colors={['#F67C0A', '#F60AD3']}
|
||||
style={styles.container}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
>
|
||||
<ThemedView style={styles.container}>
|
||||
<ThemedText style={styles.title}>{message}</ThemedText>
|
||||
</ThemedView>
|
||||
</LinearGradient>
|
||||
);
|
||||
}
|
||||
|
||||
@ -55,10 +63,11 @@ const styles = StyleSheet.create({
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
title: {
|
||||
fontSize: 32,
|
||||
lineHeight: 40,
|
||||
fontSize: 56,
|
||||
lineHeight: 72,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 20,
|
||||
textAlign: 'center',
|
||||
|
@ -11,6 +11,7 @@ import {
|
||||
} from 'react-native';
|
||||
import { ThemedText } from '@/components/ThemedText';
|
||||
import { ThemedView } from '@/components/ThemedView';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import axios from 'axios';
|
||||
|
||||
@ -62,11 +63,18 @@ export default function SendMessageScreen() {
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
||||
style={{flex: 1}}
|
||||
>
|
||||
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
|
||||
<LinearGradient
|
||||
colors={['#F67C0A', '#F60AD3']}
|
||||
style={styles.container}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
>
|
||||
<ThemedView style={styles.container}>
|
||||
<ThemedText style={styles.title}>Send a Message</ThemedText>
|
||||
<TextInput
|
||||
@ -74,13 +82,14 @@ export default function SendMessageScreen() {
|
||||
value={message}
|
||||
onChangeText={setMessage}
|
||||
placeholder="Enter your message"
|
||||
placeholderTextColor="#999"
|
||||
placeholderTextColor="#BBB"
|
||||
multiline
|
||||
/>
|
||||
<TouchableOpacity style={styles.button} onPress={sendMessage}>
|
||||
<ThemedText style={styles.buttonText}>Send Message</ThemedText>
|
||||
</TouchableOpacity>
|
||||
</ThemedView>
|
||||
</LinearGradient>
|
||||
</TouchableWithoutFeedback>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
@ -90,36 +99,38 @@ const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 20,
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
title: {
|
||||
fontSize: 36,
|
||||
lineHeight: 40,
|
||||
fontSize: 48,
|
||||
lineHeight: 60,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 20,
|
||||
marginTop: 80,
|
||||
marginBottom: 40,
|
||||
textAlign: 'center',
|
||||
},
|
||||
input: {
|
||||
width: '100%',
|
||||
height: 80,
|
||||
borderColor: '#ccc',
|
||||
borderWidth: 1,
|
||||
borderRadius: 5,
|
||||
borderRadius: 10,
|
||||
padding: 10,
|
||||
marginBottom: 20,
|
||||
textAlignVertical: 'top',
|
||||
color: '#FFF',
|
||||
fontSize: 18,
|
||||
fontSize: 32,
|
||||
backgroundColor: 'black',
|
||||
},
|
||||
button: {
|
||||
backgroundColor: '#007AFF',
|
||||
backgroundColor: '#730FF8',
|
||||
padding: 15,
|
||||
borderRadius: 5,
|
||||
borderColor: '#730FF8',
|
||||
borderRadius: 10,
|
||||
},
|
||||
buttonText: {
|
||||
color: 'white',
|
||||
fontSize: 16,
|
||||
fontSize: 22,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
});
|
||||
|
10
package-lock.json
generated
10
package-lock.json
generated
@ -16,6 +16,7 @@
|
||||
"expo": "~51.0.28",
|
||||
"expo-constants": "~16.0.2",
|
||||
"expo-font": "~12.0.9",
|
||||
"expo-linear-gradient": "~13.0.2",
|
||||
"expo-linking": "~6.3.1",
|
||||
"expo-router": "~3.5.23",
|
||||
"expo-splash-screen": "~0.27.5",
|
||||
@ -10011,6 +10012,15 @@
|
||||
"expo": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/expo-linear-gradient": {
|
||||
"version": "13.0.2",
|
||||
"resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-13.0.2.tgz",
|
||||
"integrity": "sha512-EDcILUjRKu4P1rtWcwciN6CSyGtH7Bq4ll3oTRV7h3h8oSzSilH1g6z7kTAMlacPBKvMnkkWOGzW6KtgMKEiTg==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"expo": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/expo-linking": {
|
||||
"version": "6.3.1",
|
||||
"resolved": "https://registry.npmjs.org/expo-linking/-/expo-linking-6.3.1.tgz",
|
||||
|
@ -37,7 +37,8 @@
|
||||
"react-native-reanimated": "~3.10.1",
|
||||
"react-native-safe-area-context": "4.10.5",
|
||||
"react-native-screens": "3.31.1",
|
||||
"react-native-web": "~0.19.10"
|
||||
"react-native-web": "~0.19.10",
|
||||
"expo-linear-gradient": "~13.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.0",
|
||||
|
Loading…
Reference in New Issue
Block a user