Merge branch 'master' into mark-as-unread

2019-10-09 16:02:59 -04:00 · 2019-10-09 16:02:59 -04:00 · 6e6e57d28b
commit 6e6e57d28b
parent b775763926 fddacedb4f
27 changed files with 1022 additions and 50 deletions
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@ -123,7 +123,7 @@ android {
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        missingDimensionStrategy "RNN.reactNativeVersion", "reactNative57_5"
-        versionCode 236
+        versionCode 238
        versionName "1.24.0"
        multiDexEnabled = true
        ndk {
--- a/app/components/file_attachment_list/snapshots/file_attachment.test.js.snap
+++ b/app/components/file_attachment_list/snapshots/file_attachment.test.js.snap
@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FileAttachment should match snapshot 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderColor": "rgba(61,60,64,0.2)",
+        "borderRadius": 2,
+        "borderWidth": 1,
+        "flex": 1,
+        "flexDirection": "row",
+        "marginRight": 10,
+        "marginTop": 10,
+        "width": 300,
+      },
+    ]
+  }
+>
+  <TouchableWithFeedbackIOS
+    onPress={[Function]}
+    type="opacity"
+  >
+    <FileAttachmentIcon
+      backgroundColor="#fff"
+      file={
+        Object {
+          "mime_type": "image/png",
+        }
+      }
+      iconHeight={60}
+      iconWidth={60}
+      onCaptureRef={[Function]}
+      theme={
+        Object {
+          "awayIndicator": "#ffbc42",
+          "buttonBg": "#166de0",
+          "buttonColor": "#ffffff",
+          "centerChannelBg": "#ffffff",
+          "centerChannelColor": "#3d3c40",
+          "codeTheme": "github",
+          "dndIndicator": "#f74343",
+          "errorTextColor": "#fd5960",
+          "linkColor": "#2389d7",
+          "mentionBj": "#ffffff",
+          "mentionColor": "#145dbf",
+          "mentionHighlightBg": "#ffe577",
+          "mentionHighlightLink": "#166de0",
+          "newMessageSeparator": "#ff8800",
+          "onlineIndicator": "#06d6a0",
+          "sidebarBg": "#145dbf",
+          "sidebarHeaderBg": "#1153ab",
+          "sidebarHeaderTextColor": "#ffffff",
+          "sidebarText": "#ffffff",
+          "sidebarTextActiveBorder": "#579eff",
+          "sidebarTextActiveColor": "#ffffff",
+          "sidebarTextHoverBg": "#4578bf",
+          "sidebarUnreadText": "#ffffff",
+          "type": "Mattermost",
+        }
+      }
+      wrapperHeight={80}
+      wrapperWidth={80}
+    />
+  </TouchableWithFeedbackIOS>
+  <TouchableWithFeedbackIOS
+    onPress={[Function]}
+    style={
+      Object {
+        "borderLeftColor": "rgba(61,60,64,0.2)",
+        "borderLeftWidth": 1,
+        "flex": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 5,
+      }
+    }
+    type="opacity"
+  />
+</View>
+`;
--- a/app/components/file_attachment_list/file_attachment.js
+++ b/app/components/file_attachment_list/file_attachment.js
@ -140,15 +140,14 @@ export default class FileAttachment extends PureComponent {
        return (
            <View style={[style.fileWrapper]}>
                {fileAttachmentComponent}
-                <View style={style.fileInfoContainer}>
-                    <TouchableWithFeedback
-                        onLongPress={onLongPress}
-                        onPress={this.handlePreviewPress}
-                        type={'opacity'}
-                    >
-                        {this.renderFileInfo()}
-                    </TouchableWithFeedback>
-                </View>
+                <TouchableWithFeedback
+                    style={style.fileInfoContainer}
+                    onLongPress={onLongPress}
+                    onPress={this.handlePreviewPress}
+                    type={'opacity'}
+                >
+                    {this.renderFileInfo()}
+                </TouchableWithFeedback>
            </View>
        );
    }
--- a/app/components/file_attachment_list/file_attachment.test.js
+++ b/app/components/file_attachment_list/file_attachment.test.js
@ -0,0 +1,45 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import FileAttachment from './file_attachment.js';
+import Preferences from 'mattermost-redux/constants/preferences';
+
+jest.mock('react-native-doc-viewer', () => ({
+    openDoc: jest.fn(),
+}));
+
+describe('FileAttachment', () => {
+    const baseProps = {
+        canDownloadFiles: true,
+        file: {
+            create_at: 1546893090093,
+            delete_at: 0,
+            extension: 'png',
+            has_preview_image: true,
+            height: 171,
+            id: 'fileId',
+            name: 'image.png',
+            post_id: 'postId',
+            size: 14894,
+            update_at: 1546893090093,
+            user_id: 'userId',
+            width: 425,
+            data: {
+                mime_type: 'image/png',
+            },
+        },
+        id: 'id',
+        index: 0,
+        theme: Preferences.THEMES.default,
+    };
+
+    test('should match snapshot', () => {
+        const wrapper = shallow(
+            <FileAttachment {...baseProps}/>
+        );
+
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+});
--- a/app/components/markdown/markdown_table/markdown_table.js
+++ b/app/components/markdown/markdown_table/markdown_table.js
@ -9,6 +9,7 @@ import {
    View,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
+import Icon from 'react-native-vector-icons/FontAwesome';

 import {CELL_WIDTH} from 'app/components/markdown/markdown_table_cell/markdown_table_cell';

@ -107,7 +108,7 @@ export default class MarkdownTable extends React.PureComponent {
                    ]}
                    start={{x: 0, y: 0}}
                    end={{x: 1, y: 0}}
-                    style={style.moreRight}
+                    style={[style.moreRight, {height: this.state.contentHeight}]}
                />
            );
        }
@ -120,13 +121,26 @@ export default class MarkdownTable extends React.PureComponent {
                        changeOpacity(this.props.theme.centerChannelColor, 0.0),
                        changeOpacity(this.props.theme.centerChannelColor, 0.1),
                    ]}
-                    style={style.moreBelow}
+                    style={[style.moreBelow, {width: this.getTableWidth()}]}
                />
            );
        }

+        const expandButton = (
+            <TouchableWithFeedback
+                onPress={this.handlePress}
+                style={{...style.expandButton, left: this.state.containerWidth - 20}}
+            >
+                <Icon
+                    name={'expand'}
+                    style={style.icon}
+                />
+            </TouchableWithFeedback>
+        );
+
        return (
            <TouchableWithFeedback
+                style={style.tablePadding}
                onPress={this.handlePress}
                type={'opacity'}
            >
@ -142,6 +156,7 @@ export default class MarkdownTable extends React.PureComponent {
                </ScrollView>
                {moreRight}
                {moreBelow}
+                {expandButton}
            </TouchableWithFeedback>
        );
    }
@ -155,26 +170,44 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
            borderRightWidth: 1,
            maxHeight: MAX_HEIGHT,
        },
+        expandButton: {
+            height: 30,
+            width: 30,
+            borderWidth: 1,
+            paddingTop: 6,
+            paddingLeft: 7,
+            borderColor: changeOpacity(theme.centerChannelColor, 0.2),
+            borderRadius: 15,
+            bottom: 20,
+            backgroundColor: theme.centerChannelBg,
+        },
+        icon: {
+            fontSize: 15,
+            color: theme.linkColor,
+        },
        table: {
            borderColor: changeOpacity(theme.centerChannelColor, 0.2),
            borderLeftWidth: 1,
            borderTopWidth: 1,
        },
+        tablePadding: {
+            paddingRight: 10,
+        },
        tableExtraBorders: {
            borderBottomWidth: 1,
            borderRightWidth: 1,
        },
        moreBelow: {
-            bottom: 0,
+            bottom: 30,
            height: 20,
            position: 'absolute',
-            right: 0,
+            left: 0,
            width: '100%',
        },
        moreRight: {
-            height: '100%',
+            maxHeight: MAX_HEIGHT,
            position: 'absolute',
-            right: 0,
+            right: 10,
            top: 0,
            width: 20,
        },
--- a/app/screens/channel/channel_nav_bar/channel_title/snapshots/channel_title.test.js.snap
+++ b/app/screens/channel/channel_nav_bar/channel_title/snapshots/channel_title.test.js.snap
@ -51,6 +51,133 @@ exports[`ChannelTitle should match snapshot 1`] = `
 </TouchableOpacity>
 `;

+exports[`ChannelTitle should match snapshot when is DM and has guests and the teammate is the guest (when can show subtitles) 1`] = `
+<TouchableOpacity
+  activeOpacity={0.2}
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "flex": 1,
+        "flexDirection": "row",
+        "justifyContent": "flex-start",
+        "position": "relative",
+        "top": -1,
+        "width": "90%",
+      }
+    }
+  >
+    <Text
+      ellipsizeMode="tail"
+      numberOfLines={1}
+      style={
+        Object {
+          "color": undefined,
+          "fontSize": 18,
+          "fontWeight": "bold",
+          "textAlign": "center",
+        }
+      }
+    >
+      Other user
+    </Text>
+    <Icon
+      allowFontScaling={false}
+      name="chevron-down"
+      size={12}
+      style={
+        Object {
+          "color": undefined,
+          "marginHorizontal": 5,
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      Object {
+        "alignItems": "flex-start",
+        "flex": 1,
+        "position": "relative",
+        "top": -1,
+        "width": "90%",
+      }
+    }
+  >
+    <FormattedText
+      defaultMessage="This person is a guest"
+      ellipsizeMode="tail"
+      id="channel.isGuest"
+      numberOfLines={1}
+      style={
+        Object {
+          "color": undefined,
+          "fontSize": 14,
+          "opacity": 0.6,
+        }
+      }
+    />
+  </View>
+</TouchableOpacity>
+`;
+
+exports[`ChannelTitle should match snapshot when is DM and has guests but the teammate is not the guest (when can show subtitles) 1`] = `
+<TouchableOpacity
+  activeOpacity={0.2}
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "flex": 1,
+        "flexDirection": "row",
+        "justifyContent": "flex-start",
+        "position": "relative",
+        "top": -1,
+        "width": "90%",
+      }
+    }
+  >
+    <Text
+      ellipsizeMode="tail"
+      numberOfLines={1}
+      style={
+        Object {
+          "color": undefined,
+          "fontSize": 18,
+          "fontWeight": "bold",
+          "textAlign": "center",
+        }
+      }
+    >
+      Other user
+    </Text>
+    <Icon
+      allowFontScaling={false}
+      name="chevron-down"
+      size={12}
+      style={
+        Object {
+          "color": undefined,
+          "marginHorizontal": 5,
+        }
+      }
+    />
+  </View>
+</TouchableOpacity>
+`;
+
 exports[`ChannelTitle should match snapshot when isSelfDMChannel is true 1`] = `
 <TouchableOpacity
  activeOpacity={0.2}
