RN-113/RN-114 Updated markdown styles for lists and code (#851)

* RN-114 Updated markdown list style

* RN-113 Updated code font

app/components/markdown/index.js

@@ -236,10 +236,13 @@ export default class Markdown extends PureComponent {
         );
     }
 
-    renderListItem = ({children, ...otherProps}) => {
+    renderListItem = ({children, context, ...otherProps}) => {
+        const level = context.filter((type) => type === 'list').length;
+
         return (
             <MarkdownListItem
                 bulletStyle={this.props.baseTextStyle}
+                level={level}
                 {...otherProps}
             >
                 {children}

app/components/markdown/markdown_list_item.js

@@ -18,7 +18,8 @@ export default class MarkdownListItem extends PureComponent {
         startAt: PropTypes.number,
         index: PropTypes.number.isRequired,
         tight: PropTypes.bool,
-        bulletStyle: CustomPropTypes.Style
+        bulletStyle: CustomPropTypes.Style,
+        level: PropTypes.number
     };
 
     static defaultProps = {
@@ -29,13 +30,15 @@ export default class MarkdownListItem extends PureComponent {
         let bullet;
         if (this.props.ordered) {
             bullet = (this.props.startAt + this.props.index) + '. ';
+        } else if (this.props.level % 2 === 0) {
+            bullet = '◦';
         } else {
-            bullet = '• ';
+            bullet = '•';
         }
 
         return (
             <View style={style.container}>
-                <View>
+                <View style={style.bullet}>
                     <Text style={this.props.bulletStyle}>
                         {bullet}
                     </Text>
@@ -49,6 +52,9 @@ export default class MarkdownListItem extends PureComponent {
 }
 
 const style = StyleSheet.create({
+    bullet: {
+        width: 15
+    },
     container: {
         flexDirection: 'row',
         alignItems: 'flex-start'

app/utils/markdown.js

@@ -5,7 +5,7 @@ import {Platform, StyleSheet} from 'react-native';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 
 export const getMarkdownTextStyles = makeStyleSheetFromTheme((theme) => {
-    const codeFont = Platform.OS === 'ios' ? 'Courier New' : 'monospace';
+    const codeFont = Platform.OS === 'ios' ? 'Menlo' : 'monospace';
 
     return {
         emph: {
@@ -58,10 +58,8 @@ export const getMarkdownTextStyles = makeStyleSheetFromTheme((theme) => {
         },
         code: {
             alignSelf: 'center',
-            backgroundColor: changeOpacity(theme.centerChannelColor, 0.1),
-            fontFamily: codeFont,
-            paddingHorizontal: 4,
-            paddingVertical: 2
+            backgroundColor: changeOpacity(theme.centerChannelColor, 0.07),
+            fontFamily: codeFont
         },
         codeBlock: {
             fontFamily: codeFont
@@ -78,7 +76,7 @@ export const getMarkdownBlockStyles = makeStyleSheetFromTheme((theme) => {
             marginTop: 6
         },
         codeBlock: {
-            backgroundColor: changeOpacity(theme.centerChannelColor, 0.1),
+            backgroundColor: changeOpacity(theme.centerChannelColor, 0.07),
             borderRadius: 4,
             paddingHorizontal: 4,
             paddingVertical: 2