Slowly making it look not completely bad, but still need to do a lot of work.

app/(tabs)/countdown.tsx

@@ -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,31 +87,42 @@ 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 (
-    <ThemedView style={styles.container}>
+    <LinearGradient
-      <ThemedText style={styles.title}>Countdown to Next Visit</ThemedText>
+      colors={['#F67C0A', '#F60AD3']}
-      <ThemedView style={styles.countdownContainer}>
+      style={styles.container}
-        <CountdownItem value={countdown.days} label="Days" />
+      start={{ x: 0, y: 0 }}
-        <CountdownItem value={countdown.hours} label="Hours" />
+      end={{ x: 1, y: 1 }}
-        <CountdownItem value={countdown.minutes} label="Minutes" />
+    >
-        <CountdownItem value={countdown.seconds} label="Seconds" />
+      <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} />
+        </ThemedView>
+        <TouchableOpacity 
+          style={styles.changeButton} 
+          onPress={() => setIsDateDrawerVisible(true)}
+        >
+          <ThemedText style={styles.changeButtonText}>Change Date</ThemedText>
+        </TouchableOpacity>
+        {targetDate && (
+          <ChangeDateDrawer
+            isVisible={isDateDrawerVisible}
+            onClose={() => setIsDateDrawerVisible(false)}
+            onDateChange={handleDateChange}
+            currentDate={targetDate}
+          />
+        )}
       </ThemedView>
-      <TouchableOpacity 
+    </LinearGradient>
-        style={styles.changeButton} 
-        onPress={() => setIsDateDrawerVisible(true)}
-      >
-        <ThemedText style={styles.changeButtonText}>Change Date</ThemedText>
-      </TouchableOpacity>
-      {targetDate && (
-        <ChangeDateDrawer
-          isVisible={isDateDrawerVisible}
-          onClose={() => setIsDateDrawerVisible(false)}
-          onDateChange={handleDateChange}
-          currentDate={targetDate}
-        />
-      )}
-    </ThemedView>
   );
 }
 
@@ -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,
+    fontSize: 36,
-    lineHeight: 32,
+    lineHeight: 42,
     fontWeight: 'bold',
   },
   countdownLabel: {
-    fontSize: 24,
+    fontSize: 32,
+    lineHeight: 42,
   },
   changeButton: {
-    backgroundColor: '#007AFF',
+    backgroundColor: '#730FF8',
-    padding: 10,
+    padding: 15,
-    borderRadius: 5,
+    borderRadius: 10,
-    marginTop: 20,
+    marginTop: 40,
   },
   changeButtonText: {
     color: 'white',
-    fontSize: 16,
+    fontSize: 22,
     fontWeight: 'bold',
   },
 });

app/(tabs)/index.tsx

@@ -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 (
-    <ThemedView style={styles.container}>
+    <LinearGradient
-      <ThemedText style={styles.title}>{message}</ThemedText>
+      colors={['#F67C0A', '#F60AD3']}
-    </ThemedView>
+      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,
+    fontSize: 56,
-    lineHeight: 40,
+    lineHeight: 72,
     fontWeight: 'bold',
     marginBottom: 20,
     textAlign: 'center',

app/(tabs)/sendmessage.tsx

@@ -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,25 +63,33 @@ export default function SendMessageScreen() {
   };
 
   return (
+
     <KeyboardAvoidingView 
       behavior={Platform.OS === "ios" ? "padding" : "height"}
       style={{flex: 1}}
     >
       <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
-        <ThemedView style={styles.container}>
+        <LinearGradient
-          <ThemedText style={styles.title}>Send a Message</ThemedText>
+          colors={['#F67C0A', '#F60AD3']}
-          <TextInput
+          style={styles.container}
-            style={styles.input}
+          start={{ x: 0, y: 0 }}
-            value={message}
+          end={{ x: 1, y: 1 }}
-            onChangeText={setMessage}
+        >
-            placeholder="Enter your message"
+          <ThemedView style={styles.container}>
-            placeholderTextColor="#999"
+            <ThemedText style={styles.title}>Send a Message</ThemedText>
-            multiline
+            <TextInput
-          />
+              style={styles.input}
-          <TouchableOpacity style={styles.button} onPress={sendMessage}>
+              value={message}
-            <ThemedText style={styles.buttonText}>Send Message</ThemedText>
+              onChangeText={setMessage}
-          </TouchableOpacity>
+              placeholder="Enter your message"
-        </ThemedView>
+              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,
+    fontSize: 48,
-    lineHeight: 40,
+    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',
   },
 });

package-lock.json

@@ -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",

package.json

@@ -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",