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

2024-09-10 15:33:34 -05:00 · 2024-09-10 15:33:34 -05:00 · f001a0f82d
commit f001a0f82d
parent 1e6b2f8df7
5 changed files with 112 additions and 65 deletions
--- a/app/(tabs)/countdown.tsx
+++ b/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}>
-      <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" />
+    <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} />
+        </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 
-        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>
+    </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',
  },
 });
--- a/app/(tabs)/index.tsx
+++ b/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}>
-      <ThemedText style={styles.title}>{message}</ThemedText>
-    </ThemedView>
+    <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',
--- a/app/(tabs)/sendmessage.tsx
+++ b/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}>
-          <ThemedText style={styles.title}>Send a Message</ThemedText>
-          <TextInput
-            style={styles.input}
-            value={message}
-            onChangeText={setMessage}
-            placeholder="Enter your message"
-            placeholderTextColor="#999"
-            multiline
-          />
-          <TouchableOpacity style={styles.button} onPress={sendMessage}>
-            <ThemedText style={styles.buttonText}>Send Message</ThemedText>
-          </TouchableOpacity>
-        </ThemedView>
+        <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
+              style={styles.input}
+              value={message}
+              onChangeText={setMessage}
+              placeholder="Enter your message"
+              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',
  },
 });
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",