From 05f5b3181537ec65e92b2434535fc2876e7deb6e Mon Sep 17 00:00:00 2001
From: Mattermost Build <build@mattermost.com>
Date: Wed, 27 Nov 2019 20:23:33 +0100
Subject: [PATCH] Automated cherry pick of #3608 (#3620)

* MM-20326 - Updating markdown table css

* Updating UI

* MM-20326 - Updating markdown table css
---
 .../__snapshots__/markdown_table.test.js.snap | 64 +++++++++++++------
 .../markdown/markdown_table/markdown_table.js | 53 +++++++++++----
 2 files changed, 86 insertions(+), 31 deletions(-)

diff --git a/app/components/markdown/markdown_table/__snapshots__/markdown_table.test.js.snap b/app/components/markdown/markdown_table/__snapshots__/markdown_table.test.js.snap
index f47e327e9..cd6d30b2e 100644
--- a/app/components/markdown/markdown_table/__snapshots__/markdown_table.test.js.snap
+++ b/app/components/markdown/markdown_table/__snapshots__/markdown_table.test.js.snap
@@ -41,6 +41,7 @@ exports[`MarkdownTable should match snapshot 1`] = `
             "borderColor": "rgba(61,60,64,0.2)",
             "borderLeftWidth": 1,
             "borderTopWidth": 1,
+            "width": "100%",
           },
         ]
       }
@@ -147,31 +148,58 @@ exports[`MarkdownTable should match snapshot 1`] = `
     onPress={[Function]}
     style={
       Object {
-        "backgroundColor": "#ffffff",
-        "borderColor": "rgba(61,60,64,0.2)",
-        "borderRadius": 15,
-        "borderWidth": 1,
-        "bottom": 20,
-        "height": 30,
+        "height": 34,
         "left": -20,
-        "paddingLeft": 7,
-        "paddingTop": 6,
-        "width": 30,
+        "width": 34,
       }
     }
     type="native"
   >
-    <Icon
-      allowFontScaling={false}
-      name="expand"
-      size={12}
+    <View
       style={
-        Object {
-          "color": "#2389d7",
-          "fontSize": 15,
-        }
+        Array [
+          Object {
+            "alignItems": "flex-end",
+            "maxWidth": "100%",
+            "paddingBottom": 4,
+            "paddingRight": 14,
+            "paddingTop": 8,
+          },
+          Object {
+            "width": 1000,
+          },
+        ]
       }
-    />
+    >
+      <View
+        style={
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "#ffffff",
+            "borderColor": "rgba(61,60,64,0.2)",
+            "borderRadius": 50,
+            "borderWidth": 1,
+            "height": 34,
+            "justifyContent": "center",
+            "marginRight": -6,
+            "marginTop": -32,
+            "width": 34,
+          }
+        }
+      >
+        <Icon
+          allowFontScaling={false}
+          name="expand"
+          size={12}
+          style={
+            Object {
+              "color": "#2389d7",
+              "fontSize": 13,
+            }
+          }
+        />
+      </View>
+    </View>
   </TouchableWithFeedbackIOS>
 </TouchableWithFeedbackIOS>
 `;
diff --git a/app/components/markdown/markdown_table/markdown_table.js b/app/components/markdown/markdown_table/markdown_table.js
index a6f1cac18..ada8309f5 100644
--- a/app/components/markdown/markdown_table/markdown_table.js
+++ b/app/components/markdown/markdown_table/markdown_table.js
@@ -6,6 +6,7 @@ import React from 'react';
 import {intlShape} from 'react-intl';
 import {
     ScrollView,
+    Platform,
     View,
     Dimensions,
 } from 'react-native';
@@ -179,10 +180,14 @@ export default class MarkdownTable extends React.PureComponent {
                 onPress={this.handlePress}
                 style={{...style.expandButton, left: this.state.containerWidth - 20}}
             >
-                <Icon
-                    name={'expand'}
-                    style={style.icon}
-                />
+                <View style={[style.iconContainer, {width: this.getTableWidth()}]}>
+                    <View style={style.iconButton}>
+                        <Icon
+                            name={'expand'}
+                            style={style.icon}
+                        />
+                    </View>
+                </View>
             </TouchableWithFeedback>
         );
 
@@ -219,21 +224,43 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             maxHeight: MAX_HEIGHT,
         },
         expandButton: {
-            height: 30,
-            width: 30,
-            borderWidth: 1,
-            paddingTop: 6,
-            paddingLeft: 7,
-            borderColor: changeOpacity(theme.centerChannelColor, 0.2),
-            borderRadius: 15,
-            bottom: 20,
+            height: 34,
+            width: 34,
+        },
+        iconContainer: {
+            maxWidth: '100%',
+            alignItems: 'flex-end',
+            paddingTop: 8,
+            paddingBottom: 4,
+            ...Platform.select({
+                ios: {
+                    paddingRight: 14,
+                },
+            }),
+        },
+        iconButton: {
             backgroundColor: theme.centerChannelBg,
+            marginTop: -32,
+            marginRight: -6,
+            borderWidth: 1,
+            borderRadius: 50,
+            borderColor: changeOpacity(theme.centerChannelColor, 0.2),
+            width: 34,
+            height: 34,
+            alignItems: 'center',
+            justifyContent: 'center',
         },
         icon: {
-            fontSize: 15,
+            fontSize: 14,
             color: theme.linkColor,
+            ...Platform.select({
+                ios: {
+                    fontSize: 13,
+                },
+            }),
         },
         table: {
+            width: '100%',
             borderColor: changeOpacity(theme.centerChannelColor, 0.2),
             borderLeftWidth: 1,
             borderTopWidth: 1,