EventList: Style fixes

src/App.js

@@ -10,7 +10,6 @@ import {ApolloClient} from 'apollo-client';
 import {HttpLink} from 'apollo-link-http';
 import {InMemoryCache} from 'apollo-cache-inmemory';
 import {ApolloProvider} from "react-apollo";
-import 'isomorphic-fetch';
 
 import Dusken from "./Dusken";
 import duskenApp from "./reducers";

src/modules/events/EventList.js

@@ -21,9 +21,9 @@ export default class EventList extends Component {
     );
 
     _renderSectionHeader = ({section}) => {
-        return (<ListItem style={[styles.listItem, {paddingBottom: 0, borderBottomWidth: 0}]}>
+        return (<ListItem style={styles.sectionHeader}>
             <Body>
-                <Text style={styles.listItemSectionTitle}>{section.title}</Text>
+                <Text style={styles.sectionTitle}>{section.title}</Text>
             </Body>
         </ListItem>);
     };
@@ -72,7 +72,8 @@ export default class EventList extends Component {
             onEndReachedThreshould={10}
             initialNumToRender={10}
             ListFooterComponent={this._renderFooter}
-            style={[styles.list, {paddingRight: 0}]}
+            style={[styles.card, styles.list]}
+            ListHeaderComponent={() => { return <View style={styles.listHeader}/> }}
         />);
     }
 }
@@ -80,6 +81,7 @@ export default class EventList extends Component {
 
 const styles = StyleSheet.create({
     listItem: {
+        backgroundColor: 'white',
         marginLeft: 0
     },
     listItemTitle: {
@@ -89,13 +91,29 @@ const styles = StyleSheet.create({
         fontSize: 14,
         color: '#666'
     },
-    listItemSectionTitle: {
-        fontSize: 14,
+    sectionHeader: {
+        backgroundColor: 'white',
+        marginLeft: 0,
+        marginBottom: -8,
+        paddingBottom: 0,
+        borderBottomWidth: 0,
+    },
+    sectionTitle: {
+        fontSize: 16,
         fontWeight: 'bold',
     },
     loadingText: {
         textAlign: 'center',
         paddingBottom: 8
     },
-    list: theme.card,
+    card: theme.card,
+    list: {
+        padding: 0,
+        marginTop: 0,
+        marginBottom: 0,
+        backgroundColor: 'transparent',
+    },
+    listHeader: {
+        paddingTop: 8,
+    }
 });

src/theme.js

@@ -1,8 +1,8 @@
 import { Platform } from "react-native";
 
+const colors = {};
+
 const card = {
-    borderColor: '#e1e8ee',
-    borderWidth: 1,
     ...Platform.select({
         ios: {
             shadowColor: 'rgba(0,0,0, .2)',
@@ -18,4 +18,4 @@ const card = {
     margin: 8,
     backgroundColor: '#fff',
 };
-export default {card};
+export default {card, colors};