From b7eeea38087b578769e39425a85e0585aed29def Mon Sep 17 00:00:00 2001
From: Carlos Tadeu Panato Junior <ctadeu@gmail.com>
Date: Mon, 29 May 2017 15:56:00 +0200
Subject: [PATCH] [RN-112] Update the formatting of markdown block quotes
 (#538)

* RN-112 - Update the formatting of markdown block quotes

* update style definitions

* update per review
---
 app/components/markdown/index.js                |  2 +-
 app/components/markdown/markdown_block_quote.js | 11 ++++++-----
 app/components/post/post.js                     |  4 ++++
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/app/components/markdown/index.js b/app/components/markdown/index.js
index 13b1f6e88..a760944a1 100644
--- a/app/components/markdown/index.js
+++ b/app/components/markdown/index.js
@@ -145,7 +145,7 @@ export default class Markdown extends PureComponent {
     renderBlockQuote = ({children, ...otherProps}) => {
         return (
             <MarkdownBlockQuote
-                bulletStyle={this.props.baseTextStyle}
+                blockStyle={this.props.blockStyles.quoteBlock}
                 {...otherProps}
             >
                 {children}
diff --git a/app/components/markdown/markdown_block_quote.js b/app/components/markdown/markdown_block_quote.js
index 18d81e69a..93038d3b8 100644
--- a/app/components/markdown/markdown_block_quote.js
+++ b/app/components/markdown/markdown_block_quote.js
@@ -4,16 +4,15 @@
 import React, {PureComponent} from 'react';
 import {
     StyleSheet,
-    Text,
     View
 } from 'react-native';
 
+import Icon from 'react-native-vector-icons/FontAwesome';
 import CustomPropTypes from 'app/constants/custom_prop_types';
 
 export default class MarkdownBlockQuote extends PureComponent {
     static propTypes = {
         blockStyle: CustomPropTypes.Style,
-        bulletStyle: CustomPropTypes.Style,
         children: CustomPropTypes.Children.isRequired
     };
 
@@ -21,9 +20,11 @@ export default class MarkdownBlockQuote extends PureComponent {
         return (
             <View style={style.container}>
                 <View>
-                    <Text style={this.props.bulletStyle}>
-                        {'> '}
-                    </Text>
+                    <Icon
+                        name='quote-left'
+                        style={this.props.blockStyle}
+                        size={14}
+                    />
                 </View>
                 <View>
                     {this.props.children}
diff --git a/app/components/post/post.js b/app/components/post/post.js
index c4107f10c..b33297020 100644
--- a/app/components/post/post.js
+++ b/app/components/post/post.js
@@ -832,6 +832,10 @@ const getMarkdownBlockStyles = makeStyleSheetFromTheme((theme) => {
         },
         horizontalRule: {
             backgroundColor: theme.centerChannelColor
+        },
+        quoteBlock: {
+            color: changeOpacity(theme.centerChannelColor, 0.5),
+            padding: 5
         }
     });
 });