Some small changes throughout the app to improve it

app/Announcements.js

@@ -31,9 +31,9 @@ const Announcement = ({item}) => {
 	const dateStr = `${date.getMonth()+1}/${date.getDate()}/${date.getFullYear()}`
 	const dateInfo = dateStr===item.item.date&&item.item.time!==undefined?item.item.time:item.item.date;
 	return (
-		<View style={styles.item}>
+		<View style={styles.item1}>
 			{dateInfo!==undefined?<Text style={styles.date}>{dateInfo}</Text>:<></>}
-			<Text style={styles.title}>{item.item.message}</Text>
+			<Text style={{fontSize:20}}>{item.item.message}</Text>
 		</View>
 	)
 }
@@ -51,13 +51,13 @@ export const TeacherList = ({route}) => {
 }
 
 function TeacherButton(props) {
-	const [color, setColor] = useState(props.color?props.color:'white')
+	const [color, setColor] = useState(props.color?props.color:'lightgrey')
 	return (
-		<View style={[styles.item,{flexDirection:'row'}]}>
+		<View style={[styles.item1,{flexDirection:'row'}]}>
 		  <TouchableOpacity style={{flex:1}} onPress={()=>props.navigation.navigate('TeacherList',{data:props.data,name:props.name})} activeOpacity={0.8}>
 			<Text style={styles.title}>{props.name}</Text>
 		  </TouchableOpacity>
-		  {props.icon?<Icon.Button color={color} backgroundColor="#bababa" name="star" size={30} style={{alignSelf:'center'}} onPress={()=>{setColor(color=='yellow'?'white':'yellow');props.addFavorite(props.name)}}/>:<></>}
+		  {props.icon?<Icon.Button color={color} name="star" size={30} style={{alignSelf:'center'}} backgroundColor="white" onPress={()=>{setColor(color=='#dba309'?'lightgrey':'#dba309');props.addFavorite(props.name)}}/>:<></>}
 		</View>
 	)
 }
@@ -120,7 +120,7 @@ class Announcements extends React.Component {
 				<TeacherButton data={this.state.data.filter(x=>x.teacher==null||x.teacher.trim()==='')} name="No Teacher" navigation={this.props.navigation} />
 				<FlatList
 					data={this.state.favoriteNames.concat(this.state.teacherNames.filter(x=>this.state.favoriteNames.map(({name})=>name).indexOf(x.name) < 0))}
-					renderItem={({item})=><TeacherButton color={this.state.favoriteNames.indexOf(item) >= 0?'yellow':'white'} item={item} data={this.state.data.filter(x=>x.teacher===item.name)} name={item.name} navigation={this.props.navigation} icon={true} addFavorite={this.addFavorite}/>}
+					renderItem={({item})=><TeacherButton color={this.state.favoriteNames.indexOf(item) >= 0?'#dba309':'lightgrey'} item={item} data={this.state.data.filter(x=>x.teacher===item.name)} name={item.name} navigation={this.props.navigation} icon={true} addFavorite={this.addFavorite}/>}
 					keyExtractor={(item,index)=>item.name+index}
 				/>
 			</View>

app/Clubs.js

@@ -25,6 +25,7 @@ import { NavigationContainer } from '@react-navigation/native'
 import { createStackNavigator } from '@react-navigation/stack'
 import { SearchBar } from 'react-native-elements';
 import styles from './styles/liststyles'
+import morestyles from './styles/morestyles'
 import { url } from './resources/fetchInfo.json'
 import LinearGradient from 'react-native-linear-gradient';
 
@@ -79,7 +80,9 @@ function Club () {
           name = "ClubInfo"
           component = {ClubInfo}
           options={({route})=>({
-            title:route.params.name
+            title:route.params.name,
+			headerTitleStyle:[morestyles.headerTitle,{alignSelf:'center'}],
+			headerRight:()=>(<></>)
           })}
         />
       </Stack.Navigator>

app/LunchEvents.js

@@ -28,7 +28,6 @@ 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>
@@ -55,30 +54,6 @@ function LunchEvent (props) {
     )
 }
 
-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})=>({
-              headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
-              title:route.params.name
-            })}
-          />
-        </Stack.Navigator>
-      </NavigationContainer>
-    ) 
-  }
-
 class LunchEvents extends React.Component {
     
     constructor(props) {
@@ -117,5 +92,5 @@ class LunchEvents extends React.Component {
     }
 }
 
-export default Lunch;
+export default LunchEvents;
 

app/More.js

@@ -25,8 +25,8 @@ import styles from './styles/morestyles'
 import Announcements, {TeacherList} from './Announcements'
 import Resources from './Resources'
 import StudentWeek from './StudentWeek'
-import SSLOps from './SSLOps'
-import LunchEvents from './LunchEvents'
+import SSLOps, {SSLInfo} from './SSLOps'
+import LunchEvents, {LunchInfo} from './LunchEvents'
 import ChallengeWeek from './ChallengeWeek'
 import { LinearGradient } from 'react-native-linear-gradient'
 
@@ -133,7 +133,24 @@ class More extends React.Component {
 						name="TeacherList" 
 						component={TeacherList}
 						options={({route})=>({
-							headerTitleStyle:[styles.headerTitle,{alignSelf:'center',marginLeft:"-20%"}],
+							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
+							title:route.params.name,
+							headerRight:()=>(<></>)
+						})}
+					/>
+					<Stack.Screen 
+						name="LunchInfo" 
+						component={LunchInfo}
+						options={({route})=>({
+							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
+							title:route.params.name
+						})}
+					/>
+					<Stack.Screen 
+						name="SSLInfo" 
+						component={SSLInfo}
+						options={({route})=>({
+							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
 							title:route.params.name
 						})}
 					/>

app/SSLOps.js

@@ -30,7 +30,6 @@ 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>
@@ -60,28 +59,6 @@ function SSLElement (props) {
 		</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 {
 	
@@ -121,4 +98,4 @@ class SSLOps extends React.Component {
 	}
 }
 
-export default SSLOpp;
+export default SSLOps;

app/Staff.js

@@ -9,7 +9,8 @@ import {
   ActivityIndicator, 
   FlatList,
   TouchableOpacity,
-  Image
+  Image,
+  Linking
 } from 'react-native';
 
 import {
@@ -24,8 +25,8 @@ import styles from './styles/liststyles'
 import { url } from './resources/fetchInfo.json'
 
 const StaffElement = ({item}) => {
-  const [visible, setVisible] = useState(0)
-  const extra = [...item.item.emails.map(email=>(<Text key={email}>{'\n'}Email: {email}</Text>))]
+  const [visible, setVisible] = useState(false)
+  const extra = [...item.item.emails.map(email=>(<Text key={email}>{'\n'}Email: <Text style={styles.linktext} onPress={()=>Linking.openURL("mailto:"+email)}>{email}</Text></Text>))]
   return(
 	<View>
 	  <TouchableOpacity style={styles.item1} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>

app/styles/liststyles.js

@@ -6,12 +6,10 @@ const styles = StyleSheet.create({
     marginTop: StatusBar.currentHeight || 0,
   },
   item: {
-    backgroundColor: '#bababa',
+    backgroundColor: 'white',
     padding: 20,
-    marginHorizontal: 16,
     borderBottomWidth: 1.5,
-    borderColor: 'black',
-    borderRadius: 12,
+    borderColor: 'black'
   },
   item1: {
     backgroundColor: 'white',
@@ -63,6 +61,10 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     padding: 5,
     marginBottom: 10,
+  },
+  linktext: {
+	  color:'blue',
+	  textDecorationLine: 'underline'
   }
 });