--- a/app/screens/channel/channel_nav_bar/channel_title/channel_title.js
+++ b/app/screens/channel/channel_nav_bar/channel_title/channel_title.js
@ -59,6 +59,9 @@ export default class ChannelTitle extends PureComponent {
        if (!isGuest && !hasGuests) {
            return null;
        }
+        if (channelType === General.DM_CHANNEL && !isGuest) {
+            return null;
+        }

        let messageId;
        let defaultMessage;
--- a/app/screens/channel/channel_nav_bar/channel_title/channel_title.test.js
+++ b/app/screens/channel/channel_nav_bar/channel_title/channel_title.test.js
@ -3,6 +3,7 @@

 import React from 'react';
 import {shallow} from 'enzyme';
+import {General} from 'mattermost-redux/constants';

 import ChannelTitle from './channel_title';

@ -38,4 +39,38 @@ describe('ChannelTitle', () => {

        expect(wrapper.getElement()).toMatchSnapshot();
    });
+
+    test('should match snapshot when is DM and has guests but the teammate is not the guest (when can show subtitles)', () => {
+        const props = {
+            ...baseProps,
+            displayName: 'Other user',
+            channelType: General.DM_CHANNEL,
+            isGuest: false,
+            hasGuests: true,
+            canHaveSubtitle: true,
+        };
+        const wrapper = shallow(
+            <ChannelTitle {...props}/>,
+            {context: {intl: {formatMessage: (intlId) => intlId.defaultMessage}}},
+        );
+
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+
+    test('should match snapshot when is DM and has guests and the teammate is the guest (when can show subtitles)', () => {
+        const props = {
+            ...baseProps,
+            displayName: 'Other user',
+            channelType: General.DM_CHANNEL,
+            isGuest: true,
+            hasGuests: true,
+            canHaveSubtitle: true,
+        };
+        const wrapper = shallow(
+            <ChannelTitle {...props}/>,
+            {context: {intl: {formatMessage: (intlId) => intlId.defaultMessage}}},
+        );
+
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
 });
--- a/app/screens/channel_info/snapshots/channel_info.test.js.snap
+++ b/app/screens/channel_info/snapshots/channel_info.test.js.snap
@ -27,6 +27,7 @@ exports[`channel_info should match snapshot 1`] = `
      isArchived={false}
      isBot={false}
      isGroupConstrained={false}
+      isTeammateGuest={false}
      memberCount={2}
      onPermalinkPress={[Function]}
      purpose="Purpose"
--- a/app/screens/channel_info/snapshots/channel_info_header.test.js.snap
+++ b/app/screens/channel_info/snapshots/channel_info_header.test.js.snap
@ -209,10 +209,11 @@ exports[`channel_info_header should match snapshot 1`] = `
                  "color": "#2389d7",
                },
                "mention": Object {
-                  "color": "#2389d7",
+                  "color": "#166de0",
                },
                "mention_highlight": Object {
                  "backgroundColor": "#ffe577",
+                  "color": "#166de0",
                },
                "strong": Object {
                  "fontWeight": "bold",
@ -356,10 +357,11 @@ exports[`channel_info_header should match snapshot 1`] = `
                  "color": "#2389d7",
                },
                "mention": Object {
-                  "color": "#2389d7",
+                  "color": "#166de0",
                },
                "mention_highlight": Object {
                  "backgroundColor": "#ffe577",
+                  "color": "#166de0",
                },
                "strong": Object {
                  "fontWeight": "bold",
@ -408,7 +410,7 @@ exports[`channel_info_header should match snapshot 1`] = `
 </SafeAreaView>
 `;

-exports[`channel_info_header should match snapshot when DM and hasGuests 1`] = `
+exports[`channel_info_header should match snapshot when DM and hasGuests and is the teammate 1`] = `
 <SafeAreaView>
  <View
    style={
@ -549,6 +551,416 @@ exports[`channel_info_header should match snapshot when DM and hasGuests 1`] = `
              }
            }
          />
+          <Connect(Markdown)
+            baseTextStyle={
+              Object {
+                "color": "#3d3c40",
+                "fontSize": 13,
+                "lineHeight": 20,
+              }
+            }
+            blockStyles={
+              Object {
+                "adjacentParagraph": Object {
+                  "marginTop": 6,
+                },
+                "horizontalRule": Object {
+                  "backgroundColor": "#3d3c40",
+                  "height": 0.5,
+                  "marginVertical": 10,
+                },
+                "quoteBlockIcon": Object {
+                  "color": undefined,
+                  "padding": 5,
+                },
+              }
+            }
+            onPermalinkPress={[MockFunction]}
+            textStyles={
+              Object {
+                "code": Object {
+                  "alignSelf": "center",
+                  "backgroundColor": undefined,
+                  "fontFamily": "Menlo",
+                },
+                "codeBlock": Object {
+                  "fontFamily": "Menlo",
+                },
+                "del": Object {
+                  "textDecorationLine": "line-through",
+                },
+                "emph": Object {
+                  "fontStyle": "italic",
+                },
+                "error": Object {
+                  "color": "#fd5960",
+                },
+                "heading1": Object {
+                  "fontSize": 17,
+                  "fontWeight": "700",
+                  "lineHeight": 25,
+                },
+                "heading1Text": Object {
+                  "paddingBottom": 8,
+                },
+                "heading2": Object {
+                  "fontSize": 17,
+                  "fontWeight": "700",
+                  "lineHeight": 25,
+                },
+                "heading2Text": Object {
+                  "paddingBottom": 8,
+                },
+                "heading3": Object {
+                  "fontSize": 17,
+                  "fontWeight": "700",
+                  "lineHeight": 25,
+                },
+                "heading3Text": Object {
+                  "paddingBottom": 8,
+                },
+                "heading4": Object {
+                  "fontSize": 17,
+                  "fontWeight": "700",
+                  "lineHeight": 25,
+                },
+                "heading4Text": Object {
+                  "paddingBottom": 8,
+                },
+                "heading5": Object {
+                  "fontSize": 17,
+                  "fontWeight": "700",
+                  "lineHeight": 25,
+                },
+                "heading5Text": Object {
+                  "paddingBottom": 8,
+                },
+                "heading6": Object {
+                  "fontSize": 17,
+                  "fontWeight": "700",
+                  "lineHeight": 25,
+                },
+                "heading6Text": Object {
+                  "paddingBottom": 8,
+                },
+                "link": Object {
+                  "color": "#2389d7",
+                },
+                "mention": Object {
+                  "color": "#166de0",
+                },
+                "mention_highlight": Object {
+                  "backgroundColor": "#ffe577",
+                  "color": "#166de0",
+                },
+                "strong": Object {
+                  "fontWeight": "bold",
+                },
+                "table_header_row": Object {
+                  "fontWeight": "700",
+                },
+              }
+            }
+            value="Purpose string"
+          />
+        </View>
+      </TouchableHighlight>
+    </View>
+    <View
+      style={
+        Object {
+          "marginTop": 15,
+        }
+      }
+    >
+      <TouchableHighlight
+        activeOpacity={0.85}
+        delayPressOut={100}
+        onLongPress={[Function]}
+        underlayColor="black"
+      >
+        <View
+          style={
+            Object {
+              "paddingHorizontal": 15,
+            }
+          }
+        >
+          <FormattedText
+            defaultMessage="Header"
+            id="channel_info.header"
+            style={
+              Object {
+                "backgroundColor": "transparent",
+                "color": "#3d3c40",
+                "fontSize": 13,
+                "marginBottom": 10,
+              }
+            }
+          />
+          <Connect(Markdown)
+            baseTextStyle={
+              Object {
+                "color": "#3d3c40",
+                "fontSize": 13,
+                "lineHeight": 20,
+              }
+            }
+            blockStyles={
+              Object {
+                "adjacentParagraph": Object {
+                  "marginTop": 6,
+                },
+                "horizontalRule": Object {
+                  "backgroundColor": "#3d3c40",
+                  "height": 0.5,
+                  "marginVertical": 10,
+                },
+                "quoteBlockIcon": Object {
+                  "color": undefined,
+                  "padding": 5,
+                },
+              }
+            }
+            onChannelLinkPress={[MockFunction]}
+            onPermalinkPress={[MockFunction]}
+            textStyles={
+              Object {
+                "code": Object {
+                  "alignSelf": "center",
+                  "backgroundColor": undefined,
+                  "fontFamily": "Menlo",
+                },
+                "codeBlock": Object {
+                  "fontFamily": "Menlo",
+                },
+                "del": Object {
+                  "textDecorationLine": "line-through",
+                },
+                "emph": Object {
+                  "fontStyle": "italic",
+                },
+                "error": Object {
+                  "color": "#fd5960",
+                },
+                "heading1": Object {
+                  "fontSize": 17,
+                  "fontWeight": "700",
+                  "lineHeight": 25,
+                },
+                "heading1Text": Object {
+                  "paddingBottom": 8,
+                },
+                "heading2": Object {
+                  "fontSize": 17,
+                  "fontWeight": "700",
+                  "lineHeight": 25,
+                },
+                "heading2Text": Object {
+                  "paddingBottom": 8,
+                },
+                "heading3": Object {
+                  "fontSize": 17,
+                  "fontWeight": "700",
+                  "lineHeight": 25,
+                },
+                "heading3Text": Object {
+                  "paddingBottom": 8,
+                },
+                "heading4": Object {
+                  "fontSize": 17,
+                  "fontWeight": "700",
+                  "lineHeight": 25,
+                },
+                "heading4Text": Object {
+                  "paddingBottom": 8,
+                },
+                "heading5": Object {
+                  "fontSize": 17,
+                  "fontWeight": "700",
+                  "lineHeight": 25,
+                },
+                "heading5Text": Object {
+                  "paddingBottom": 8,
+                },
+                "heading6": Object {
+                  "fontSize": 17,
+                  "fontWeight": "700",
+                  "lineHeight": 25,
+                },
+                "heading6Text": Object {
+                  "paddingBottom": 8,
+                },
+                "link": Object {
+                  "color": "#2389d7",
+                },
+                "mention": Object {
+                  "color": "#166de0",
+                },
+                "mention_highlight": Object {
+                  "backgroundColor": "#ffe577",
+                  "color": "#166de0",
+                },
+                "strong": Object {
+                  "fontWeight": "bold",
+                },
+                "table_header_row": Object {
+                  "fontWeight": "700",
+                },
+              }
+            }
+            value="Header string"
+          />
+        </View>
+      </TouchableHighlight>
+    </View>
+    <Text
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "color": undefined,
+            "flexDirection": "row",
+            "fontSize": 12,
+            "marginTop": 5,
+          },
+          Object {
+            "paddingHorizontal": 15,
+          },
+        ]
+      }
+    >
+      <FormattedText
+        defaultMessage="Created by {creator} on "
+        id="mobile.routes.channelInfo.createdBy"
+        values={
+          Object {
+            "creator": "Creator",
+          }
+        }
+      />
+      <FormattedDate
+        format="LL"
+        value={123}
+      />
+    </Text>
+  </View>
+</SafeAreaView>
+`;
+
+exports[`channel_info_header should match snapshot when DM and hasGuests but its me and not the teammate 1`] = `
+<SafeAreaView>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#ffffff",
+        "borderBottomColor": undefined,
+        "borderBottomWidth": 1,
+        "marginBottom": 40,
+        "paddingVertical": 15,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "paddingVertical": 10,
+          },
+          Object {
+            "paddingHorizontal": 15,
+          },
+        ]
+      }
+    >
+      <ChannelIcon
+        isActive={false}
+        isArchived={false}
+        isBot={false}
+        isInfo={true}
+        isUnread={false}
+        membersCount={2}
+        size={16}
+        status="status"
+        theme={
+          Object {
+            "awayIndicator": "#ffbc42",
+            "buttonBg": "#166de0",
+            "buttonColor": "#ffffff",
+            "centerChannelBg": "#ffffff",
+            "centerChannelColor": "#3d3c40",
+            "codeTheme": "github",
+            "dndIndicator": "#f74343",
+            "errorTextColor": "#fd5960",
+            "linkColor": "#2389d7",
+            "mentionBj": "#ffffff",
+            "mentionColor": "#145dbf",
+            "mentionHighlightBg": "#ffe577",
+            "mentionHighlightLink": "#166de0",
+            "newMessageSeparator": "#ff8800",
+            "onlineIndicator": "#06d6a0",
+            "sidebarBg": "#145dbf",
+            "sidebarHeaderBg": "#1153ab",
+            "sidebarHeaderTextColor": "#ffffff",
+            "sidebarText": "#ffffff",
+            "sidebarTextActiveBorder": "#579eff",
+            "sidebarTextActiveColor": "#ffffff",
+            "sidebarTextHoverBg": "#4578bf",
+            "sidebarUnreadText": "#ffffff",
+            "type": "Mattermost",
+          }
+        }
+        type="D"
+      />
+      <Text
+        ellipsizeMode="tail"
+        numberOfLines={1}
+        style={
+          Object {
+            "color": "#3d3c40",
+            "flex": 1,
+            "fontSize": 15,
+            "fontWeight": "600",
+          }
+        }
+      >
+        Channel name
+      </Text>
+    </View>
+    <View
+      style={
+        Object {
+          "marginTop": 15,
+        }
+      }
+    >
+      <TouchableHighlight
+        activeOpacity={0.85}
+        delayPressOut={100}
+        onLongPress={[Function]}
+        underlayColor="black"
+      >
+        <View
+          style={
+            Object {
+              "paddingHorizontal": 15,
+            }
+          }
+        >
+          <FormattedText
+            defaultMessage="Purpose"
+            id="channel_info.purpose"
+            style={
+              Object {
+                "backgroundColor": "transparent",
+                "color": "#3d3c40",
+                "fontSize": 13,
+                "marginBottom": 10,
+              }
+            }
+          />
          <Connect(Markdown)
            baseTextStyle={
              Object {
@ -1081,10 +1493,11 @@ exports[`channel_info_header should match snapshot when GM and hasGuests 1`] = `
                  "color": "#2389d7",
                },
                "mention": Object {
-                  "color": "#2389d7",
+                  "color": "#166de0",
                },
                "mention_highlight": Object {
                  "backgroundColor": "#ffe577",
+                  "color": "#166de0",
                },
                "strong": Object {
                  "fontWeight": "bold",
@ -1228,10 +1641,11 @@ exports[`channel_info_header should match snapshot when GM and hasGuests 1`] = `
                  "color": "#2389d7",
                },
                "mention": Object {
-                  "color": "#2389d7",
+                  "color": "#166de0",
                },
                "mention_highlight": Object {
                  "backgroundColor": "#ffe577",
+                  "color": "#166de0",
                },
                "strong": Object {
                  "fontWeight": "bold",
@ -1489,10 +1903,11 @@ exports[`channel_info_header should match snapshot when is group constrained 1`]
                  "color": "#2389d7",
                },
                "mention": Object {
-                  "color": "#2389d7",
+                  "color": "#166de0",
                },
                "mention_highlight": Object {
                  "backgroundColor": "#ffe577",
+                  "color": "#166de0",
                },
                "strong": Object {
                  "fontWeight": "bold",
@ -1636,10 +2051,11 @@ exports[`channel_info_header should match snapshot when is group constrained 1`]
                  "color": "#2389d7",
                },
                "mention": Object {
-                  "color": "#2389d7",
+                  "color": "#166de0",
                },
                "mention_highlight": Object {
                  "backgroundColor": "#ffe577",
+                  "color": "#166de0",
                },
                "strong": Object {
                  "fontWeight": "bold",
@ -1946,10 +2362,11 @@ exports[`channel_info_header should match snapshot when public channel and hasGu
                  "color": "#2389d7",
                },
                "mention": Object {
-                  "color": "#2389d7",
+                  "color": "#166de0",
                },
                "mention_highlight": Object {
                  "backgroundColor": "#ffe577",
+                  "color": "#166de0",
                },
                "strong": Object {
                  "fontWeight": "bold",
@ -2093,10 +2510,11 @@ exports[`channel_info_header should match snapshot when public channel and hasGu
                  "color": "#2389d7",
                },
                "mention": Object {
-                  "color": "#2389d7",
+                  "color": "#166de0",
                },
                "mention_highlight": Object {
                  "backgroundColor": "#ffe577",
+                  "color": "#166de0",
                },
                "strong": Object {
                  "fontWeight": "bold",
--- a/app/screens/channel_info/channel_info.js
+++ b/app/screens/channel_info/channel_info.js
@ -64,6 +64,7 @@ export default class ChannelInfo extends PureComponent {
        canEditChannel: PropTypes.bool.isRequired,
        ignoreChannelMentions: PropTypes.bool.isRequired,
        isBot: PropTypes.bool.isRequired,
+        isTeammateGuest: PropTypes.bool.isRequired,
        isLandscape: PropTypes.bool.isRequired,
    };

@ -559,6 +560,7 @@ export default class ChannelInfo extends PureComponent {
            status,
            theme,
            isBot,
+            isTeammateGuest,
            isLandscape,
        } = this.props;

@ -598,6 +600,7 @@ export default class ChannelInfo extends PureComponent {
                        type={currentChannel.type}
                        isArchived={currentChannel.delete_at !== 0}
                        isBot={isBot}
+                        isTeammateGuest={isTeammateGuest}
                        hasGuests={currentChannelGuestCount > 0}
                        isGroupConstrained={currentChannel.group_constrained}
                    />
--- a/app/screens/channel_info/channel_info.test.js
+++ b/app/screens/channel_info/channel_info.test.js
@ -60,6 +60,7 @@ describe('channel_info', () => {
        status: 'status',
        theme: Preferences.THEMES.default,
        isBot: false,
+        isTeammateGuest: false,
        isLandscape: false,
        actions: {
            clearPinnedPosts: jest.fn(),
--- a/app/screens/channel_info/channel_info_header.js
+++ b/app/screens/channel_info/channel_info_header.js
@ -40,6 +40,7 @@ export default class ChannelInfoHeader extends React.PureComponent {
        type: PropTypes.string.isRequired,
        isArchived: PropTypes.bool.isRequired,
        isBot: PropTypes.bool.isRequired,
+        isTeammateGuest: PropTypes.bool.isRequired,
        hasGuests: PropTypes.bool.isRequired,
        isGroupConstrained: PropTypes.bool,
        timeZone: PropTypes.string,
@ -50,10 +51,13 @@ export default class ChannelInfoHeader extends React.PureComponent {
    };

    renderHasGuestText = (style) => {
-        const {type, hasGuests} = this.props;
+        const {type, hasGuests, isTeammateGuest} = this.props;
        if (!hasGuests) {
            return null;
        }
+        if (type === General.DM_CHANNEL && !isTeammateGuest) {
+            return null;
+        }

        let messageId;
        let defaultMessage;
--- a/app/screens/channel_info/channel_info_header.test.js
+++ b/app/screens/channel_info/channel_info_header.test.js
@ -40,6 +40,7 @@ describe('channel_info_header', () => {
        type: General.OPEN_CHANNEL,
        isArchived: false,
        isBot: false,
+        isTeammateGuest: false,
        hasGuests: false,
        isGroupConstrained: false,
    };
@ -76,12 +77,26 @@ describe('channel_info_header', () => {
        expect(wrapper.getElement()).toMatchSnapshot();
    });

-    test('should match snapshot when DM and hasGuests', async () => {
+    test('should match snapshot when DM and hasGuests but its me and not the teammate', async () => {
        const wrapper = shallow(
            <ChannelInfoHeader
                {...baseProps}
                type={General.DM_CHANNEL}
                hasGuests={true}
+                isTeammateGuest={false}
+            />,
+            {context: {intl: intlMock}},
+        );
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+
+    test('should match snapshot when DM and hasGuests and is the teammate', async () => {
+        const wrapper = shallow(
+            <ChannelInfoHeader
+                {...baseProps}
+                type={General.DM_CHANNEL}
+                hasGuests={true}
+                isTeammateGuest={true}
            />,
            {context: {intl: intlMock}},
        );
--- a/app/screens/channel_info/index.js
+++ b/app/screens/channel_info/index.js
@ -71,6 +71,7 @@ function mapStateToProps(state) {

    let status;
    let isBot = false;
+    let isTeammateGuest = false;
    if (currentChannel.type === General.DM_CHANNEL) {
        const teammateId = getUserIdFromChannelName(currentUserId, currentChannel.name);
        const teammate = getUser(state, teammateId);
@ -79,6 +80,7 @@ function mapStateToProps(state) {
            isBot = true;
        }
        if (isGuest(teammate)) {
+            isTeammateGuest = true;
            currentChannelGuestCount = 1;
        }
    }
@ -116,6 +118,7 @@ function mapStateToProps(state) {
        theme: getTheme(state),
        canManageUsers,
        isBot,
+        isTeammateGuest,
        isLandscape: isLandscape(state),
        timeZone,
    };
--- a/app/screens/interactive_dialog/snapshots/dialog_introduction_text.test.js.snap
+++ b/app/screens/interactive_dialog/snapshots/dialog_introduction_text.test.js.snap
@ -109,10 +109,11 @@ exports[`DialogIntroductionText should render the introduction text correctly 1`
          "color": "#2389d7",
        },
        "mention": Object {
-          "color": "#2389d7",
+          "color": "#166de0",
        },
        "mention_highlight": Object {
          "backgroundColor": "#ffe577",
+          "color": "#166de0",
        },
        "strong": Object {
          "fontWeight": "bold",
--- a/app/screens/search/search.js
+++ b/app/screens/search/search.js
@ -109,7 +109,7 @@ export default class Search extends PureComponent {
        }

        setTimeout(() => {
-            if (this.refs.searchBar) {
+            if (this.refs.searchBar && !this.props.initialValue) {
                this.refs.searchBar.focus();
            }
        }, 150);
@ -840,4 +840,3 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
        },
    };
 });
-
--- a/app/screens/settings/notification_settings_mentions_keywords/snapshots/notification_settings_mentions_keywords.test.js.snap
+++ b/app/screens/settings/notification_settings_mentions_keywords/snapshots/notification_settings_mentions_keywords.test.js.snap
@ -209,6 +209,7 @@ NotificationSettingsMentionsKeywords {
                    "color": "#3d3c40",
                    "fontSize": 15,
                    "height": 150,
+                    "paddingHorizontal": 15,
                    "paddingVertical": 10,
                  },
                  null,
--- a/app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.js
+++ b/app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.js
@ -127,6 +127,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
            fontSize: 15,
            height: 150,
            paddingVertical: 10,
+            paddingHorizontal: 15,
        },
        helpContainer: {
            marginTop: 10,
--- a/app/screens/terms_of_service/snapshots/terms_of_service.test.js.snap
+++ b/app/screens/terms_of_service/snapshots/terms_of_service.test.js.snap
@ -115,10 +115,11 @@ exports[`TermsOfService should enable/disable navigator buttons on setNavigatorB
            "color": "#2389d7",
          },
          "mention": Object {
-            "color": "#2389d7",
+            "color": "#166de0",
          },
          "mention_highlight": Object {
            "backgroundColor": "#ffe577",
+            "color": "#166de0",
          },
          "strong": Object {
            "fontWeight": "bold",
@ -249,10 +250,11 @@ exports[`TermsOfService should enable/disable navigator buttons on setNavigatorB
            "color": "#2389d7",
          },
          "mention": Object {
-            "color": "#2389d7",
+            "color": "#166de0",
          },
          "mention_highlight": Object {
            "backgroundColor": "#ffe577",
+            "color": "#166de0",
          },
          "strong": Object {
            "fontWeight": "bold",
@ -447,10 +449,11 @@ exports[`TermsOfService should match snapshot on enableNavigatorLogout 1`] = `
            "color": "#2389d7",
          },
          "mention": Object {
-            "color": "#2389d7",
+            "color": "#166de0",
          },
          "mention_highlight": Object {
            "backgroundColor": "#ffe577",
+            "color": "#166de0",
          },
          "strong": Object {
            "fontWeight": "bold",
--- a/app/utils/markdown.js
+++ b/app/utils/markdown.js
@ -81,7 +81,7 @@ export const getMarkdownTextStyles = makeStyleSheetFromTheme((theme) => {
            fontFamily: codeFont,
        },
        mention: {
-            color: theme.linkColor,
+            color: theme.mentionHighlightLink,
        },
        error: {
            color: theme.errorTextColor,
@ -91,6 +91,7 @@ export const getMarkdownTextStyles = makeStyleSheetFromTheme((theme) => {
        },
        mention_highlight: {
            backgroundColor: theme.mentionHighlightBg,
+            color: theme.mentionHighlightLink,
        },
    };
 });
--- a/ios/Mattermost.xcodeproj/project.pbxproj
+++ b/ios/Mattermost.xcodeproj/project.pbxproj
@ -2856,7 +2856,7 @@
 				CODE_SIGN_ENTITLEMENTS = Mattermost/Mattermost.entitlements;
 				CODE_SIGN_IDENTITY = "iPhone Developer";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
-				CURRENT_PROJECT_VERSION = 236;
+				CURRENT_PROJECT_VERSION = 238;
 				DEAD_CODE_STRIPPING = NO;
 				DEVELOPMENT_TEAM = UQ8HT4Q2XM;
 				ENABLE_BITCODE = NO;
@ -2917,7 +2917,7 @@
 				CODE_SIGN_ENTITLEMENTS = Mattermost/Mattermost.entitlements;
 				CODE_SIGN_IDENTITY = "iPhone Developer";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
-				CURRENT_PROJECT_VERSION = 236;
+				CURRENT_PROJECT_VERSION = 238;
 				DEAD_CODE_STRIPPING = NO;
 				DEVELOPMENT_TEAM = UQ8HT4Q2XM;
 				ENABLE_BITCODE = NO;
--- a/ios/Mattermost/Info.plist
+++ b/ios/Mattermost/Info.plist
@ -34,7 +34,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>236</string>
+	<string>238</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSRequiresIPhoneOS</key>
--- a/ios/MattermostShare/Info.plist
+++ b/ios/MattermostShare/Info.plist
@ -19,7 +19,7 @@
 	<key>CFBundleShortVersionString</key>
 	<string>1.24.0</string>
 	<key>CFBundleVersion</key>
-	<string>236</string>
+	<string>238</string>
 	<key>NSAppTransportSecurity</key>
 	<dict>
 		<key>NSAllowsArbitraryLoads</key>
--- a/ios/MattermostTests/Info.plist
+++ b/ios/MattermostTests/Info.plist
@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>236</string>
+	<string>238</string>
 </dict>
 </plist>
--- a/ios/NotificationService/Info.plist
+++ b/ios/NotificationService/Info.plist
@ -19,7 +19,7 @@
 	<key>CFBundleShortVersionString</key>
 	<string>1.24.0</string>
 	<key>CFBundleVersion</key>
-	<string>236</string>
+	<string>238</string>
 	<key>NSExtension</key>
 	<dict>
 		<key>NSExtensionPointIdentifier</key>
--- a/package-lock.json
+++ b/package-lock.json
@ -5541,6 +5541,21 @@
        }
      }
    },
+    "character-entities": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.3.tgz",
+      "integrity": "sha512-yB4oYSAa9yLcGyTbB4ItFwHw43QHdH129IJ5R+WvxOkWlyFnR5FAaBNnUq4mcxsTVZGh28bHoeTHMKXH1wZf3w=="
+    },
+    "character-entities-legacy": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.3.tgz",
+      "integrity": "sha512-YAxUpPoPwxYFsslbdKkhrGnXAtXoHNgYjlBM3WMXkWGTl5RsY3QmOyhwAgL8Nxm9l5LBThXGawxKPn68y6/fww=="
+    },
+    "character-reference-invalid": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.3.tgz",
+      "integrity": "sha512-VOq6PRzQBam/8Jm6XBGk2fNEnHXAdGd6go0rtd4weAGECBamHDwwCQSOT12TACIYUZegUXnV6xBXqUssijtxIg=="
+    },
    "chardet": {
      "version": "0.4.2",
      "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz",
@ -5758,6 +5773,17 @@
      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz",
      "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk="
    },
+    "clipboard": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz",
+      "integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==",
+      "optional": true,
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
    "cliui": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
@ -5840,6 +5866,11 @@
        "delayed-stream": "~1.0.0"
      }
    },
+    "comma-separated-tokens": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.7.tgz",
+      "integrity": "sha512-Jrx3xsP4pPv4AwJUDWY9wOXGtwPXARej6Xd99h4TUGotmf8APuquKMpK+dnD3UgyxK7OEWaisjZz+3b5jtL6xQ=="
+    },
    "commander": {
      "version": "2.19.0",
      "resolved": "https://registry.npmjs.org/commander/-/commander-2.19.0.tgz",
@ -6312,6 +6343,12 @@
      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
    },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+      "optional": true
+    },
    "delegates": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@ -7524,6 +7561,14 @@
      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
      "dev": true
    },
+    "fault": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.3.tgz",
+      "integrity": "sha512-sfFuP4X0hzrbGKjAUNXYvNqsZ5F6ohx/dZ9I0KQud/aiZNwg263r5L9yGB0clvXHCkzXh5W3t7RSHchggYIFmA==",
+      "requires": {
+        "format": "^0.2.2"
+      }
+    },
    "fb-watchman": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.0.tgz",
@ -8378,6 +8423,11 @@
        "mime-types": "^2.1.12"
      }
    },
+    "format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs="
+    },
    "fragment-cache": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
@ -9132,6 +9182,15 @@
      "resolved": "https://registry.npmjs.org/globals/-/globals-11.9.0.tgz",
      "integrity": "sha512-5cJVtyXWH8PiJPVLZzzoIizXx944O4OmRro5MWKx5fT4MgcN7OfaMutPeaTdJCCURwbWdhhcCWcKIffPnmTzBg=="
    },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "optional": true,
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
    "got": {
      "version": "6.7.1",
      "resolved": "https://registry.npmjs.org/got/-/got-6.7.1.tgz",
@ -9170,9 +9229,9 @@
      "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE="
    },
    "handlebars": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.2.tgz",
-      "integrity": "sha512-nvfrjqvt9xQ8Z/w0ijewdD/vvWDTOweBUm96NTr66Wfvo1mJenBLwcYmPs3TIBP5ruzYGD7Hx/DaM9RmhroGPw==",
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.4.2.tgz",
+      "integrity": "sha512-cIv17+GhL8pHHnRJzGu2wwcthL5sb8uDKBHvZ2Dtu5s1YNt0ljbzKbamnc+gr69y7bzwQiBdr5+hOpRd5pnOdg==",
      "dev": true,
      "requires": {
        "neo-async": "^2.6.0",
@ -9195,13 +9254,13 @@
          "dev": true
        },
        "uglify-js": {
-          "version": "3.5.10",
-          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.5.10.tgz",
-          "integrity": "sha512-/GTF0nosyPLbdJBd+AwYiZ+Hu5z8KXWnO0WCGt1BQ/u9Iamhejykqmz5o1OHJ53+VAk6xVxychonnApDjuqGsw==",
+          "version": "3.6.1",
+          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.6.1.tgz",
+          "integrity": "sha512-+dSJLJpXBb6oMHP+Yvw8hUgElz4gLTh82XuX68QiJVTXaE5ibl6buzhNkQdYhBlIhozWOC9ge16wyRmjG4TwVQ==",
          "dev": true,
          "optional": true,
          "requires": {
-            "commander": "~2.20.0",
+            "commander": "2.20.0",
            "source-map": "~0.6.1"
          }
        }
@ -9324,6 +9383,27 @@
        "is-stream": "^1.0.1"
      }
    },
+    "hast-util-parse-selector": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.2.tgz",
+      "integrity": "sha512-jIMtnzrLTjzqgVEQqPEmwEZV+ea4zHRFTP8Z2Utw0I5HuBOXHzUPPQWr6ouJdJqDKLbFU/OEiYwZ79LalZkmmw=="
+    },
+    "hastscript": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-5.1.0.tgz",
+      "integrity": "sha512-7mOQX5VfVs/gmrOGlN8/EDfp1GqV6P3gTNVt+KnX4gbYhpASTM8bklFdFQCbFRAadURXAmw0R1QQdBdqp7jswQ==",
+      "requires": {
+        "comma-separated-tokens": "^1.0.0",
+        "hast-util-parse-selector": "^2.2.0",
+        "property-information": "^5.0.1",
+        "space-separated-tokens": "^1.0.0"
+      }
+    },
+    "highlight.js": {
+      "version": "9.12.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz",
+      "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4="
+    },
    "hoist-non-react-statics": {
      "version": "2.5.5",
      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
@ -9682,6 +9762,20 @@
        }
      }
    },
+    "is-alphabetical": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.3.tgz",
+      "integrity": "sha512-eEMa6MKpHFzw38eKm56iNNi6GJ7lf6aLLio7Kr23sJPAECscgRtZvOBYybejWDQ2bM949Y++61PY+udzj5QMLA=="
+    },
+    "is-alphanumerical": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.3.tgz",
+      "integrity": "sha512-A1IGAPO5AW9vSh7omxIlOGwIqEvpW/TA+DksVOPM5ODuxKlZS09+TEM1E3275lJqO2oJ38vDpeAL3DCIiHE6eA==",
+      "requires": {
+        "is-alphabetical": "^1.0.0",
+        "is-decimal": "^1.0.0"
+      }
+    },
    "is-arrayish": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@ -9755,6 +9849,11 @@
      "integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=",
      "dev": true
    },
+    "is-decimal": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.3.tgz",
+      "integrity": "sha512-bvLSwoDg2q6Gf+E2LEPiklHZxxiSi3XAh4Mav65mKqTfCO1HM3uBs24TjEH8iJX3bbDdLXKJXBTmGzuTUuAEjQ=="
+    },
    "is-descriptor": {
      "version": "0.1.6",
      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
@ -9819,6 +9918,11 @@
        "is-extglob": "^1.0.0"
      }
    },
+    "is-hexadecimal": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.3.tgz",
+      "integrity": "sha512-zxQ9//Q3D/34poZf8fiy3m3XVpbQc7ren15iKqrTtLPwkPD/t3Scy9Imp63FujULGxuK0ZlCwoo5xNpktFgbOA=="
+    },
    "is-installed-globally": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.1.0.tgz",
@ -13974,6 +14078,15 @@
      "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==",
      "dev": true
    },
+    "lowlight": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.9.2.tgz",
+      "integrity": "sha512-Ek18ElVCf/wF/jEm1b92gTnigh94CtBNWiZ2ad+vTgW7cTmQxUY3I98BjHK68gZAJEWmybGBZgx9qv3QxLQB/Q==",
+      "requires": {
+        "fault": "^1.0.2",
+        "highlight.js": "~9.12.0"
+      }
+    },
    "lru-cache": {
      "version": "4.1.3",
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.3.tgz",
@ -14941,9 +15054,9 @@
      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
    },
    "neo-async": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.0.tgz",
-      "integrity": "sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA==",
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.1.tgz",
+      "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
      "dev": true
    },
    "nested-error-stacks": {
@ -15723,6 +15836,19 @@
        }
      }
    },
+    "parse-entities": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-1.2.2.tgz",
+      "integrity": "sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==",
+      "requires": {
+        "character-entities": "^1.0.0",
+        "character-entities-legacy": "^1.0.0",
+        "character-reference-invalid": "^1.0.0",
+        "is-alphanumerical": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-hexadecimal": "^1.0.0"
+      }
+    },
    "parse-glob": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz",
@ -16056,6 +16182,14 @@
        }
      }
    },
+    "prismjs": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.17.1.tgz",
+      "integrity": "sha512-PrEDJAFdUGbOP6xK/UsfkC5ghJsPJviKgnQOoxaDbBjwc8op68Quupwt1DeAFoG8GImPhiKXAvvsH7wDSLsu1Q==",
+      "requires": {
+        "clipboard": "^2.0.0"
+      }
+    },
    "private": {
      "version": "0.1.8",
      "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@ -16134,6 +16268,14 @@
        "retry": "^0.10.0"
      }
    },
+    "property-information": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.3.0.tgz",
+      "integrity": "sha512-IslotQn1hBCZDY7SaJ3zmCjVea219VTwmOk6Pu3z9haU9m4+T8GwaDubur+6NMHEU+Fjs/6/p66z6QULPkcL1w==",
+      "requires": {
+        "xtend": "^4.0.1"
+      }
+    },
    "proxy-from-env": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.0.0.tgz",
@ -16519,6 +16661,16 @@
      "resolved": "https://registry.npmjs.org/react-native-exception-handler/-/react-native-exception-handler-2.10.7.tgz",
      "integrity": "sha512-e2zv0BiP9SRdr1vLDUyC2WbWHfgNV1a3BhRxK1ENjXVRY8mu+dfaaIHhFXdvYue//MEuGUQstu61NZoiO1u2KA=="
    },
+    "react-native-gesture-handler": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.3.0.tgz",
+      "integrity": "sha512-ASRFIXBuKRvqlmwkWJhV8yP2dTpvcqVrLNpd7FKVBFHYWr6SAxjGyO9Ik8w1lAxDhMlRP2IcJ9p9eq5X2WWeLQ==",
+      "requires": {
+        "hoist-non-react-statics": "^2.3.1",
+        "invariant": "^2.2.2",
+        "prop-types": "^15.5.10"
+      }
+    },
    "react-native-haptic-feedback": {
      "version": "1.8.2",
      "resolved": "https://registry.npmjs.org/react-native-haptic-feedback/-/react-native-haptic-feedback-1.8.2.tgz",
@ -16675,6 +16827,14 @@
      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-9.4.0.tgz",
      "integrity": "sha512-IVJlVbS2dAPerPr927fEi4uXzrPXzlra5ddgyJXZZ2IKA2ZygyYWFZDM+vsQs+Vj20CfL8nOWszQQV57vdQgFg=="
    },
+    "react-native-syntax-highlighter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-native-syntax-highlighter/-/react-native-syntax-highlighter-2.1.0.tgz",
+      "integrity": "sha512-upu8gpKT2ZeslXn2d763KwtzzhM9OUHGgJjIKKIUw1JnFAzVwQmKCaFGoI6PkQa7T1LVggBW5k5VoaLFhZDb+g==",
+      "requires": {
+        "react-syntax-highlighter": "^6.0.4"
+      }
+    },
    "react-native-tab-view": {
      "version": "1.3.5",
      "resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-1.3.5.tgz",
@ -16975,6 +17135,18 @@
        }
      }
    },
+    "react-syntax-highlighter": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-6.1.2.tgz",
+      "integrity": "sha512-ahNwcZ0FhUd8U5TQYcmAqC/pec6Q308mUAATKMcLFmNYkvGhN9wfmoqxzjACcccGb2e85d5ZnGpOiCIIzGO3yA==",
+      "requires": {
+        "babel-runtime": "^6.18.0",
+        "highlight.js": "~9.12.0",
+        "lowlight": "~1.9.1",
+        "prismjs": "^1.8.4",
+        "refractor": "^2.0.0"
+      }
+    },
    "react-test-renderer": {
      "version": "16.8.6",
      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.8.6.tgz",
@ -17473,6 +17645,16 @@
      "integrity": "sha1-dJrO7H8/34tj+SegSAnpDFwLNGA=",
      "dev": true
    },
+    "refractor": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/refractor/-/refractor-2.10.0.tgz",
+      "integrity": "sha512-maW2ClIkm9IYruuFYGTqKzj+m31heq92wlheW4h7bOstP+gf8bocmMec+j7ljLcaB1CAID85LMB3moye31jH1g==",
+      "requires": {
+        "hastscript": "^5.0.0",
+        "parse-entities": "^1.1.2",
+        "prismjs": "~1.17.0"
+      }
+    },
    "regenerate": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@ -18292,6 +18474,12 @@
        "object-assign": "^4.1.1"
      }
    },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
+      "optional": true
+    },
    "semver": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/semver/-/semver-6.0.0.tgz",
@ -18851,6 +19039,11 @@
      "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz",
      "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM="
    },
+    "space-separated-tokens": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.4.tgz",
+      "integrity": "sha512-UyhMSmeIqZrQn2UdjYpxEkwY9JUrn8pP+7L4f91zRzOQuI8MF1FGLfYU9DKCYeLdo7LXMxwrX5zKFy7eeeVHuA=="
+    },
    "spawn-wrap": {
      "version": "1.4.2",
      "resolved": "https://registry.npmjs.org/spawn-wrap/-/spawn-wrap-1.4.2.tgz",
@ -19363,6 +19556,12 @@
      "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=",
      "dev": true
    },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+      "optional": true
+    },
    "tinycolor2": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",