From 049e3534b53dff1a9f5df58627812bb31dfbce94 Mon Sep 17 00:00:00 2001
From: Krzysztof Magiera <krzys.magiera@gmail.com>
Date: Thu, 26 Mar 2015 09:01:41 -0700
Subject: [PATCH] Update padding and bg color for tutorial

---
 docs/Tutorial.md | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/docs/Tutorial.md b/docs/Tutorial.md
index 1dac5e898..4a0f9dc6e 100644
--- a/docs/Tutorial.md
+++ b/docs/Tutorial.md
@@ -89,8 +89,7 @@ var styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: 'white',
-    paddingTop: 20,
+    backgroundColor: '#F5FCFF',
   },
   thumbnail: {
     width: 53,
@@ -154,8 +153,7 @@ Not too much has changed, we added a container around the Texts and then moved t
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: 'white',
-    paddingTop: 20,
+    backgroundColor: '#F5FCFF',
   },
 ```
 
@@ -314,6 +312,7 @@ Now modify the render funtion so that once we have our data it renders a ListVie
       <ListView
         dataSource={this.state.dataSource}
         renderRow={this.renderMovie}
+        style={styles.listView}
       />
     );
   },
@@ -350,6 +349,14 @@ And here is the modified `fetchData` method that updates the state accordingly:
   },
 ```
 
+Finally, we add styles for the `ListView` component to the `styles` JS object:
+```javascript
+  listView: {
+    paddingTop: 20,
+    backgroundColor: '#F5FCFF',
+  },
+```
+
 And here's the final result:
 
 <div class="tutorial-mock">
@@ -455,8 +462,7 @@ var styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: 'white',
-    paddingTop: 20,
+    backgroundColor: '#F5FCFF',
   },
   rightContainer: {
     flex: 1,
@@ -473,6 +479,10 @@ var styles = StyleSheet.create({
     width: 53,
     height: 81,
   },
+  listView: {
+    paddingTop: 20,
+    backgroundColor: '#F5FCFF',
+  },
 });
 
 AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);