Add latest build details to element

app/components/projects/ProjectItem.js

@@ -15,20 +15,28 @@ const styles = StyleSheet.create({
     alignItems: 'stretch',
     backgroundColor: GlobalStyles.get('CIRCLE_ITEM_BG'),
     borderBottomColor: GlobalStyles.get('CIRCLE_ITEM_BORDER'),
-    borderBottomWidth: 1,
-    marginBottom: 5,
-    flexDirection: 'row'
+    borderBottomWidth: 2,
+    marginVertical: 2.5,
+    flexDirection: 'row',
   },
-  cell: {
+  repoCell: {
     paddingHorizontal: 4,
-    paddingVertical: 2
+    paddingVertical: 3,
+    flex: 0.74
   },
-  imageCell: {
-    width: 45,
+  buildCell: {
+    flex: 0.35
+  },
+  colourPanel: {
+    flex: 0.02
   },
   repoName: {
-    fontSize: 14,
+    fontSize: 15,
     fontWeight: '500'
+  },
+  details: {
+    fontSize: 13,
+    fontWeight: '300'
   }
 });
 
@@ -51,9 +59,14 @@ export default class ProjectItem extends React.Component {
     let seconds = Math.floor(mostRecentBuild.build_time_millis / 1000);
     const minutes = Math.floor(seconds / 60);
     seconds = seconds - (minutes * 60);
-    const format = minutes + ':' + seconds;
+    const buildTime = minutes + ':' + seconds;
+    const commit = mostRecentBuild.all_commit_details[0];
     return (
-      <Text>{ format }</Text>
+      <View>
+        <Text style={styles.details} >T: { buildTime }</Text>
+        <Text style={styles.details} >B: { commit.branch }</Text>
+        <Text style={styles.details} >#{ mostRecentBuild.build_num }</Text>
+      </View>
     );
   }
 
@@ -64,20 +77,19 @@ export default class ProjectItem extends React.Component {
     const statusColour = mostRecentBuild.failed ? '#ED5C5C' : '#42C88A';
     let username;
     if (this.props.userDetails && this.props.userDetails.login !== project.username) {
-      username = project.username;
-    } else {
-      username = 'me';
+      username = project.username + '/';
     }
     const buildDetails = mostRecentBuild ? this._displayMoreInfo(mostRecentBuild) : null;
 
     return (
       <View style={styles.container}>
-        <View style={[styles.imageCell, {backgroundColor: statusColour}]}>
+        <View style={styles.repoCell}>
+          <Text style={styles.repoName}>{username}{project.reponame}</Text>
         </View>
-        <View style={styles.cell}>
-          <Text style={styles.repoName}>{username}/{project.reponame}</Text>
+        <View style={styles.buildCell}>
           { buildDetails }
         </View>
+        <View style={[styles.colourPanel, {backgroundColor: statusColour}]} />
       </View>
     );
   }