Fix issue where registration indicator overlaps with text in Welcome screen cards

app/ui/screens/welcome/EventDetailCard.js

@@ -13,20 +13,20 @@ import { retrievePizzaInfo } from '../../../actions/pizza';
 import styles from './style/EventDetailCard';
 import Colors from '../../style/Colors';
 
-const getInfo = (event) => {
+const getInfo = (event, hasRegistrationIndicator) => {
   const start = Moment(event.start);
   const end = Moment(event.end);
 
   if (start.isSame(end, 'day')) {
     return (
-      <Text style={styles.eventInfo}>
+      <Text style={[styles.eventInfo, hasRegistrationIndicator && styles.indicatorMargin]}>
         {`${start.format('HH:mm')} - ${end.format('HH:mm')} | ${event.location}`}
       </Text>
     );
   }
   return (
     <View>
-      <Text style={styles.eventInfo}>
+      <Text style={[styles.eventInfo, hasRegistrationIndicator && styles.indicatorMargin]}>
         {`${start.format('D MMMM HH:mm')} - ${end.format('D MMMM HH:mm')}`}
       </Text>
       <Text style={styles.eventInfo}>
@@ -36,49 +36,52 @@ const getInfo = (event) => {
   );
 };
 
-const EventDetailCard = props => (
-  <TouchableHighlight
-    onPress={() => props.loadEvent(props.event.pk, props.token)}
-    style={styles.card}
-    underlayColor={Colors.pressedWhite}
-  >
-    <View>
-      <Text style={styles.eventTitle}>
-        {props.event.title}
-      </Text>
-      {getInfo(props.event)}
-      <Text
-        numberOfLines={2}
-        style={styles.description}
-      >
-        {props.event.description}
-      </Text>
-      <View style={styles.buttonList}>
-        <Text style={[styles.moreInfo, styles.button]}>
-          {props.t('MORE INFO')}
+const EventDetailCard = (props) => {
+  const hasRegistrationIndicator = props.event.registered !== null;
+
+  return (
+    <TouchableHighlight
+      onPress={() => props.loadEvent(props.event.pk, props.token)}
+      style={styles.card}
+      underlayColor={Colors.pressedWhite}
+    >
+      <View>
+        <Text style={[styles.eventTitle, hasRegistrationIndicator && styles.indicatorMargin]}>
+          {props.event.title}
+        </Text>
+        {getInfo(props.event, hasRegistrationIndicator)}
+        <Text
+          numberOfLines={2}
+          style={styles.description}
+        >
+          {props.event.description}
         </Text>
-        {props.event.pizza ? (
-          <TouchableOpacity
-            onPress={() => props.retrievePizzaInfo(props.token)}
-            style={styles.button}
-          >
-            <Text style={styles.orderPizza}>
-              {props.t('PIZZA')}
-            </Text>
-          </TouchableOpacity>
-        ) : null}
+        <View style={styles.buttonList}>
+          <Text style={[styles.moreInfo, styles.button]}>
+            {props.t('MORE INFO')}
+          </Text>
+          {props.event.pizza ? (
+            <TouchableOpacity
+              onPress={() => props.retrievePizzaInfo(props.token)}
+              style={styles.button}
+            >
+              <Text style={styles.orderPizza}>
+                {props.t('PIZZA')}
+              </Text>
+            </TouchableOpacity>
+          ) : null}
+        </View>
+        {hasRegistrationIndicator && (
+          <View
+            style={[
+              styles.indicator,
+              props.event.registered ? styles.registered : styles.unregistered]}
+          />
+        )}
       </View>
-      {props.event.registered === null ? null : (
-        <View
-          style={[
-            styles.indicator,
-            props.event.registered ? styles.registered : styles.unregistered]}
-        />
-      )
-      }
-    </View>
-  </TouchableHighlight>
-);
+    </TouchableHighlight>
+  );
+};
 
 EventDetailCard.propTypes = {
   event: PropTypes.shape({

app/ui/screens/welcome/style/EventDetailCard.js

@@ -99,6 +99,9 @@ const styles = StyleSheet.create({
     width: 16,
     borderRadius: 8,
   },
+  indicatorMargin: {
+    marginRight: 32,
+  },
   registered: {
     backgroundColor: Colors.magenta,
   },