From 84a975e89aa446b247dd0d1d5092a625cdd82dcc Mon Sep 17 00:00:00 2001
From: whysman <whysman@whystech.com>
Date: Sat, 22 Mar 2025 13:46:28 -0400
Subject: [PATCH] Refactored Navs, renamed files, added About

---
 app/index.tsx                                 | 15 +++---
 assets/styles.ts                              |  4 +-
 components/About.tsx                          | 47 +++++++++++++++++++
 components/BottomNav.tsx                      | 12 ++---
 components/Location.tsx                       | 27 +++++++++++
 components/{ProfileScreen.tsx => Profile.tsx} |  4 +-
 components/{StatusPage.tsx => Status.tsx}     |  8 ++--
 components/{Nav.tsx => TopNav.tsx}            | 15 +++---
 8 files changed, 103 insertions(+), 29 deletions(-)
 create mode 100644 components/About.tsx
 create mode 100644 components/Location.tsx
 rename components/{ProfileScreen.tsx => Profile.tsx} (97%)
 rename components/{StatusPage.tsx => Status.tsx} (97%)
 rename components/{Nav.tsx => TopNav.tsx} (75%)

diff --git a/app/index.tsx b/app/index.tsx
index 44ad80f..eb1fcf9 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import {View, Text } from "react-native";
 import { useTheme } from "react-native-paper";
-import ProfileScreen from "@/components/ProfileScreen";
-import StatusPage from "@/components/StatusPage";
-import Nav from "@/components/Nav";
+import { Helmet } from 'react-helmet-async'
+import Profile from "@/components/Profile";
+import Status from "@/components/Status";
+import TopNav from "@/components/TopNav";
 import BottomNav from "@/components/BottomNav"
 import { useUser } from "@/context/UserContext";
 import styles from "@/assets/styles";
