added pop up modal+format+style

app/ChallengeWeek.js

@@ -6,6 +6,7 @@ import {
   View,
   Text,
   StatusBar,
+  Linking,
 } from 'react-native';
 
 import {
@@ -15,7 +16,7 @@ import {
   DebugInstructions,
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
-
+import styles from './styles/liststyles';
 import { url } from './resources/fetchInfo.json'
 
 class ChallengeWeek extends React.Component {
@@ -43,9 +44,10 @@ class ChallengeWeek extends React.Component {
 			return <View/>
 		} else {
 			return (
-				<View style={{alignItems:'center',paddingTop:'5%',paddingLeft:'10%',paddingRight:'10%'}}>
+				<View style={{alignItems:'center',paddingTop:'5%',paddingiorizontal:'10%', height: '100%', backgroundColor: 'white'}}>
-					<Text style={{fontSize:32,marginBottom:'10%',textAlign:'center'}}>{this.state.data.title}</Text>
+					<Text style={{fontSize: 32, fontWeight: 'bold', marginBottom: '10%', color: 'red'}}>{this.state.data.title}</Text>
-					<Text style={{textAlign:'center'}}>{this.state.data.text}</Text>
+					<Text style={{textAlign:'center', fontSize: 24, marginBottom: '5%'}}>{this.state.data.text}</Text>
+					<Text style={{textAlign:'center', fontSize: 20, textDecorationLine: 'underline', textDecorationStyle: "solid", textDecorationColor: "#000",}} onPress={() => Linking.openURL(this.state.data.link)}>{this.state.data.link}</Text>
 				</View>
 			)
 		}

app/Home.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   SafeAreaView,
   StyleSheet,
@@ -6,6 +6,9 @@ import {
   View,
   Text,
   StatusBar,
+  Modal,
+  TouchableHighlight,
+  Image,
 } from 'react-native';
 
 import {
@@ -15,15 +18,61 @@ import {
   DebugInstructions,
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
+import styles from './styles/morestyles'
 
+function Home1() {
+
+const [modalVisible, setModalVisible] = useState(true);
+  return (
+    <View>
+      <View>
+        <Modal animationType="slide" transparent={true} visible={modalVisible}>
+          <View style={styles.modal}>
+            <View style={{display: 'flex', flexDirection:'row', justifyContent: 'flex-end'}}>
+              <TouchableHighlight onPress={() => {setModalVisible(!modalVisible);}}>
+                <Image source = {require('./assets/exit.png')} style = {{height: 40, width: 40}}/>
+              </TouchableHighlight>
+            </View>  
+            <View>
+              <Image source = {require('./assets/blair_logo.png')} style = {{alignSelf: 'center', marginTop: '5%', height: 325, width: 325}}/>
+              <Text style={styles.modalText}>hgjriwogjewope</Text>
+            </View>
+          </View>
+        </Modal>
+      </View>
+      <View>
+
+      </View>
+    </View>
+  )
+}
 class Home extends React.Component {
+  constructor(props) {
+		super(props)
+		this.state = {
+			data: [],
+			isLoading:true
+		}
+	}
+	
+	/*componentDidMount() {
+		fetch(`${url}/api/en/popup`,{
+		  headers: {
+			'Cache-Control': 'no-cache'
+		  }}
+		).then((response) => {
+			return response.text();
+		}).then((json) => {
+			this.setState({data: JSON.parse(json),isLoading:false});
+		}).catch((error) => console.error(error))
+  }*/
+  
 	render() {
 		return (
       <View>
-			
+        <Home1></Home1>
       </View>
 		)
 	}
 }
-
 export default Home;

app/LunchEvents.js

@@ -24,11 +24,28 @@ import styles from './styles/liststyles'
 import { url } from './resources/fetchInfo.json'
 const Stack = createStackNavigator();
 
-const LunchEvent = (props) => {
+export const LunchInfo = ({route}) => {
+    const item = route.params;
+    return (
+      <View style = {{padding: 10}}>
+        <Text style = {styles.eventTitle}>{item.name}</Text>
+        <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.title}>{item.loc}</Text>
+        </View>
+      </View>
+    )
+}
+
+function LunchEvent (props) {
     const item = props.item
     return(
         <View>
-			<TouchableOpacity style={styles.item1} onPress={()=>props.navigation.navigate('LunchInfo', {data:props.data,name:props.name,text:item.text,loc:item.loc})} activeOpacity={0.8}>
+            <TouchableOpacity style={styles.item1} onPress={()=>props.navigation.navigate('LunchInfo', {data:props.data,name:item.title,text:item.text,loc:item.loc})} activeOpacity={0.8}>
             <View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
                 <Image source = {require('./assets/lunch.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
                 <Text style={styles.title}>{item.title}</Text>
@@ -37,21 +54,7 @@ const LunchEvent = (props) => {
         </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}>
@@ -67,6 +70,7 @@ function Lunch () {
             name = "LunchInfo"
             component = {LunchInfo}
             options={({route})=>({
+              headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
               title:route.params.name
             })}
           />
@@ -105,7 +109,7 @@ class LunchEvents extends React.Component {
             <View style={styles.container}>
                 <FlatList
                     data={this.state.data}
-					renderItem={({item}) => <LunchEvent item={item} name={item.title} navigation={this.props.navigation}/>}
+                    renderItem={({item}) => <LunchEvent item={item} name={this.props.title} navigation={this.props.navigation}/>}
                     keyExtractor={item=>JSON.stringify(item)}
                 />
             </View>
@@ -114,3 +118,4 @@ class LunchEvents extends React.Component {
 }
 
 export default Lunch;
+

app/SSLOps.js

@@ -30,13 +30,14 @@ export const SSLInfo = ({route}) => {
 	console
 	return (
 		<View style = {{padding: 10}}>
+			<Text style = {styles.eventTitle}>{item.name}</Text>
 			<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>
+				<Text style = {styles.title}>{item.teacher}</Text>
 			</View>
 					<View style ={styles.infoContainer}>
 				<Text style = {styles.title1}>Where: </Text>

app/styles/liststyles.js

@@ -34,6 +34,14 @@ const styles = StyleSheet.create({
     fontSize: 28,
     fontWeight: 'bold',
   },
+  title2: {
+    fontSize: 22,
+    fontWeight: 'bold',
+    color: 'red',
+    textDecorationLine: 'underline',
+    textDecorationStyle: "solid",
+    textDecorationColor: "red",
+  },
   link: {
     fontSize: 28,
     textDecorationLine: 'underline',
@@ -45,6 +53,16 @@ const styles = StyleSheet.create({
     borderRadius: 6,
     padding: 5,
     marginBottom: 10,
+  },
+  headerTitle: {
+    fontSize: 24,
+  },
+  eventTitle: {
+    textAlign: 'center',
+    fontSize: 32,
+    fontWeight: 'bold',
+    padding: 5,
+    marginBottom: 10,
   }
 });
 

app/styles/morestyles.js

@@ -57,6 +57,33 @@ const styles=StyleSheet.create({
 	tabBarIcon: {
 		height: 50,
 		width: 50,
+	},
+	popup: {
+		height: '90%',
+		display: 'flex',
+		flexDirection: 'column',
+		justifyContent: "center",
+		alignItems: "center",
+	  },
+	modal: {
+		marginHorizontal: 20,
+		marginTop: '20%',
+		height: '100%',
+		backgroundColor: "white",
+		borderRadius: 20,
+		padding: 15,
+		shadowColor: "black",
+		shadowOffset: {
+			width: 0,
+			height: 2
+		},
+		shadowOpacity: 0.5,
+		shadowRadius: 7,
+	},
+	modalText: {
+		marginVertical: '10%',
+		textAlign: "center",
+		fontSize: 20,
 	}
 });