From 922bf1d0f73a7650446ffd72f6ca404e739d611b Mon Sep 17 00:00:00 2001
From: Scott Kyle <scott@appden.com>
Date: Tue, 27 Oct 2015 14:23:17 -0700
Subject: [PATCH] Improve look of checkbox and smart list badges

---
 examples/ReactExample/components/styles.js       | 16 ++++++++++++++--
 examples/ReactExample/components/todo-item.js    |  6 +++---
 .../ReactExample/components/todo-listview.js     |  4 +++-
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/examples/ReactExample/components/styles.js b/examples/ReactExample/components/styles.js
index 05bac112..e685b5b6 100644
--- a/examples/ReactExample/components/styles.js
+++ b/examples/ReactExample/components/styles.js
@@ -28,10 +28,22 @@ module.exports = React.StyleSheet.create({
         width: 36,
     },
     listItemCheckbox: {
-        borderColor: "#000",
-        borderWidth: 0.5,
+        borderColor: '#ccc',
+        borderWidth: 1,
+        textAlign: 'center',
         width: 16,
         height: 16,
+        lineHeight: 14,
+    },
+    listItemCount: {
+        borderColor: '#ccc',
+        borderWidth: 1,
+        borderRadius: 8,
+        textAlign: 'center',
+        fontSize: 12,
+        width: 24,
+        height: 18,
+        lineHeight: 16,
     },
     listItemInput: {
         fontFamily: 'System',
diff --git a/examples/ReactExample/components/todo-item.js b/examples/ReactExample/components/todo-item.js
index d02667b5..d9f88ba5 100644
--- a/examples/ReactExample/components/todo-item.js
+++ b/examples/ReactExample/components/todo-item.js
@@ -34,9 +34,9 @@ class TodoItem extends TodoListItem {
         return (
             <TouchableWithoutFeedback onPress={this._onPressCheckbox}>
                 <View style={styles.listItemLeftSide}>
-                    <View style={styles.listItemCheckbox}>
-                        <Text>{this.done ? '✓' : ''}</Text>
-                    </View>
+                    <Text style={styles.listItemCheckbox}>
+                        {this.done ? '✓' : ''}
+                    </Text>
                 </View>
             </TouchableWithoutFeedback>
         );
diff --git a/examples/ReactExample/components/todo-listview.js b/examples/ReactExample/components/todo-listview.js
index 41004576..35b0c4c1 100644
--- a/examples/ReactExample/components/todo-listview.js
+++ b/examples/ReactExample/components/todo-listview.js
@@ -131,7 +131,9 @@ class TodoListExtraItem extends TodoListItem {
     renderLeftSide() {
         return (
             <View style={styles.listItemLeftSide}>
-                <Text>{this.props.item.items.length}</Text>
+                <Text style={styles.listItemCount}>
+                    {this.props.item.items.length}
+                </Text>
             </View>
         );
     }