Sponsors screen improvements

src/Navigation.js

@@ -177,8 +177,8 @@ const PrimaryTabNavigator = createBottomTabNavigator(
 
         // You can return any component that you like here! We usually use an
         // icon component from react-native-vector-icons
-        return <Ionicons name={iconName} size={32} color={tintColor} />;
-      },
+        return <Ionicons name={iconName} size={28} color={tintColor} />;
+      }
     }),
     tabBarOptions: {
       style: {backgroundColor: '#333'},

src/components/NavigationBar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Animated, Platform, View, StyleSheet} from 'react-native';
 import {Constants} from 'expo';
-import {Colors, Layout} from '../constants';
+import {Colors, Layout, FontSizes} from '../constants';
 
 export default class NavigationBar extends React.Component {
   render() {
@@ -101,4 +101,8 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     position: 'absolute',
   },
+  navigationBarTitle: {
+    color: Colors.faint,
+    fontSize: FontSizes.title
+  }
 });

src/components/TalkCard.js

@@ -27,6 +27,16 @@ export default class TalkCard extends React.Component {
         onPress={this._handlePress}
         style={[styles.button, this.props.style]}
         activeOpacity={0.05}>
+
+        <View style={styles.talkInfoRow}>
+          <SemiBoldText style={styles.talkTitle}>
+            <SaveIconWhenSaved talk={talk} />
+            {talk.title}
+          </SemiBoldText>
+          {conferenceHasEnded() || !talk.room ? null : (
+            <RegularText style={styles.talkLocation}>{talk.room}</RegularText>
+          )}
+        </View>
         {speakers.map(speaker => (
           <View style={styles.headerRow} key={speaker.id}>
             <View style={styles.headerRowAvatarContainer}>
@@ -49,15 +59,6 @@ export default class TalkCard extends React.Component {
             </View>
           </View>
         ))}
-        <View style={styles.talkInfoRow}>
-          <RegularText style={styles.talkTitle}>
-            <SaveIconWhenSaved talk={talk} />
-            {talk.title}
-          </RegularText>
-          {conferenceHasEnded() || !talk.room ? null : (
-            <RegularText style={styles.talkLocation}>{talk.room}</RegularText>
-          )}
-        </View>
       </RectButton>
     );
   }
@@ -78,6 +79,7 @@ export default class TalkCard extends React.Component {
 const styles = StyleSheet.create({
   headerRow: {
     flexDirection: 'row',
+    marginBottom: 8
   },
   headerRowAvatarContainer: {
     paddingRight: 10,
@@ -96,7 +98,7 @@ const styles = StyleSheet.create({
     fontSize: FontSizes.bodyLarge,
   },
   talkInfoRow: {
-    paddingTop: 10,
+    paddingBottom: 8,
   },
   talkTitle: {
     fontSize: FontSizes.bodyLarge,
@@ -118,14 +120,14 @@ const styles = StyleSheet.create({
         borderRadius: 5,
         backgroundColor: '#fff',
         shadowColor: '#000',
-        shadowOpacity: 0.1,
+        shadowOpacity: 1,
         shadowRadius: 4,
-        shadowOffset: {width: 2, height: 2},
+        shadowOffset: {width: 8, height: 8},
       },
       android: {
         backgroundColor: '#fff',
         elevation: 2,
       },
-    }),
+    })
   },
 });

src/components/TalksUpNext.js

