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" > - + > + + + + `; 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}} > - + + + + + ); @@ -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,