@@ -39,10 +40,10 @@ const Index = () => {
 
     return (
         <View style={[styles.indexContainer, { backgroundColor: theme.colors.background }]}>
-            <Nav
+            <TopNav
                 toggleProfile={() => setProfileActive(true)}
             />
-            <StatusPage
+            <Status
                 id={userId}
                 name={userName}
                 image={userImage}
@@ -51,7 +52,7 @@ const Index = () => {
                 currentTheme={currentTheme}
                 isProfileActive={isProfileActive}
             />
-            <ProfileScreen
+            <Profile
                 visible={isProfileActive}
                 id={userId}
                 name={userName}
@@ -63,7 +64,7 @@ const Index = () => {
                 setChanged={setUserDataChanged}
                 onClose={() => setProfileActive(false)}
             />
-            <BottomNav />
+            <BottomNav toggleLocation={() => setProfileActive(true)}/>
         </View>
     );
 };
diff --git a/assets/styles.ts b/assets/styles.ts
index 18dc72f..be1b420 100644
--- a/assets/styles.ts
+++ b/assets/styles.ts
@@ -74,7 +74,9 @@ const styles = StyleSheet.create({
     },
     //Nav
     logoContainer: { flex: 1, alignItems: "center" },
-    logo: { width: 150, height: 75 },
+    logo: { width: 140, height: 70 },
+    topBar: { },
+    bottomBar: { height: 38 },
     //index
     indexImageBackground: {
         position: "absolute",  // Allows child elements to layer on top
diff --git a/components/About.tsx b/components/About.tsx
new file mode 100644
index 0000000..eb8a96f
--- /dev/null
+++ b/components/About.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { ScrollView } from 'react-native';
+import { Card, Title, Paragraph, Text, Dialog} from 'react-native-paper';
+
+const About = () => {
+    return (
+        <Dialog.Content style={{ maxHeight: 300 }}>
+            <ScrollView style={{ padding: 16 }}>
+                <Card style={{ marginBottom: 16 }}>
+                    <Card.Content>
+                        <Paragraph style={{ fontSize: 20 }}>
+                            <Text style={{ fontWeight: 'bold' }}>Pogdark</Text> is a dog park communication application that
+                            allows users to inform others when they are on the way or have arrived at a dog park of their choice.
+                        </Paragraph>
+                    </Card.Content>
+                </Card>
+
+                <Card style={{ marginBottom: 16 }}>
+                    <Card.Content>
+                        <Title style={{ fontSize: 20, marginBottom: 8 }}>How It Works</Title>
+                        <Paragraph style={{ fontSize: 16 }}>
+                            1. Users select a simple status:{"\n"}
+                            {"   "}• "On My Way"{"\n"}
+                            {"   "}• "Arrived"{"\n\n"}
+                            2. The status is instantly sent via a WebSocket broker to other users who are listening.{"\n\n"}
+                            3. Users can click again to cancel their current status, or status messages will automatically expire, ensuring no long-term data retention.
+                        </Paragraph>
+                    </Card.Content>
+                </Card>
+
+                <Card>
+                    <Card.Content>
+                        <Title style={{ fontSize: 20, marginBottom: 8 }}>Key Features</Title>
+                        <Paragraph style={{ fontSize: 16 }}>
+                            • <Text style={{ fontWeight: 'bold' }}>No Tracking, No Storage</Text> – The system doesn’t store user data or track locations. {"\n\n"}
+                            • <Text style={{ fontWeight: 'bold' }}>Instant Updates</Text> – Real-time messaging ensures quick communication. {"\n\n"}
+                            • <Text style={{ fontWeight: 'bold' }}>No Links or Logins</Text> – Users don’t need to generate links or sign up.  Profiles are stored locally, and created on initial use.{"\n\n"}
+                            • <Text style={{ fontWeight: 'bold' }}>Ephemeral by Design</Text> – Messages exist only for a 30 (On My Way) or 90 (Arrived) minute lifespan.
+                        </Paragraph>
+                    </Card.Content>
+                </Card>
+            </ScrollView>
+        </Dialog.Content>
+    );
+};
+
+export default About;
diff --git a/components/BottomNav.tsx b/components/BottomNav.tsx
index 624da8d..825d791 100644
--- a/components/BottomNav.tsx
+++ b/components/BottomNav.tsx
@@ -3,18 +3,18 @@ import {View} from "react-native";
 import styles from "@/assets/styles";
 import React from "react";
 
-const BottomNav = () => {
+const BottomNav = ({ toggleLocation }: { toggleLocation: () => void; }) => {
     const theme = useTheme();
     return (
         <View style={{ backgroundColor: theme.colors.background }}>
-            <Appbar.Header style={{ backgroundColor: theme.colors.primaryContainer, height: 38 }}>
+            <Appbar.Header style={[styles.bottomBar, { backgroundColor: theme.colors.primaryContainer }]} >
                 <View style={{ alignItems: "center", flexDirection: "row", justifyContent: "space-between", padding: 10, flex: 1, paddingHorizontal: 15 }}>
-                    <Text style={{ color: theme.colors.primary, fontFamily: "Light" }}>Daisy Knight Dog Park</Text>
+                    <Text style={{ color: theme.colors.primary, fontFamily: "SpaceReg" }}>Daisy Knight Dog Park</Text>
                     <Button
                         mode="text"
-                        onPress={() => null}
-                        style={{ backgroundColor: theme.colors.primary, height: 38/2, justifyContent: "center"}}
-                        labelStyle={{ color: theme.colors.onPrimary, fontFamily: "Light"}}>
+                        onPress={() => toggleLocation }
+                        style={{ backgroundColor: theme.colors.primary, height: styles.bottomBar.height/2, justifyContent: "center"}}
+                        labelStyle={{ color: theme.colors.onPrimary, fontFamily: "SpaceReg"}}>
                         Change
                     </Button>
                 </View>
diff --git a/components/Location.tsx b/components/Location.tsx
new file mode 100644
index 0000000..77866d0
--- /dev/null
+++ b/components/Location.tsx
@@ -0,0 +1,27 @@
+import { Button, TextInput, Dialog, Portal, Avatar, useTheme, Text } from "react-native-paper";
+import React, {useEffect} from "react";
+
+import themes from '@/assets/themes';
+
+
+interface LocationProps {
+    visible: boolean;
+}
+const Location: React.FC<LocationProps> = ({ visible }) => {
+    const theme = useTheme();
+
+    useEffect(() => {
+        if (visible) {
+
+        }
+    }, [visible]);
+    return (
+        <Portal>
+            <Dialog visible={visible} >
+                <Dialog.Title style={{ color: theme.colors.onBackground, textAlign: 'center', fontFamily: "Light"}}>Choose Your Location</Dialog.Title>
+            </Dialog>
+        </Portal>
+    )
+}
+
+export default Location;
diff --git a/components/ProfileScreen.tsx b/components/Profile.tsx
similarity index 97%
rename from components/ProfileScreen.tsx
rename to components/Profile.tsx
index 78fbeda..67e1a87 100644
--- a/components/ProfileScreen.tsx
+++ b/components/Profile.tsx
@@ -22,7 +22,7 @@ interface ProfileScreenProps {
     onClose: () => void;
 }
 
-const ProfileScreen: React.FC<ProfileScreenProps> = ({ visible, name, setName, image, setImage, setChanged, currentTheme, setTheme, onClose }) => {
+const Profile: React.FC<ProfileScreenProps> = ({ visible, name, setName, image, setImage, setChanged, currentTheme, setTheme, onClose }) => {
     const theme = useTheme();
     const isNameEmpty = !name.trim();
     const themeColors = ['red', 'blue', 'yellow', 'green', 'orange', 'purple'];
@@ -167,4 +167,4 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ visible, name, setName, i
     );
 };
 
-export default ProfileScreen;
+export default Profile;
diff --git a/components/StatusPage.tsx b/components/Status.tsx
similarity index 97%
rename from components/StatusPage.tsx
rename to components/Status.tsx
index b8f3d52..1aff20e 100644
--- a/components/StatusPage.tsx
+++ b/components/Status.tsx
@@ -29,7 +29,7 @@ interface StatusProps {
     isProfileActive: boolean;
 }
 
-const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStatus, currentTheme, isProfileActive })  => {
+const Status: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStatus, currentTheme, isProfileActive })  => {
     log.debug("WebSocket URL: ", WS_URL);
     log.debug("API URL: ", API_URL);
     const theme = useTheme();
@@ -221,7 +221,7 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
                             styles.actionButton,
                             { backgroundColor: currentStatus === "On the Way" ? pulseColorOnTheWay : theme.colors.primaryContainer }
                         ]}
-                        labelStyle={{ color: theme.colors.primary, fontFamily: "Heavy",}}>
+                        labelStyle={{ color: theme.colors.primary, fontFamily: "Medium", fontSize: 16 }}>
                         {getButtonLabel("On the Way")}
                     </Button>
                 </Animated.View>
@@ -233,7 +233,7 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
                             styles.actionButton,
                             { backgroundColor: currentStatus === "Arrived" ? pulseColorArrived : theme.colors.primaryContainer }
                         ]}
-                        labelStyle={{ color: theme.colors.primary, fontFamily: "Heavy", }}>
+                        labelStyle={{ color: theme.colors.primary, fontFamily: "Medium", fontSize: 16 }}>
                         {getButtonLabel("Arrived")}
                     </Button>
                 </Animated.View>
@@ -242,4 +242,4 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
     );
 };
 
