improved calendar pg

app/Calendar.js

@@ -7,23 +7,33 @@ import {
   Text,
   StatusBar,
   FlatList,
-  TouchableOpacity
+  TouchableOpacity,
+  Image,
 } from 'react-native';
 
 import {	 
-  Header,
-  LearnMoreLinks,
-  Colors,
-  DebugInstructions,
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
 
+import LinearGradient from 'react-native-linear-gradient';
+
 import styles from './styles/liststyles'
 import { url } from './resources/fetchInfo.json'
 
+const getCurrentDate=()=>{
+  var date = new Date().getDate();
+  var month = new Date().getMonth() + 1;
+  var year = new Date().getFullYear();
+
+  return year + '-' + month + '-' + date;
+}
+
 const Event = ({item}) => {
 	const [visible, setVisible] = useState(false)
   const date = item.item.date.split('-')
+  const today = new Date(getCurrentDate())
+  const itemDate = new Date(item.item.date)
+
 	const extra = (
 		<>
 			<Text style={{fontSize:20}}>{item.item.text}</Text>
@@ -31,13 +41,30 @@ const Event = ({item}) => {
       <Text style={{fontSize:20}}>Date: {`${date[1]}/${date[2]}/${date[0]}`}</Text>
 		</>
   )
+  if (itemDate >= today) {
     return (
       <TouchableOpacity style={styles.item1} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
-			<Text style={styles.title}>{item.item.title}</Text>
+        <View style = {{display: 'flex', flexDirection: 'row'}}>
+          <Image source ={require('./assets/calendar.png')}  style = {{height: 40, width: 40, marginRight: 15}}/>
+          <Text style={styles.title3}>{item.item.title}</Text>
+        </View>
         {visible?extra:<></>}
 		  </TouchableOpacity>
     )
   }
+  else {
+    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'}}>
+        <Image source ={require('./assets/calendar.png')}  style = {{height: 40, width: 40, marginRight: 15}}/>
+        <Text style={styles.title3}>{item.item.title}</Text>
+      </View>
+			{visible?extra:<></>}
+		</TouchableOpacity>
+	  )
+  }
+  
+}
 
 class Calendar extends React.Component {
 
@@ -76,7 +103,16 @@ class Calendar extends React.Component {
 
 	render() {
 		return (
-			<View style={styles.container}>
+			<View>
+        <View style = {{height: 90, display: 'flex'}}>
+          <LinearGradient
+            colors={['#f99', 'white']}
+            style = {{height: '100%', borderBottomColor:'black', borderBottomWidth:0.5, display: 'flex', justifyContent: 'flex-end', paddingBottom: '2.5%'}}
+          >
+            <Text style = {{fontSize: 24, fontWeight: 'bold', alignSelf: 'center'}}>Calendar</Text>
+          </LinearGradient>
+         
+        </View>
 				<FlatList
 					data={this.state.data}
 					renderItem={item=><Event item={item}/>}

app/Resources.js

@@ -34,7 +34,7 @@ function ResourceLink(props) {
 class Resources extends React.Component {
 	render() {
 		return (
-			<ScrollView>
+			<ScrollView style = {{backgroundColor: 'white'}}>
 				<ResourceLink url='https://classroom.mcpsmd.org/' img={require('./assets/canvaslogo.png')} name='MyMCPS Classroom'/>
 				<ResourceLink url='https://md-mcps-psv.edupoint.com/Home_PXP2.aspx' img={require('./assets/studentvue.jpg')} name='StudentVUE'/>
 				<ResourceLink url='https://mbhs.edu/newsevents/Announcements/Montgomery%20Blair%20High%20School%20Final%20Bell%20Schedule%20.pdf' img={require('./assets/schedule.jpg')} name='1st Semester Schedule'/>