Cleaning up

app/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import {View, Text } from "react-native";
 import { useTheme } from "react-native-paper";
-import ProfileScreen from "@/components/ProfileScreen";
+import Profile from "@/components/Profile";
-import StatusPage from "@/components/StatusPage";
+import Status from "@/components/Status";
-import Nav from "@/components/Nav";
+import TopNav from "@/components/TopNav";
 import BottomNav from "@/components/BottomNav"
 import { useUser } from "@/context/UserContext";
 import styles from "@/assets/styles";
@@ -39,10 +39,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 +51,7 @@ const Index = () => {
                 currentTheme={currentTheme}
                 isProfileActive={isProfileActive}
             />
-            <ProfileScreen
+            <Profile
                 visible={isProfileActive}
                 id={userId}
                 name={userName}
@@ -63,7 +63,7 @@ const Index = () => {
                 setChanged={setUserDataChanged}
                 onClose={() => setProfileActive(false)}
             />
-            <BottomNav />
+            <BottomNav toggleLocation={() => setProfileActive(true)}/>
         </View>
     );
 };

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

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;

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}
+                        onPress={() => toggleLocation }
-                        style={{ backgroundColor: theme.colors.primary, height: 38/2, justifyContent: "center"}}
+                        style={{ backgroundColor: theme.colors.primary, height: styles.bottomBar.height/2, justifyContent: "center"}}
-                        labelStyle={{ color: theme.colors.onPrimary, fontFamily: "Light"}}>
+                        labelStyle={{ color: theme.colors.onPrimary, fontFamily: "SpaceReg"}}>
                         Change
                     </Button>
                 </View>

components/Location.tsx

@@ -0,0 +1,24 @@
+import { Dialog, Portal, useTheme } from "react-native-paper";
+import React, {useEffect} from "react";
+
+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;

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;

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;

components/TopNav.tsx

@@ -1,9 +1,10 @@
-import {Appbar, Portal, Button, Dialog, Menu, Text, useTheme} from "react-native-paper";
+import {Appbar, Portal, Button, Dialog, Menu, useTheme} from "react-native-paper";
 import {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>
+                    <About />
-                        <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>
                     <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;