added footer to mobile app

Seneca-CDOT · Mar 25, 2022 · c169031 · c169031
1 parent e1bf124
commit c169031
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 14 deletions.
diff --git a/src/mobile/src/components/Footer.jsx b/src/mobile/src/components/Footer.jsx
@@ -1,4 +1,4 @@
-import { View, Text, Image, StyleSheet, Pressable } from 'react-native';
+import { View, Text, Image, StyleSheet, Pressable, Linking } from 'react-native';
 import { AntDesign } from '@expo/vector-icons';
 import { Ionicons } from '@expo/vector-icons';
 
@@ -74,18 +74,34 @@ const Footer = () => {
           <View style={styles.left}>
             <Text style={styles.heading}>Docs</Text>
             <View style={styles.leftDivider}></View>
-            <Pressable>
+            <Pressable
+              onPress={() =>
+                Linking.openURL(
+                  'https://github.com/Seneca-CDOT/telescope/blob/master/docs/environment-setup.md'
+                )
+              }
+            >
               <Text style={styles.subheading}>Get Started</Text>
             </Pressable>
-            <Pressable>
+            <Pressable
+              onPress={() =>
+                Linking.openURL(
+                  'https://github.com/Seneca-CDOT/telescope/blob/master/docs/CONTRIBUTING.md'
+                )
+              }
+            >
               <Text style={styles.subheading}>Contribute</Text>
             </Pressable>
           </View>
 
           <View style={styles.right}>
             <Text style={styles.heading}>More</Text>
             <View style={styles.rightDivider}></View>
-            <Pressable>
+            <Pressable
+              onPress={() =>
+                Linking.openURL('https://wiki.cdot.senecacollege.ca/wiki/Planet_CDOT_Feed_List')
+              }
+            >
               <Text style={styles.subheading}>Planet CDOT Feed List</Text>
             </Pressable>
           </View>
@@ -95,10 +111,14 @@ const Footer = () => {
           <Text style={styles.heading}>Community</Text>
           <View style={styles.leftDivider}></View>
           <View style={{ flexDirection: 'row' }}>
-            <Pressable>
+            <Pressable onPress={() => Linking.openURL('https://github.com/Seneca-CDOT/telescope')}>
               <AntDesign name="github" style={styles.communityLogo} size={24} color="white" />
             </Pressable>
-            <Pressable>
+            <Pressable
+              onPress={() =>
+                Linking.openURL('https://seneca-open-source.slack.com/archives/CS5DGCAE5')
+              }
+            >
               <Ionicons name="logo-slack" style={styles.communityLogo} size={24} color="white" />
             </Pressable>
           </View>

diff --git a/src/mobile/src/components/GitHubContributorCard.jsx b/src/mobile/src/components/GitHubContributorCard.jsx
@@ -1,10 +1,34 @@
-import { View, Text } from 'react-native';
+import { View, Text, Image, StyleSheet } from 'react-native';
 import React from 'react';
 
 const GitHubContributorCard = () => {
+  const styles = StyleSheet.create({
+    container: {
+      width: '100%',
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: '#A0D1FB',
+      borderRadius: 5,
+    },
+    avatarContainer: {
+      width: '30%',
+    },
+    avatar: {
+      width: 50,
+      height: 50,
+    },
+    content: {
+      width: '70%',
+    },
+  });
+
   return (
-    <View>
-      <Text>GitHubContributorCard</Text>
+    <View style={styles.container}>
+      <View styles={styles.avatarContainer}>
+        <Image style={styles.avatar} source={require('../assets/adaptive-icon.png')} />
+      </View>
+
+      <Text styles={styles.content}>GitHubContributorCard</Text>
     </View>
   );
 };

diff --git a/src/mobile/src/screens/AboutScreen.jsx b/src/mobile/src/screens/AboutScreen.jsx
@@ -1,15 +1,12 @@
 import React from 'react';
 import { ScrollView, Text, StyleSheet, Linking, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-
+import Footer from '../components/Footer';
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'center',
   },
-  scrollView: {
-    width: '80%',
-  },
   header: {
     color: '#A0D1FB',
     fontWeight: 'bold',
@@ -30,13 +27,22 @@ const styles = StyleSheet.create({
     width: '80%',
     paddingVertical: 10,
   },
+  aboutInfo: {
+    paddingVertical: 10,
+    width: '80%',
+    alignSelf: 'center',
+  },
+  scrollView: {
+    flexDirection: 'column',
+    width: '100%',
+  },
 });
 
 const AboutScreen = () => {
   return (
     <SafeAreaView style={styles.container}>
       <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
-        <View style={{ paddingVertical: 10 }}>
+        <View style={styles.aboutInfo}>
           <Text style={[styles.header, styles.aboutHeader]}>About</Text>
           <Text>
             One of the key features of Seneca's open source involvement has been the emphasis on
@@ -121,6 +127,7 @@ const AboutScreen = () => {
             the task of defining our planet.
           </Text>
         </View>
+        <Footer />
       </ScrollView>
     </SafeAreaView>
   );