-export default StatusPage;
+export default Status;
diff --git a/components/Nav.tsx b/components/TopNav.tsx
similarity index 75%
rename from components/Nav.tsx
rename to components/TopNav.tsx
index 2c3d326..7bffd50 100644
--- a/components/Nav.tsx
+++ b/components/TopNav.tsx
@@ -1,9 +1,10 @@
 import {Appbar, Portal, Button, Dialog, Menu, Text, useTheme} from "react-native-paper";
-import {Image, useColorScheme, View} from "react-native";
+import {Animated, Image, useColorScheme, View} from "react-native";
 import React, {useState} from "react";
 import styles from "@/assets/styles";
+import About from "@/components/About";
 
-const Nav = ({ toggleProfile }: { toggleProfile: () => void; }) => {
+const TopNav = ({ toggleProfile }: { toggleProfile: () => void; }) => {
     const theme = useTheme();
     const colorScheme = useColorScheme();
     const [aboutVisible, setAboutVisible] = useState(false);
@@ -12,7 +13,7 @@ const Nav = ({ toggleProfile }: { toggleProfile: () => void; }) => {
 
     return (
         <View style={{ backgroundColor: theme.colors.background }}>
-            <Appbar.Header style={{ backgroundColor: theme.colors.primaryContainer }}>
+            <Appbar.Header style={[styles.topBar, { backgroundColor: theme.colors.primaryContainer }]}>
                 <View>
                     <Menu visible={menuVisible} onDismiss={() => setMenuVisible(false)} anchor={menuAnchor} style={{ backgroundColor: theme.colors.primaryContainer }}>
                         <Menu.Item onPress={() => { setMenuVisible(false); setAboutVisible(true);}} title="About Us" style={{ backgroundColor: theme.colors.primaryContainer }}/>
@@ -35,11 +36,7 @@ const Nav = ({ toggleProfile }: { toggleProfile: () => void; }) => {
             <Portal>
                 <Dialog visible={aboutVisible} onDismiss={() => setAboutVisible(false)} style={{ backgroundColor: theme.colors.primaryContainer }}>
                     <Dialog.Title style={{ color: theme.colors.primary, textAlign: 'center' }}>About Us</Dialog.Title>
-                    <Dialog.Content>
-                        <Text style={{ color: theme.colors.primary, textAlign: 'justify' }}>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec laoreet luctus, felis sapien facilisis augue, at tristique enim turpis nec turpis. Donec convallis justo vel mi consectetur, at pulvinar justo dictum. Mauris vulputate dapibus neque, sed sagittis libero dapibus eu. Integer nec mi at quam cursus suscipit sed et tortor.
-                        </Text>
-                    </Dialog.Content>
+                    <About />
                     <Dialog.Actions style={{ justifyContent: "center" }}>
                         <Button onPress={() => setAboutVisible(false)} mode="contained" style={{ backgroundColor: theme.colors.inversePrimary }} labelStyle={{ color: theme.colors.primary }}>
                             Close
@@ -51,4 +48,4 @@ const Nav = ({ toggleProfile }: { toggleProfile: () => void; }) => {
     );
 };
 
-export default Nav;
+export default TopNav;