@@ -63,7 +63,7 @@ export default class TalksUpNext extends React.Component {
     const {nextTalks} = this.state;
 
     return (
-      <View style={[{marginHorizontal: 10}, this.props.style]}>
+      <View style={[{marginHorizontal: 10 }, this.props.style]}>
         <View style={{flexDirection: 'row'}}>
           <SemiBoldText style={{fontSize: FontSizes.title}}>
             {conferenceHasEnded() ? 'A great talk from 2019' : 'Coming up next'}

src/screens/Details.js

@@ -51,8 +51,8 @@ export default class Details extends React.Component {
 
   componentDidMount() {
     if (Platform.OS === 'ios') {
-      this._listener = this.state.scrollY.addListener(({ value }) => {
-        if (value < - 150) {
+      this._listener = this.state.scrollY.addListener(({value}) => {
+        if (value < -150) {
           Haptic.impact(Haptic.ImpactFeedbackStyle.Medium);
           this.props.navigation.goBack();
           if (this._listener) {
@@ -251,7 +251,7 @@ export default class Details extends React.Component {
                 </SemiBoldText>
 
                 {speakers.map(speaker => (
-                  <View key={speaker.id}>
+                  <View key={speaker.id} style={styles.sectionContent}>
                     <SemiBoldText key={speaker.id + talk.title}>
                       {speaker.name}
                     </SemiBoldText>
@@ -263,10 +263,12 @@ export default class Details extends React.Component {
             {talk ? (
               <View>
                 <SemiBoldText style={styles.sectionHeader}>Time</SemiBoldText>
-                <RegularText>
-                  {convertUtcDateToEventTimezoneHour(talk.startDate)}
-                </RegularText>
-                <RegularText>{talk.room}</RegularText>
+                <View style={styles.sectionContent}>
+                  <RegularText>
+                    {convertUtcDateToEventTimezoneHour(talk.startDate)}
+                  </RegularText>
+                  <RegularText>{talk.room}</RegularText>
+                </View>
               </View>
             ) : null}
           </AnimatableView>
@@ -402,9 +404,13 @@ const styles = StyleSheet.create({
     marginTop: 10,
   },
   sectionHeader: {
-    fontSize: FontSizes.bodyTitle,
-    marginTop: 15,
-    marginBottom: 3,
+    fontSize: FontSizes.subtitle,
+    paddingTop: 15,
+    marginBottom: 4,
+    color: Colors.blue
+  },
+  sectionContent: {
+    marginTop: 8
   },
   videoWrapper: {},
 });

src/screens/Home.js

@@ -8,6 +8,7 @@ import {
   StyleSheet,
   AsyncStorage,
   View,
+  Text,
 } from 'react-native';
 import {WebBrowser, Notifications} from 'expo';
 import {RectButton} from 'react-native-gesture-handler';
@@ -96,7 +97,7 @@ class Home extends React.Component {
                   Thank you for joining us!
                 </SemiBoldText>
                 <SemiBoldText style={[styles.headerTextSmall, {color: '#fff'}]}>
-                  See you in May, 2019!
+                  See you in May, 2020!
                 </SemiBoldText>
               </ShowWhenConferenceHasEnded>
 

src/screens/Sponsors.js

@@ -9,6 +9,7 @@ import MenuButton from '../components/MenuButton';
 import {SemiBoldText, RegularText} from '../components/StyledText';
 import LoadingPlaceholder from '../components/LoadingPlaceholder';
 import CachedImage from '../components/CachedImage';
+import {Capitalize} from '../utils';
 
 const ClipBorderRadius = ({children, style}) => {
   return (
@@ -96,16 +97,19 @@ export default class Sponsors extends React.Component {
     super(props);
 
     const event = this.props.screenProps.event;
-    const SponsorsData = event.sponsors;
-
-    this.SponsorsByLevel = [
-      {title: 'Diamond', data: SponsorsData['diamond']},
-      {title: 'Platinum', data: SponsorsData['platinum']},
-      {title: 'Gold', data: SponsorsData['gold']},
-      {title: 'Partners', data: SponsorsData['partner']},
-    ];
+    this.SponsorsByLevel = this._getSponsors(event.sponsors);
   }
 
+  _getSponsors = rawData => {
+    delete rawData.__typename;
+    return Object.keys(rawData).filter(
+      key => rawData[key].length > 0
+    ).map(key => ({
+      title: Capitalize(key),
+      data: rawData[key],
+    }));
+  };
+
   render() {
     return (
       <LoadingPlaceholder>

src/utils/index.js

@@ -68,6 +68,10 @@ export function ShowWhenConferenceHasEnded({children}) {
   }
 }
 
+export function Capitalize(string) {
+  return `${string.charAt(0).toUpperCase()}${string.slice(1)}`;
+}
+
 export const sendEmail = (
   emailTo,
   fromName = {firstName: '', lastName: ''}