small improvements throughout app

app/Calendar.js

@@ -32,6 +32,7 @@ const Event = ({item}) => {
 	const [visible, setVisible] = useState(false)
   const date = item.item.date.split('-')
   const today = new Date(getCurrentDate())
+  const week = new Date().setDate(new Date().getDate() - 8)
   const itemDate = new Date(item.item.date)
 
 	const extra = (
@@ -56,7 +57,7 @@ const Event = ({item}) => {
 		  </TouchableOpacity>
     )
   }
-  else {
+  else if (itemDate >= week){
     return (
 		<TouchableOpacity style={{backgroundColor: '#e3e3e3', padding: 15, borderBottomWidth: 1, borderColor: 'black', width: '100%',}} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
 			<View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center', justifyContent: 'space-between'}}>
@@ -72,7 +73,11 @@ const Event = ({item}) => {
 		</TouchableOpacity>
 	  )
   }
-  
+  else {
+    return (
+      null
+    )
+  }
 }
 
 class Calendar extends React.Component {

app/Images.js

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import {
+  SafeAreaView,
+  StyleSheet,
+  ScrollView,
+  View,
+  Text,
+  StatusBar,
+  Modal,
+  TouchableHighlight,
+  Image,
+} from 'react-native';
+
+import {
+  Header,
+  LearnMoreLinks,
+  Colors,
+  DebugInstructions,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+import styles from './styles/morestyles'
+
+const Images = {
+    sslopps: require('./assets/sslopps.png'),
+    lunch: require('./assets/lunch.png'),
+    settings:require('./assets/settings.png'),
+    challenge:require('./assets/challenge.png'),
+    student:require('./assets/student.png'),
+    announcements:require('./assets/announcements.png'),
+    resources:require('./assets/resources.png'),
+}
+
+export default Images;

app/More.js

@@ -7,7 +7,8 @@ import {
   Text,
   StatusBar,
   FlatList,
-  TouchableOpacity
+  TouchableOpacity,
+  Image,
 } from 'react-native';
 
 import {
@@ -28,6 +29,8 @@ import StudentWeek from './StudentWeek'
 import SSLOps, {SSLInfo} from './SSLOps'
 import LunchEvents, {LunchInfo} from './LunchEvents'
 import ChallengeWeek from './ChallengeWeek'
+import Settings from './Settings'
+import Images from './Images'
 import LinearGradient from 'react-native-linear-gradient'
 
 const Stack = createStackNavigator()
@@ -43,15 +46,18 @@ class MoreSwitch extends React.Component {
 			<View style={{flex:1,backgroundColor:'red'}}>
 				<FlatList
 					data={[
-						{name:"Announcements",key:"announce"},
-						{name:"Resources",key:"resources"},
-						{name:"Student of the Week",key:"studentweek"},
-						{name:"Lunch Events",key:"lunchevent"},
-						{name:"SSL Opportunities",key:"sslops"},
-						{name:"Challenge of the Week",key:"challengeweek"},
+						{name:"Announcements",key:"announce", img:Images.announcements},
+						{name:"Resources",key:"resources", img:Images.resources},
+						{name:"Student of the Week",key:"studentweek", img:Images.student},
+						{name:"Lunch Events",key:"lunchevent", img:Images.lunch},
+						{name:"SSL Opportunities",key:"sslopps", img:Images.sslopps},
+						{name:"Challenge of the Week",key:"challengeweek", img:Images.challenge},
+						{name:"Settings", key:"settings", img: Images.settings},
 					]}
 					renderItem={({item})=>
+						
 						<TouchableOpacity style={styles.moreitem} onPress={()=>this.props.navigation.navigate(item.key)}>
+							<Image source = {item.img} style = {{height: 40, width: 40, marginRight: 10}}/>
 							<Text style={styles.moretext}>{item.name}</Text>
 						</TouchableOpacity>
 					}
@@ -121,7 +127,7 @@ class More extends React.Component {
 						}}
 					/>
 					<Stack.Screen 
-						name="sslops" 
+						name="sslopps" 
 						component={SSLOps}
 						options={{
 							title:'SSL Opportunities',
@@ -140,6 +146,16 @@ class More extends React.Component {
 							headerBackground: ()=>background
 						}}
 					/>
+					<Stack.Screen 
+						name="settings" 
+						component={Settings}
+						options={{
+							title:'Settings',
+							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
+							headerLeft:null,
+							headerBackground: ()=>background
+						}}
+					/>
 					<Stack.Screen 
 						name="TeacherList" 
 						component={TeacherList}

app/Settings.js

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import {
+  SafeAreaView,
+  StyleSheet,
+  ScrollView,
+  View,
+  Text,
+  StatusBar,
+  Modal,
+  TouchableHighlight,
+  Image,
+} from 'react-native';
+
+import {
+  Header,
+  LearnMoreLinks,
+  Colors,
+  DebugInstructions,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+import styles from './styles/morestyles'
+
+
+class Settings extends React.Component {
+  constructor(props) {
+		super(props)
+		this.state = {
+			data: [],
+			isLoading:true
+		}
+	}
+  
+	render() {
+		return (
+      <View>
+
+      </View>
+		)
+	}
+}
+export default Settings;

app/styles/morestyles.js

@@ -9,13 +9,15 @@ const styles=StyleSheet.create({
 		borderBottomColor:'white',
 		borderBottomWidth:0.5,
 		height: Dimensions.get('window').height*0.075,
-		justifyContent:'center',
 		paddingLeft: '3%',
 		fontSize: 32,
+		display: 'flex', 
+		flexDirection: 'row',
+		alignItems: 'center',
 	},
 	moretext: {
-		color:'#eee',
-		fontSize:20,
+		color:'#e3e3e3',
+		fontSize:22,
 	},
 	headerTitle: {
 		fontWeight: 'bold',