diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js index a7783449a473..478b03b40f0d 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js @@ -5,6 +5,8 @@ import withLocalize, {withLocalizePropTypes} from '../../withLocalize'; import Text from '../../Text'; import variables from '../../../styles/variables'; import themeColors from '../../../styles/themes/default'; +import styles from '../../../styles/styles'; +import editedLabelStyles from '../../../styles/editedLabelStyles'; const propTypes = { ...htmlRendererPropTypes, @@ -19,8 +21,16 @@ const EditedRenderer = (props) => { {...defaultRendererProps} fontSize={variables.fontSizeSmall} color={themeColors.textSupporting} + style={[styles.alignItemsBaseline, editedLabelStyles]} > - {` ${props.translate('reportActionCompose.edited')}`} + {/* Native devices do not support margin between nested text */} + + {' '} + + {props.translate('reportActionCompose.edited')} ); }; diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index c2c342e332ac..26f9a6d8980b 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -356,6 +356,15 @@ class ReportActionItem extends Component { {(hovered) => ( {this.props.shouldDisplayNewMarker && } + - )} diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js index edd17118ef34..e134c327df55 100644 --- a/src/pages/home/report/ReportActionItemFragment.js +++ b/src/pages/home/report/ReportActionItemFragment.js @@ -18,6 +18,7 @@ import convertToLTR from '../../../libs/convertToLTR'; import {withNetwork} from '../../../components/OnyxProvider'; import CONST from '../../../CONST'; import applyStrikethrough from '../../../components/HTMLEngineProvider/applyStrikethrough'; +import editedLabelStyles from '../../../styles/editedLabelStyles'; const propTypes = { /** The message fragment needing to be displayed */ @@ -124,8 +125,15 @@ const ReportActionItemFragment = (props) => { - {` ${props.translate('reportActionCompose.edited')}`} + + {' '} + + {props.translate('reportActionCompose.edited')} )} diff --git a/src/styles/editedLabelStyles/index.js b/src/styles/editedLabelStyles/index.js new file mode 100644 index 000000000000..172dcc152b74 --- /dev/null +++ b/src/styles/editedLabelStyles/index.js @@ -0,0 +1,3 @@ +import display from '../utilities/display'; + +export default {...display.dInlineFlex}; diff --git a/src/styles/editedLabelStyles/index.native.js b/src/styles/editedLabelStyles/index.native.js new file mode 100644 index 000000000000..ff8b4c56321a --- /dev/null +++ b/src/styles/editedLabelStyles/index.native.js @@ -0,0 +1 @@ +export default {}; diff --git a/src/styles/utilities/display.js b/src/styles/utilities/display.js index 9e7e4107a937..bcef1c6b565f 100644 --- a/src/styles/utilities/display.js +++ b/src/styles/utilities/display.js @@ -20,6 +20,11 @@ export default { dInline: { display: 'inline', }, + + dInlineFlex: { + display: 'inline-flex', + }, + dBlock: { display: 'block', },