SSLOps, LunchEvent pg to match design team+style

app/Clubs.js

@@ -10,7 +10,8 @@ import {
   FlatList,
   TouchableOpacity,
   Image,
-  TouchableHighlight
+  TouchableHighlight,
+  Linking
 } from 'react-native';
 
 import {
@@ -25,6 +26,7 @@ import { createStackNavigator } from '@react-navigation/stack'
 import { SearchBar } from 'react-native-elements';
 import styles from './styles/liststyles'
 import { url } from './resources/fetchInfo.json'
+import LinearGradient from 'react-native-linear-gradient';
 
 const Stack = createStackNavigator();
 
@@ -32,7 +34,18 @@ export const ClubInfo = ({route}) => {
   const item = route.params;
   return (
     <View style = {{padding: 10}}>
-      <Text style = {{fontSize: 28}}>Meeting Time and Day: {'\n'}{item.meeting}{"\n\n"}Zoom Link: {'\n'}{item.link}{"\n\n"}Sponsor: {'\n'}{item.sponsor}</Text>
+      <View style ={styles.infoContainer}>
+        <Text style = {styles.title1}>Meeting Time and Day: </Text>
+        <Text style = {styles.title}>{item.meeting}</Text>
+      </View>
+      <View style ={styles.infoContainer}>
+        <Text style = {styles.title1}>Zoom Link: </Text>
+        <Text style = {styles.link} onPress={() => Linking.openURL(item.link)}>{item.link}</Text>
+      </View>
+			<View style ={styles.infoContainer}>
+        <Text style = {styles.title1}>Sponsor: </Text>
+			  <Text style = {styles.title}>{item.sponsor}</Text>
+      </View>
     </View>
   )
 }

app/LunchEvents.js

@@ -8,6 +8,7 @@ import {
   StatusBar,
   FlatList,
   TouchableOpacity,
+  Image,
 } from 'react-native';
 
 import {
@@ -17,22 +18,62 @@ import {
   DebugInstructions,
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
-
+import { NavigationContainer } from '@react-navigation/native'
+import { createStackNavigator } from '@react-navigation/stack'
 import styles from './styles/liststyles'
 import { url } from './resources/fetchInfo.json'
+const Stack = createStackNavigator();
 
-const LunchEvent = ({item}) => {
+const LunchEvent = (props) => {
-	const [visible, setVisible] = useState(0)
+	const item = props.item
-	const extra = visible?(<Text>{'\n'}{item.item.text}{'\n\n'}Location: {item.item.loc}</Text>):(<></>);
 	return(
 		<View>
-			<TouchableOpacity style={styles.item} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
+			<TouchableOpacity style={styles.item1} onPress={()=>props.navigation.navigate('LunchInfo', {data:props.data,name:props.name,text:item.text,loc:item.loc})} activeOpacity={0.8}>
-				<Text style={styles.title}>{item.item.title}</Text>
+			<View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
-				{extra}
+				<Image source = {require('./assets/lunch.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
+				<Text style={styles.title}>{item.title}</Text>
+			</View>
 			</TouchableOpacity>
 		</View>
 	)
 }
+export const LunchInfo = ({route}) => {
+	const item = route.params;
+	return (
+	  <View style = {{padding: 10}}>
+		<View style ={styles.infoContainer}>
+			<Text style = {styles.title1}>Description: </Text>
+			<Text style = {styles.title}>{item.text}</Text>
+		</View>
+		<View style ={styles.infoContainer}>
+			<Text style = {styles.title1}>Location: </Text>
+			<Text style = {styles.link}>{item.loc}</Text>
+		</View>
+	  </View>
+	)
+  }
+function Lunch () {
+	return (
+	  <NavigationContainer independent={true}>
+		<Stack.Navigator>
+		  <Stack.Screen 
+			name = "LunchEvents"
+			component = {LunchEvents}
+			options={({
+			  headerShown: false
+			})}
+		  />
+		  <Stack.Screen 
+			name = "LunchInfo"
+			component = {LunchInfo}
+			options={({route})=>({
+			  title:route.params.name
+			})}
+		  />
+		</Stack.Navigator>
+	  </NavigationContainer>
+	) 
+  }
 
 class LunchEvents extends React.Component {
 	
@@ -64,7 +105,7 @@ class LunchEvents extends React.Component {
 			<View style={styles.container}>
 				<FlatList
 					data={this.state.data}
-					renderItem={item=><LunchEvent item={item}/>}
+					renderItem={({item}) => <LunchEvent item={item} name={item.title} navigation={this.props.navigation}/>}
 					keyExtractor={item=>JSON.stringify(item)}
 				/>
 			</View>
@@ -72,4 +113,4 @@ class LunchEvents extends React.Component {
 	}
 }
 
-export default LunchEvents;
+export default Lunch;

app/SSLOps.js

@@ -8,6 +8,7 @@ import {
   StatusBar,
   FlatList,
   TouchableOpacity,
+  Image,
 } from 'react-native';
 
 import {
@@ -17,21 +18,69 @@ import {
   DebugInstructions,
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
+import { NavigationContainer } from '@react-navigation/native'
+import { createStackNavigator } from '@react-navigation/stack'
 import styles from './styles/liststyles';
 import { url } from './resources/fetchInfo.json';
 
-const SSLElement = ({item}) => {
+const Stack = createStackNavigator();
-  const [visible, setVisible] = useState(0)
+
-  const extra = visible?(<Text>{'\n'}Details: {item.item.text}{"\n\n"}Where: {item.item.loc}{"\n\n"}Teacher: {item.item.teacher}</Text>):(<></>);
+export const SSLInfo = ({route}) => {
+	const item = route.params;
+	console
+	return (
+		<View style = {{padding: 10}}>
+			<View style ={styles.infoContainer}>
+				<Text style = {styles.title1}>Description: </Text>
+				<Text style = {styles.title}>{item.text}</Text>
+			</View>
+			<View style ={styles.infoContainer}>
+				<Text style = {styles.title1}>Who: </Text>
+				<Text style = {styles.link}>{item.teacher}</Text>
+			</View>
+					<View style ={styles.infoContainer}>
+				<Text style = {styles.title1}>Where: </Text>
+					<Text style = {styles.title}>{item.loc}</Text>
+			</View>
+		</View>
+	)
+  }
+
+function SSLElement (props) {
+	const item = props.item;
 	return(
 		<View>
-      <TouchableOpacity style={styles.item} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
+			<TouchableOpacity style={styles.item1} onPress={()=>props.navigation.navigate('SSLInfo', {data: props.data, name: item.item.title, text: item.item.text, loc:item.item.loc, teacher: item.item.teacher})} activeOpacity={0.8}>
+				<View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
+					<Image source = {require('./assets/sslopps.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
 					<Text style={styles.title}>{item.item.title}</Text>
-      {extra}
+				</View>
 			</TouchableOpacity>
 		</View>
     )
 }
+function SSLOpp () {
+	return (
+	  <NavigationContainer independent={true}>
+		<Stack.Navigator>
+		  <Stack.Screen 
+			name = "SSLOps"
+			component = {SSLOps}
+			options={({
+			  headerShown: false
+			})}
+		  />
+		  <Stack.Screen 
+			name = "SSLInfo"
+			component = {SSLInfo}
+			options={({route})=>({
+			  title:route.params.title
+			})}
+		  />
+		</Stack.Navigator>
+	  </NavigationContainer>
+	) 
+  }
 
 class SSLOps extends React.Component {
 	
@@ -63,7 +112,7 @@ class SSLOps extends React.Component {
 			<View style={styles.container}>
 				<FlatList
 					data={this.state.data}
-					renderItem={item=><SSLElement item={item}/>}
+					renderItem={item=><SSLElement item={item} name={item.title} navigation={this.props.navigation}/>}
 					keyExtractor={item=>JSON.stringify(item)}
 				/>
 			</View>
@@ -71,4 +120,4 @@ class SSLOps extends React.Component {
 	}
 }
 
-export default SSLOps;
+export default SSLOpp;

app/Staff.js

@@ -30,7 +30,7 @@ const StaffElement = ({item}) => {
 	<View>
 	  <TouchableOpacity style={styles.item1} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
     <View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
-      <Image source = {require('./assets/clubs.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
+      <Image source = {require('./assets/staff.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
       <Text style={styles.title}>{item.item.name}</Text>
     </View>
 		{visible?extra:<></>}

app/styles/liststyles.js

@@ -29,6 +29,22 @@ const styles = StyleSheet.create({
 	  alignSelf:'flex-end',
 	  marginTop:'-3%',
 	  marginRight:'-3%'
+  },
+  title1: {
+    fontSize: 28,
+    fontWeight: 'bold',
+  },
+  link: {
+    fontSize: 28,
+    textDecorationLine: 'underline',
+    textDecorationStyle: "solid",
+    textDecorationColor: "#000",
+  },
+  infoContainer: {
+    backgroundColor: 'white',
+    borderRadius: 6,
+    padding: 5,
+    marginBottom: 10,
   }
 });