From 5f18866ae34aed6e2bbd95c6d77524b8a6d91c58 Mon Sep 17 00:00:00 2001
From: Emily Liu <emilyliu@Emilys-MBP.fios-router.home>
Date: Sun, 18 Oct 2020 22:53:27 -0400
Subject: [PATCH] added icon to bottom nav bar and small style

---
 app/App.js               | 40 ++++++++++++++++++++++++++++++++++------
 app/styles/liststyles.js |  7 ++++---
 app/styles/morestyles.js | 11 ++++++++---
 3 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/app/App.js b/app/App.js
index 23f7b93..59a4b87 100644
--- a/app/App.js
+++ b/app/App.js
@@ -6,6 +6,7 @@ import {
   View,
   Text,
   StatusBar,
+  Image,
 } from 'react-native';
 
 import {
@@ -27,6 +28,9 @@ import More from './More'
 import Staff from './Staff'
 import OpeningPage from './OpeningPage';
 import OpenPage from './OpenPage';
+import styles from './styles/morestyles';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+
 
 const Tab = createBottomTabNavigator();
 
@@ -38,16 +42,40 @@ class App extends React.Component {
 		super();
 		OpeningPage.load(v => this.setState({loaded: true}));
 	}
+	
 	render() {
 		return (
 			<NavigationContainer >
 				{this.state.loaded ? 
-				<Tab.Navigator tabBarOptions={{
-					activeTintColor: 'red',
-					labelStyle:{
-					fontSize:16
-				}}}>
-					<Tab.Screen name="Home" component={Home} />
+				<Tab.Navigator 
+				screenOptions={({ route }) => ({
+					tabBarIcon: ({ focused, color, size }) => {
+						let iconName;
+			
+						if (route.name === 'Home') {
+							iconName = focused ? 'ios-home' : 'ios-home-outline';
+						} else if (route.name === 'Calendar') {
+							iconName = focused ? 'ios-calendar' : 'ios-calendar-outline';
+						} else if (route.name === 'Polls') {
+							iconName = focused ? 'ios-pie-chart' : 'ios-pie-chart-outline';
+						} else if (route.name === 'Clubs') {
+							iconName = focused ? 'ios-people-circle' : 'ios-people-circle-outline';
+						} else if (route.name === 'Staff') {
+							iconName = focused ? 'ios-nutrition' : 'ios-nutrition-outline';
+						} else if (route.name === 'More') {
+							iconName = focused ? 'ios-ellipsis-horizontal' : 'ios-ellipsis-horizontal-outline';
+						}
+
+						return <Ionicons name={iconName} size={size} color={color} />;
+						},
+					})}
+					tabBarOptions={{
+						activeTintColor: 'red',
+						labelStyle:{
+						fontSize:16
+					}}}
+				>	
+					<Tab.Screen name="Home" component={Home}/>
 					<Tab.Screen name="Calendar" component={Calendar} />
 					<Tab.Screen name="Polls" component={Poll} />
 					<Tab.Screen name="Clubs" component={Clubs} options ={{title: 'Clubs'}}/>
diff --git a/app/styles/liststyles.js b/app/styles/liststyles.js
index f7492e4..ae28dfc 100644
--- a/app/styles/liststyles.js
+++ b/app/styles/liststyles.js
@@ -8,12 +8,13 @@ const styles = StyleSheet.create({
   item: {
     backgroundColor: '#bababa',
     padding: 20,
-    marginVertical: 8,
     marginHorizontal: 16,
-    borderRadius: 16,
+    borderBottomWidth: 1.5,
+    borderColor: 'black',
+    borderRadius: 12,
   },
   title: {
-    fontSize: 32,
+    fontSize: 28,
   },
   date: {
 	  fontSize:12,
diff --git a/app/styles/morestyles.js b/app/styles/morestyles.js
index c910f1d..0fe067c 100644
--- a/app/styles/morestyles.js
+++ b/app/styles/morestyles.js
@@ -7,15 +7,16 @@ const styles=StyleSheet.create({
 		borderBottomColor:'white',
 		borderBottomWidth:0.5,
 		height: Dimensions.get('window').height*0.075,
-		justifyContent:'center'
+		justifyContent:'center',
+		paddingLeft: '3%',
 	},
 	moretext: {
 		color:'#eee',
 		fontSize:20,
 	},
 	headerTitle: {
-		fontWeight:'bold',
-		fontSize:24
+		fontWeight: 'bold',
+		fontSize:24,
 	},
 	resourceContainer: {
 		alignItems: 'center',
@@ -51,6 +52,10 @@ const styles=StyleSheet.create({
 		borderRadius: 5,
 		height: '100%',
 		width: '100%',
+	},
+	tabBarIcon: {
+		height: 50,
+		width: 50,
 	}
 });