Android-specific cosmetic changes

android/app/src/main/res/values/styles.xml

@@ -3,6 +3,8 @@
     <!-- Base application theme. -->
     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
         <!-- Customize your theme here. -->
+        <item name="android:windowLightStatusBar">true</item>
+        <item name="android:statusBarColor">#e0e0e0</item>
     </style>
 
 </resources>

colors.js

@@ -4,9 +4,9 @@ const isIOS = Platform.OS === 'ios';
 export default {
   linkColor: '#007aff',
   viewBackgroundColor: isIOS ? '#efeff4' : '#fafafa',
-  userColor: '#bf223f',
+  userColor: isIOS ? '#bf223f' : '#b71c1c',
   opColor: '#fff',
-  opBackgroundColor: '#bf223f',
+  opBackgroundColor: isIOS ? '#bf223f' : '#b71c1c',
   insignificantColor: 'rgba(0,0,0,.54)',
   sectionInsignificantColor: '#6d6d72',
   separatorColor: isIOS ? '#c8c7cc' : '#ebebeb',
@@ -15,7 +15,7 @@ export default {
   progressBarColor: '#007aff',
   sectionBackgroundColor: '#fff',
   domainColor: isIOS ? '#003d80' : '#0D47A1',
-  defaultButtonThemeColor: isIOS ? '#848484' : '#fafafa',
+  defaultButtonThemeColor: isIOS ? '#848484' : '#f5f5f5',
   primaryTextColor: isIOS ? null : 'rgba(0,0,0,.87)',
   toolbarBackgroundColor: isIOS ? null: '#f5f5f5',
   disabledColor: 'rgba(0,0,0,.38)',

components/Comment.js

@@ -5,16 +5,18 @@ import React, {
   View,
   Text,
   Image,
+  Platform,
 } from 'react-native';
 
-import SafariView from 'react-native-safari-view';
+const isIOS = Platform.OS === 'ios';
+
 import HTMLView from '../components/HTMLView';
 import showBrowser from '../utils/showBrowser';
 import colors from '../colors';
 
 const styles = StyleSheet.create({
   comment: {
-    padding: 15,
+    padding: isIOS ? 15 : 16,
     flex: 1,
     flexDirection: 'row',
   },
@@ -63,6 +65,7 @@ const styles = StyleSheet.create({
     height: 9,
     marginRight: 6,
     marginTop: 4,
+    opacity: isIOS ? 1 : .54,
   },
 });
 

components/HTMLView.js

@@ -7,15 +7,19 @@ import React, {
   View,
   ScrollView,
   Linking,
+  Platform,
 } from 'react-native';
 
+const isIOS = Platform.OS === 'ios';
+
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import htmlparser from '../vendor/htmlparser2';
 
 import colors from '../colors';
 
 const nodeStyles = StyleSheet.create({
   p: {
+    color: colors.primaryTextColor,
     marginBottom: 8,
   },
   pre: {
@@ -25,7 +29,8 @@ const nodeStyles = StyleSheet.create({
     marginBottom: 8,
   },
   code: {
-    fontFamily: 'Menlo',
+    color: colors.primaryTextColor,
+    fontFamily: isIOS ? 'Menlo' : 'monospace',
     fontSize: 12,
   },
   a: {

components/StoryRow.js

@@ -28,7 +28,7 @@ const styles = StyleSheet.create({
     alignItems: 'stretch',
   },
   storyPosition: {
-    paddingTop: 10,
+    paddingTop: isIOS ? 10 : 16,
     paddingLeft: 15,
   },
   storyPositionNumber: {
@@ -39,10 +39,11 @@ const styles = StyleSheet.create({
   },
   storyInfo: {
     padding: 10,
+    paddingVertical: isIOS ? 10 : 16,
     flex: 1,
   },
   storyComments: {
-    padding: 10,
+    padding: isIOS ? 10 : 16,
   },
   storyDisclosure: {
     paddingVertical: 15,
@@ -57,21 +58,21 @@ const styles = StyleSheet.create({
     color: colors.insignificantColor,
   },
   storyDomain: {
-    fontSize: 13,
+    fontSize: isIOS ? 13 : 14,
     color: colors.domainColor,
   },
   storyMetadataWrap: {
     flexWrap: 'wrap',
     flexDirection: 'row',
   },
   storyMetadata: {
-    fontSize: 13,
+    fontSize: isIOS ? 13 : 14,
     color: colors.insignificantColor,
   },
   commentIcon: {
-    width: 20,
-    height: 19,
-    marginHorizontal: 2,
+    width: isIOS ? 20 : 24,
+    height: isIOS ? 19 : 24,
+    marginHorizontal: isIOS ? 2 : 0,
     marginTop: 3,
     marginBottom: 2,
     opacity: isIOS ? 1 : .54,

index.android.js

@@ -42,7 +42,7 @@ class HackerWeb extends Component {
         return <View style={styles.container}>
           <ToolbarAndroid
             title="HackerWeb"
-            titleColor={colors.insignificantColor}
+            titleColor={colors.primaryTextColor}
             style={styles.toolbar}
             actions={[
               {
@@ -73,7 +73,7 @@ class HackerWeb extends Component {
         return <View style={[styles.container, styles.wrapper]}>
           <ToolbarAndroid
             title={title}
-            titleColor={colors.insignificantColor}
+            titleColor={colors.primaryTextColor}
             style={styles.toolbar}
             navIcon={require('./images/arrow-back.png')}
             onIconClicked={navigator.pop}
@@ -90,7 +90,7 @@ class HackerWeb extends Component {
         return <View style={[styles.container, styles.wrapper]}>
           <ToolbarAndroid
             title="About"
-            titleColor={colors.insignificantColor}
+            titleColor={colors.primaryTextColor}
             style={styles.toolbar}
           />
           <AboutView />

views/AboutView.js

@@ -7,21 +7,27 @@ import React, {
   Image,
   ScrollView,
   TouchableOpacity,
+  TouchableNativeFeedback,
   Linking,
+  Platform,
 } from 'react-native';
 
+const isIOS = Platform.OS === 'ios';
+const CrossTouchable = isIOS ? TouchableOpacity : TouchableNativeFeedback;
+
 // import SafariView from 'react-native-safari-view';
 
 import colors from '../colors';
 
+const hairlineWidth = isIOS ? StyleSheet.hairlineWidth : 1;
 const styles = StyleSheet.create({
   aboutContainer: {
-    marginTop: 34,
-    paddingVertical: 10,
-    paddingHorizontal: 15,
-    borderTopWidth: StyleSheet.hairlineWidth,
+    marginTop: isIOS ? 34 : 0,
+    paddingVertical: isIOS ? 10 : 32,
+    paddingHorizontal: isIOS ? 15 : 16,
+    borderTopWidth: isIOS ? hairlineWidth : 0,
     borderTopColor: colors.separatorColor,
-    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomWidth: hairlineWidth,
     borderBottomColor: colors.separatorColor,
     backgroundColor: colors.sectionBackgroundColor,
     flexDirection: 'row',
@@ -31,13 +37,14 @@ const styles = StyleSheet.create({
     height: 60,
     marginRight: 10,
     borderColor: colors.separatorColor,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderRadius: 14,
+    borderWidth: hairlineWidth,
+    borderRadius: isIOS ? 14 : 2,
   },
   aboutTextContainer: {
     flex: 1,
   },
   aboutHeading: {
+    color: colors.primaryTextColor,
     fontWeight: '500',
     fontSize: 17,
   },
@@ -47,26 +54,25 @@ const styles = StyleSheet.create({
   },
   listContainer: {
     marginTop: 34,
-    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopWidth: hairlineWidth,
     borderTopColor: colors.separatorColor,
-    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomWidth: hairlineWidth,
     borderBottomColor: colors.separatorColor,
     backgroundColor: colors.sectionBackgroundColor,
   },
   listItem: {
-    paddingVertical: 13,
-    paddingHorizontal: 15,
+    paddingVertical: isIOS ? 13 : 16,
+    paddingHorizontal: isIOS ? 15 : 16,
   },
   listItemSeparator: {
     marginLeft: 15,
     marginTop: -1,
-    height: StyleSheet.hairlineWidth,
+    height: hairlineWidth,
     backgroundColor: colors.separatorColor,
   },
   link: {
-    backgroundColor: colors.sectionBackgroundColor,
     color: colors.linkColor,
-    fontSize: 17,
+    fontSize: isIOS ? 17 : 16,
   },
   disclaimer: {
     paddingVertical: 27,
@@ -96,9 +102,11 @@ function linksContainer(links){
     {links.map((link, i) => {
       return (
         <View key={link.text}>
-          <TouchableOpacity onPress={linkPress.bind(null, link.url)} style={styles.listItem}>
-            <Text style={styles.link}>{link.text}</Text>
-          </TouchableOpacity>
+          <CrossTouchable onPress={linkPress.bind(null, link.url)}>
+            <View style={styles.listItem}>
+              <Text style={styles.link}>{link.text}</Text>
+            </View>
+          </CrossTouchable>
           {i < links.length-1 && <View style={styles.listItemSeparator}/>}
         </View>
       );

views/CommentsView.js

@@ -12,8 +12,11 @@ import React, {
   ActionSheetIOS,
   ListView,
   LayoutAnimation,
+  Platform,
 } from 'react-native';
 
+const isIOS = Platform.OS === 'ios';
+
 import ChromeCustomTabsClient from 'react-native-chrome-custom-tabs';
 
 import StoryStore from '../stores/StoryStore';
@@ -29,6 +32,7 @@ import domainify from '../utils/domainify';
 
 import colors from '../colors';
 
+const hairlineWidth = isIOS ? StyleSheet.hairlineWidth : 1;
 const styles = StyleSheet.create({
   viewCommentsBlank: {
     flex: 1,
@@ -40,7 +44,7 @@ const styles = StyleSheet.create({
   },
   footer: {
     borderTopColor: colors.separatorColor,
-    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopWidth: hairlineWidth,
     height: 30,
   },
   errorContainer: {
@@ -58,22 +62,24 @@ const styles = StyleSheet.create({
     opacity: .6,
   },
   externalArrowIcon: {
-    width: 12,
-    height: 9,
+    width: isIOS ? 12 : 10,
+    height: isIOS ? 9 : 10,
     marginLeft: 2,
     marginRight: 4,
+    opacity: isIOS ? 1 : .54,
   },
   storyLink: {
     backgroundColor: colors.viewBackgroundColor,
   },
   storyTitle: {
-    fontSize: 17
+    color: colors.primaryTextColor,
+    fontSize: 17,
   },
   storySection: {
     padding: 15,
   },
   storyDomain: {
-    fontSize: 13,
+    fontSize: isIOS ? 13 : 14,
     color: colors.domainColor,
   },
   storyMetadataWrap: {
@@ -82,21 +88,21 @@ const styles = StyleSheet.create({
     marginBottom: 2,
   },
   storyMetadata: {
-    fontSize: 13,
+    fontSize: isIOS ? 13 : 14,
     color: colors.insignificantColor,
   },
   storyContent: {
     backgroundColor: colors.sectionBackgroundColor,
-    padding: 15,
+    padding: isIOS ? 15 : 16,
     borderTopColor: colors.separatorColor,
-    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopWidth: hairlineWidth,
     borderBottomColor: colors.separatorColor,
-    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomWidth: hairlineWidth,
     marginBottom: 30,
   },
   separator: {
     backgroundColor: colors.separatorColor,
-    height: StyleSheet.hairlineWidth,
+    height: hairlineWidth,
   },
   externalLink: {
     flex: 1,