From d1e8478544dfd769f36989691c5b6bf5d8a02f53 Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Fri, 7 Oct 2016 21:11:38 +0100
Subject: [PATCH] styling stuff is hard!

---
 src/components/ResultItem.tsx | 33 +++++++++++++++++++++++++++++----
 src/components/Results.tsx    |  2 +-
 src/data/results.ts           |  1 +
 src/views/main.tsx            |  7 -------
 4 files changed, 31 insertions(+), 12 deletions(-)
 create mode 100644 src/data/results.ts

diff --git a/src/components/ResultItem.tsx b/src/components/ResultItem.tsx
index 3212b7d..b058ceb 100644
--- a/src/components/ResultItem.tsx
+++ b/src/components/ResultItem.tsx
@@ -7,12 +7,28 @@ import {
 } from 'react-native';
 import _ from 'underscore';
 
+const RESULTS_DATA = require('../data/results');
+
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center'
+    flexDirection: 'row',
   } as React.ViewStyle,
+  mainText: {
+    fontSize: 16,
+    marginBottom: 3,
+  } as React.TextStyle,
+  description: {
+    fontSize: 13,
+    color: '#888'
+  } as React.TextStyle,
+  column: {
+  } as React.ViewStyle,
+  rightColumn: {
+    flex: 1,
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'flex-end'
+  } as React.ViewStyle
 });
 
 interface Props {
@@ -20,8 +36,17 @@ interface Props {
 }
 
 
+
 export default function Result(props: Props) {
   return (
-    <Text>{props.data.key}: {JSON.stringify(props.data.value)}</Text>
+    <View style={styles.container}>
+      <View style={[styles.column]}>
+        <Text style={styles.mainText}>{props.data.key}: {}</Text>
+        <Text style={styles.description}>Something else</Text>
+      </View>
+      <View style={[styles.column, styles.rightColumn]}>
+        <Text>foobar</Text>
+      </View>
+    </View>
   );
 }
diff --git a/src/components/Results.tsx b/src/components/Results.tsx
index 20339f9..5d88cb7 100644
--- a/src/components/Results.tsx
+++ b/src/components/Results.tsx
@@ -19,11 +19,11 @@ const styles = StyleSheet.create({
     flex: 1
   } as React.ViewStyle,
   listItem: {
+    flex: 1,
     borderBottomWidth: 1,
     borderBottomColor: '#333',
     paddingTop: 5,
     paddingBottom: 8,
-    paddingHorizontal: 16
   } as React.ViewStyle
 });
 
diff --git a/src/data/results.ts b/src/data/results.ts
new file mode 100644
index 0000000..ff8b4c5
--- /dev/null
+++ b/src/data/results.ts
@@ -0,0 +1 @@
+export default {};
diff --git a/src/views/main.tsx b/src/views/main.tsx
index 3cf2540..e49f431 100644
--- a/src/views/main.tsx
+++ b/src/views/main.tsx
@@ -11,16 +11,9 @@ import BlankResults from '../components/BlankResults';
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: 'stretch',
     justifyContent: 'center',
     backgroundColor: '#FFF',
   } as React.ViewStyle,
-
-  text: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  } as React.TextStyle
 });