announcements pg ui + small changes

app/Announcements.js

@@ -22,49 +22,120 @@ import styles from './styles/liststyles'
 import { url } from './resources/fetchInfo.json'
 import { SearchBar } from 'react-native-elements';
 import Icon from 'react-native-vector-icons/AntDesign'
-import AsyncStorage from '@react-native-community/async-storage'
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import LinearGradient from 'react-native-linear-gradient';
 
 const STORAGE_KEY = "teacherAnnouncements"
 
+const getCurrentDate=()=>{
+	var date = new Date().getDate();
+	var month = new Date().getMonth() + 1;
+	var year = new Date().getFullYear();
+
+	return new Date(year, month, date);
+}
+
 const Announcement = ({item}) => {
 	const date = new Date
 	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.item1}>
-			<View style = {{display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
+		<View style={{borderWidth: 1, borderColor: '#323232', padding: '2%', marginHorizontal: '2%', marginBottom: '2%', borderRadius: 12}}>
+			<View style = {{display: 'flex', flexDirection: 'column', justifyContent: 'space-between'}}>
+				{dateInfo!==undefined?<Text style={{fontSize: 12, fontWeight: '200'}}>{dateInfo}</Text>:<></>}
 				<View style = {{width: '75%'}}>
-					<Text style={styles.title3}>{item.item.message}</Text>
+					<Text style={styles.title}>{item.item.message}</Text>
 				</View>
-				<View style = {{display: 'flex', flexDirection: 'row'}}>
-					{dateInfo!==undefined?<Text style={{fontSize: 16, alignSelf: 'center'}}>{dateInfo}</Text>:<></>}
-				</View>
-			</View>
 				
+			</View>
 		</View>
 	)
 }
 
 export const TeacherList = ({route}) => {
+	const todayDate = getCurrentDate()
+	const weekPastDate = new Date();
+	var pastDate = weekPastDate.getDate() - 7;
+	weekPastDate.setDate(pastDate);
+	const weekFutureDate = new Date();
+	var futureDate = weekFutureDate.getDate() + 7;
+	weekFutureDate.setDate(futureDate);
+	const today = []
+	const past = []
+	const future = []
+	var todayBoolean = true
+	var pastBoolean = true
+	var futureBoolean = true
+	
+	for (var i = 0; i < route.params.data.length; i++) {
+		const itemDate = new Date(route.params.data[i].date)
+		if (itemDate == todayDate) {
+			today.push(route.params.data[i])
+		}
+		else if (itemDate > todayDate && itemDate <= weekFutureDate) {
+			future.push(route.params.data[i])
+		}
+		else if (itemDate >= weekPastDate && itemDate < todayDate) {
+		//else if (itemDate < todayDate) {
+			past.push(route.params.data[i])
+		}
+	}
+	if (today.length === 0) todayBoolean = false
+	if (past.length === 0) pastBoolean = false
+	if (future.length === 0) futureBoolean = false
+	var noAnn = (todayBoolean||pastBoolean||futureBoolean)
+
 	return (
-		<View style={{}}>
-			<FlatList
-				data={route.params.data}
-				renderItem={item=><Announcement item={item}/>}
-				keyExtractor={item=>JSON.stringify(item)}
-			/>
-		</View>
+		<ScrollView style={{flex:1, backgroundColor: 'white'}}>
+			{todayBoolean?<View>
+				<LinearGradient start={{x: 0.25, y: .5}} end={{x: 1, y: 1}} colors={['#FF8484', '#FF1111']} style={{backgroundColor: 'red', width: '20%', padding: '2%', borderTopRightRadius: 20, borderBottomRightRadius: 20, marginVertical: '2%'}}>
+					<Text style={[styles.title, {color: 'white', fontWeight: 'bold'}]}>Today</Text>
+				</LinearGradient>
+				<FlatList
+					data={today}
+					renderItem={item=><Announcement item={item}/>} 
+					keyExtractor={item=>JSON.stringify(item)}
+				/>
+			</View>: <></>}
+			{pastBoolean?<View>
+				<LinearGradient start={{x: 0.25, y: .5}} end={{x: 1, y: 1}} colors={['#FF8484', '#FF1111']} style={{backgroundColor: 'red', width: '20%', padding: '2%', borderTopRightRadius: 20, borderBottomRightRadius: 20, marginVertical: '2%'}}>
+					<Text style={[styles.title, {color: 'white', fontWeight: 'bold'}]}>Past</Text>
+				</LinearGradient>
+				<FlatList
+					data={past}
+					renderItem={item=><Announcement item={item}/>} 
+					keyExtractor={item=>JSON.stringify(item)}
+				/>
+			</View>:<></>}
+			{futureBoolean?<View>
+				<LinearGradient start={{x: 0.25, y: .5}} end={{x: 1, y: 1}} colors={['#FF8484', '#FF1111']} style={{backgroundColor: 'red', width: '20%', padding: '2%', borderTopRightRadius: 20, borderBottomRightRadius: 20, marginVertical: '2%'}}>
+					<Text style={[styles.title, {color: 'white', fontWeight: 'bold'}]}>Future</Text>
+				</LinearGradient>
+				<FlatList
+					data={future}
+					renderItem={item=><Announcement item={item}/>} 
+					keyExtractor={item=>JSON.stringify(item)}
+				/>
+			</View>:<></>}
+			{!noAnn?<Text style={{textAlign: 'center', fontSize: 20, paddingTop: '2%'}}>No Announcements</Text>:<></>}
+		</ScrollView>
 	)
 }
 
 function TeacherButton(props) {
 	const [color, setColor] = useState(props.color?props.color:'lightgrey')
 	return (
-		<View style={[styles.item1,{flexDirection:'row'}]}>
-		  <TouchableOpacity style={{flex:1, justifyContent: 'center'}} onPress={()=>{props.navigation.navigate('TeacherList',{data:props.data,name:props.name})}} activeOpacity={0.8}>
-			<Text style={styles.title3}>{props.name}</Text>
+		<View>
+			<TouchableOpacity style={styles.listItem} onPress={()=>{props.navigation.navigate('TeacherList',{data:props.data,name:props.name})}} activeOpacity={0.8}>
+				<View style={styles.container2}>
+					<Ionicons name="megaphone-outline" size={36} color={'#323232'}style={{marginRight: 15}}/>
+					<View style={styles.accordian}>
+						<Text style={[styles.title, {alignSelf:'center'}]}>{props.name}</Text>
+						{props.icon?<Icon name="pushpino" size={24} color={color} onPress={()=>{setColor(color=='red'?'lightgrey':'red');props.addFavorite(props.name)}}/>:<></>}
+					</View>
+				</View>
 		  </TouchableOpacity>
-		  {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>
 	)
 }
@@ -124,14 +195,14 @@ class Announcements extends React.Component {
 	
 	render() {
 		return (
-			<View style={[styles.container]}>
+			<ScrollView style={styles.moreDefault}>
 				<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?'#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}/>}
+					renderItem={({item})=><TeacherButton color={this.state.favoriteNames.indexOf(item) >= 0?'red':'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>
+			</ScrollView>
 		)
 	}
 }

app/ChallengeWeek.js

@@ -101,8 +101,11 @@ class ChallengeWeek extends React.Component {
 			return <View/>
 		} else {
 			return (
-				<View style={{alignItems:'center',paddingiorizontal:'10%', height: '100%', backgroundColor: 'white', justifyContent: 'center'}}>
-					<TouchableOpacity onPress={()=>this.flipCard()} style={{height: '70%', width: '80%', borderRadius: 20, shadowColor: 'red', shadowOffset: {width: 0, height: 2}, shadowOpacity: 0.5, shadowRadius: 7, alignSelf: 'center'}}>
+				<View style={{alignItems:'center',paddingiorizontal:'10%', height: '100%', backgroundColor: 'white', justifyContent: 'center', padding: '2%'}}>
+					<Text style={{fontSize: 32, fontWeight: 'bold', marginBottom: '10%', color: 'red', textAlign: 'center'}}>{this.state.data.title}</Text>
+					<Text style={{textAlign:'center', fontSize: 24, marginBottom: '5%', textAlign: 'center', fontWeight: '200'}}>{this.state.data.text}</Text>
+					<Text style={{textAlign:'center', fontSize: 20, textDecorationLine: 'underline', textDecorationStyle: "solid", textDecorationColor: "#000"}} onPress={() => Linking.openURL(this.state.data.link)}>Link</Text>
+					{/*<TouchableOpacity onPress={()=>this.flipCard()} style={{height: '70%', width: '80%', borderRadius: 20, shadowColor: 'red', shadowOffset: {width: 0, height: 2}, shadowOpacity: 0.5, shadowRadius: 7, alignSelf: 'center'}}>
 						<Animated.View style={{backfaceVisibility: 'hidden'}, frontAnimatedStyle}>
 							<View style={styling}>
 								<View>{this.state.flip?<Text style={{textAlign: 'center', fontSize: 28}}>{this.state.data.title}</Text>:<></>}</View>
@@ -117,8 +120,7 @@ class ChallengeWeek extends React.Component {
 							</View>
 							
 						</Animated.View>
-					</TouchableOpacity>
-					
+					</TouchableOpacity>*/}
 				</View>
 			)
 		}

app/Images.js

@@ -21,6 +21,10 @@ import {
 import styles from './styles/morestyles'
 
 const Images = {
+}
+
+export default Images;
+/*const Images = {
     sslopps: require('./assets/sslopps.png'),
     lunch: require('./assets/lunch.png'),
     settings:require('./assets/settings.png'),
@@ -31,6 +35,4 @@ const Images = {
     polls:require('./assets/polls.png'),
     notifs:require('./assets/notifs.png'),
     lang:require('./assets/lang.png'),
-}
-
-export default Images;
+}*/

app/LunchEvents.js

@@ -24,6 +24,7 @@ import { createStackNavigator } from '@react-navigation/stack'
 import styles from './styles/liststyles'
 import { url } from './resources/fetchInfo.json'
 import LinearGradient from 'react-native-linear-gradient';
+import Ionicons from 'react-native-vector-icons/Ionicons';
 const Stack = createStackNavigator();
 
 export const LunchInfo = ({route}) => {
@@ -57,7 +58,7 @@ function LunchEvent (props) {
         <View>
             <TouchableOpacity style={styles.listItem} onPress={()=>setExpand(!expand)}>
                 <View style={styles.container2}>
-                    <Image source = {require('./assets/lunch.png')} style = {styles.sideImage}/>
+                    <Ionicons name="fast-food-outline" size={36} color={'#323232'} style={{marginRight: 15}} />
                     <View style = {styles.accordian}>
                         <Text style={styles.title}>{item.title}</Text>
                         {expand?<LinearGradient start={{x: 0, y: 0.25}} end={{x: .5, y: 1}} colors={['red', '#FF7373']} style={{borderRadius: 24, alignSelf: 'center'}}><Image source = {require('./assets/collapse.png')} style={{tintColor: 'white'}}/></LinearGradient>:<Image source = {require('./assets/expand.png')} style={{tintColor: '#b2b2b2', alignSelf: 'center'}}/>}

app/More.js

@@ -34,6 +34,7 @@ import Settings from './Settings'
 import Poll from './Poll'
 import Images from './Images'
 import LinearGradient from 'react-native-linear-gradient'
+import Ionicons from 'react-native-vector-icons/Ionicons';
 //import I18n from './i18n';
 
 const Stack = createStackNavigator()
@@ -49,19 +50,19 @@ class MoreSwitch extends React.Component {
 			<View style={{flex:1,backgroundColor:'white', paddingHorizontal: '5%'}}>
 				<FlatList
 					data={[
-						{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:"Polls", key:"polls", img: Images.polls},
-						{name:"Settings", key:"settings", img: Images.settings},
+						{name:'Announcements',key:"announce", img:"megaphone-outline"},
+						{name:"Resources",key:"resources", img:"newspaper-outline"},
+						{name:"Student of the Week",key:"studentweek", img:"ribbon-outline"},
+						{name:"Lunch Events",key:"lunchevent", img:"fast-food-outline"},
+						{name:"SSL Opportunities",key:"sslopps", img:"school-outline"},
+						{name:"Challenge of the Week",key:"challengeweek", img:"golf-outline"},
+						{name:"Polls", key:"polls", img: "stats-chart-outline"},
+						{name:"Settings", key:"settings", img: "settings-outline"},
 					]}
 					renderItem={({item})=>
 						
 						<TouchableOpacity style={styles.moreitem} onPress={()=>this.props.navigation.navigate(item.key)}>
-							<Image source = {item.img} style = {{height: 40, width: 40, marginRight: 10, tintColor: '#323232'}}/>
+							<Ionicons name={item.img} size={36} color={'#323232'}style={{marginRight: 15}}/>
 							<View style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', width: '85%'}}>
 								<Text style={styles.moretext}>{item.name}</Text>
 								<Image source = {require('./assets/forward.png')} style={{tintColor: '#b2b2b2'}}/>

app/Resources.js

@@ -30,7 +30,7 @@ function ResourceLink(props) {
         <View style={{aspectRatio: 1}}>
           <Image source={props.img} style={{width: '100%', height: '100%', borderRadius: 30}}/>
         </View>
-        <Text style={{fontColor: 'black', alignSelf: 'center', marginTop: '2%', fontSize: 16}}>{props.name}</Text>
+        <Text style={{fontColor: 'black', alignSelf: 'center', textAlign: 'center', marginTop: '2%', fontSize: 16}}>{props.name}</Text>
       </View>
     </TouchableOpacity>
 	)

app/SSLOps.js

@@ -24,6 +24,7 @@ import { createStackNavigator } from '@react-navigation/stack'
 import styles from './styles/liststyles';
 import { url } from './resources/fetchInfo.json';
 import LinearGradient from 'react-native-linear-gradient';
+import Ionicons from 'react-native-vector-icons/Ionicons';
 //import I18n from './i18n';
 
 const Stack = createStackNavigator();
@@ -68,7 +69,7 @@ function SSLElement (props) {
 		<View>
 			<TouchableOpacity style={styles.listItem} onPress={()=>setExpand(!expand)}>
 				<View style = {styles.container2}>
-					<Image source = {require('./assets/sslopps.png')} style = {styles.sideImage}/>
+					<Ionicons name="school-outline" size={36} color={'#323232'} style={{marginRight: 15}} />
 					<View style = {styles.accordian}>
                         <Text style={styles.title}>{item.item.title}</Text>
                         {expand?<LinearGradient start={{x: 0, y: 0.25}} end={{x: .5, y: 1}} colors={['red', '#FF7373']} style={{borderRadius: 24, alignSelf: 'center'}}><Image source = {require('./assets/collapse.png')} style={{tintColor: 'white'}}/></LinearGradient>:<Image source = {require('./assets/expand.png')} style={{tintColor: '#b2b2b2', alignSelf: 'center'}}/>}

app/styles/morestyles.js

@@ -21,6 +21,7 @@ const styles=StyleSheet.create({
 	headerTitle: {
 		fontWeight: 'bold',
 		fontSize:24,
+		alignSelf: 'center'
 	},
 	resourceContainer: {
 		alignItems: 'center',