diff --git a/app/components/markdown/index.js b/app/components/markdown/index.js index d70309e3f..e015d57e6 100644 --- a/app/components/markdown/index.js +++ b/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 ( {children} diff --git a/app/components/markdown/markdown_list_item.js b/app/components/markdown/markdown_list_item.js index fb00bcef1..2f9e6cf7f 100644 --- a/app/components/markdown/markdown_list_item.js +++ b/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 ( - + {bullet} @@ -49,6 +52,9 @@ export default class MarkdownListItem extends PureComponent { } const style = StyleSheet.create({ + bullet: { + width: 15 + }, container: { flexDirection: 'row', alignItems: 'flex-start' diff --git a/app/utils/markdown.js b/app/utils/markdown.js index 9d7c2e3b8..e27d60e00 100644 --- a/app/utils/markdown.js +++ b/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