Add styles to RoundInfo

axelclark · Dec 17, 2018 · 06498ca · 06498ca
1 parent 997e125
commit 06498ca
Showing 1 changed file with 22 additions and 12 deletions.
diff --git a/components/RoundInfo.js b/components/RoundInfo.js
@@ -8,35 +8,45 @@ import {
 const RoundInfo = ({ round }) => {
   return (
     <View style={styles.roundContainer}>
-      <View style={styles.textContainer}>
-        <Text style={styles.nameText}>
+        <Text style={[styles.text, styles.nameText]}>
           {round.course.name}
         </Text>
-      </View>
       <View style={styles.textContainer}>
-        <Text>
-          {round.startedOn}
-        </Text>
-      </View>
-      <View style={styles.textContainer}>
-        <Text>
+        <Text style={styles.text}>
           Score: {round.totalScore}
         </Text>
+        <Text style={styles.text}>
+          {round.startedOn}
+        </Text>
       </View>
     </View>
   )
 }
 
 const styles = StyleSheet.create({
   nameText: {
-    fontSize: 18,
+    fontSize: 36,
+    textAlign: 'center',
+    marginLeft: 0,
+    marginTop: 8,
+    flex: 2,
   },
   roundContainer: {
-    minHeight: 100,
+    minHeight: 90,
+    borderBottomWidth: 1,
+    borderColor: '#ededed',
+    flex: 1,
+    flexDirection: 'column',
+  },
+  text: {
+    fontSize: 18,
     flex: 1,
+    textAlign: 'center',
   },
   textContainer: {
-    margin: 5,
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
   }
 })