refactor: add styling

Author: NuclearRedeye

src/screens/about.tsx

@@ -1,5 +1,5 @@
 import { useNavigation, useRoute } from '@react-navigation/native';
-import { View, Text } from 'react-native';
+import { View, Text, StyleSheet } from 'react-native';
 import { Button } from '@react-navigation/elements';
 
 export type AboutScreenProps = {
@@ -13,9 +13,29 @@ export function AboutScreen() {
   const { depth } = route.params as AboutScreenProps;
 
   return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Text>You are currently {depth} screens deep</Text>
-      <Button onPress={() => navigation.popTo('Home')}>Go Home</Button>
-    </View>
+    <>
+      <View style={styles.container}>
+        <Text>ACME Mission Manager</Text>
+        <Text>v0.0.1 (build 13)</Text>
+        <Text>© 2025 ACME Industries LTD</Text>
+      </View>
+      <View style={styles.footer}>
+        <Button onPress={() => navigation.popTo('Home')}>Back</Button>
+      </View>
+    </>
   );
-}
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: '2',
+    justifyContent: 'center',
+  },
+  footer: {
+    alignItems: 'center',
+    paddingBottom: 10,
+  }
+});

src/screens/home.tsx

@@ -13,21 +13,27 @@ export function HomeScreen() {
   const { message } = route.params as HomeScreenProps;
 
   return (
-    <View style={styles.container}>
-      <Text>{message}</Text>
-      <Button style={styles.bottom} onPress={() => navigation.push('About')}>Go to Details</Button>
-    </View>
+    <>
+      <View style={styles.container}>
+        <Text>{message}</Text>
+      </View>
+      <View style={styles.footer}>
+          <Button onPress={() => navigation.push('About')}>About</Button>
+      </View>
+    </>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    flexDirection: 'row',
+    flexDirection: 'column',
     alignItems: 'center',
+    gap: '2',
     justifyContent: 'center',
   },
-  bottom: {
-    alignSelf: 'flex-end',
+  footer: {
+    alignItems: 'center',
+    paddingBottom: 10,
   }
 });