From 1af0263e9d39058f1ba63234b836e130f8e0bd6a Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 2 May 2023 08:36:31 -0600 Subject: [PATCH 1/4] Reference actorEmail instead --- src/pages/home/report/ReportActionItemSingle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js index e1a77f244c32..db9e4c813290 100644 --- a/src/pages/home/report/ReportActionItemSingle.js +++ b/src/pages/home/report/ReportActionItemSingle.js @@ -96,7 +96,7 @@ const ReportActionItemSingle = (props) => { ) : ( From 77fa5f848d1cd84c8d437e3be27e7649266bc350 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 2 May 2023 09:08:12 -0600 Subject: [PATCH 2/4] Prevent margin in chat view --- src/components/MultipleAvatars.js | 4 +- src/components/OptionRow.js | 1 - src/components/SubscriptAvatar.js | 63 ++++++++++++------- .../home/report/ReportActionItemSingle.js | 1 + src/styles/styles.js | 9 ++- 5 files changed, 51 insertions(+), 27 deletions(-) diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index e617a7c94564..7eec7147747c 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -55,7 +55,9 @@ const defaultProps = { }; const MultipleAvatars = (props) => { - let avatarContainerStyles = props.size === CONST.AVATAR_SIZE.SMALL ? styles.emptyAvatarSmall : styles.emptyAvatar; + let avatarContainerStyles = props.size === CONST.AVATAR_SIZE.SMALL + ? [styles.emptyAvatarSmall, styles.emptyAvatarMarginSmall] + : [styles.emptyAvatar, styles.emptyAvatarMargin]; const singleAvatarStyles = props.size === CONST.AVATAR_SIZE.SMALL ? styles.singleAvatarSmall : styles.singleAvatar; const secondAvatarStyles = [ props.size === CONST.AVATAR_SIZE.SMALL ? styles.secondAvatarSmall : styles.secondAvatar, diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js index dcfc7e3ca382..d5e5115d9ef2 100644 --- a/src/components/OptionRow.js +++ b/src/components/OptionRow.js @@ -207,7 +207,6 @@ class OptionRow extends Component { secondaryAvatar={this.props.option.icons[1]} mainTooltip={this.props.option.ownerEmail} secondaryTooltip={this.props.option.subtitle} - size={CONST.AVATAR_SIZE.DEFAULT} backgroundColor={ hovered && !this.props.optionIsFocused ? hoveredBackgroundColor diff --git a/src/components/SubscriptAvatar.js b/src/components/SubscriptAvatar.js index 6da3e918fec4..4d20785af455 100644 --- a/src/components/SubscriptAvatar.js +++ b/src/components/SubscriptAvatar.js @@ -28,6 +28,9 @@ const propTypes = { /** Background color used for subscript avatar border */ backgroundColor: PropTypes.string, + + /** Removes margin from around the avatar, used for the chat view */ + noMargin: PropTypes.bool, }; const defaultProps = { @@ -37,36 +40,48 @@ const defaultProps = { backgroundColor: themeColors.componentBG, mainAvatar: {}, secondaryAvatar: {}, + noMargin: false, }; -const SubscriptAvatar = props => ( - - - - - - +const SubscriptAvatar = (props) => { + const containerStyle = props.size === CONST.AVATAR_SIZE.SMALL ? styles.emptyAvatarSmall : styles.emptyAvatar; + + // Default the margin style to what is normal for small or normal sized avatars + let marginStyle = props.size === CONST.AVATAR_SIZE.SMALL ? styles.emptyAvatarMargin : styles.emptyAvatarMarginSmall; + + // Some views like the chat view require that there be no margins + if (props.noMargin) { + marginStyle = null; + } + return ( + + + + + + + - -); + ); +}; SubscriptAvatar.displayName = 'SubscriptAvatar'; SubscriptAvatar.propTypes = propTypes; diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js index db9e4c813290..9d8588ccc196 100644 --- a/src/pages/home/report/ReportActionItemSingle.js +++ b/src/pages/home/report/ReportActionItemSingle.js @@ -98,6 +98,7 @@ const ReportActionItemSingle = (props) => { secondaryAvatar={ReportUtils.getIcons(props.report, {})[0]} mainTooltip={actorEmail} secondaryTooltip={ReportUtils.getReportName(props.report)} + noMargin /> ) : ( diff --git a/src/styles/styles.js b/src/styles/styles.js index 8f22d7de08a8..6e7ea631daa8 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1816,7 +1816,6 @@ const styles = { }, emptyAvatar: { - marginRight: variables.avatarChatSpacing, height: variables.avatarSizeNormal, width: variables.avatarSizeNormal, }, @@ -1827,6 +1826,14 @@ const styles = { width: variables.avatarSizeSmall, }, + emptyAvatarMargin: { + marginRight: variables.avatarChatSpacing, + }, + + emptyAvatarMarginSmall: { + marginRight: variables.avatarChatSpacing - 4, + }, + modalViewContainer: { alignItems: 'center', flex: 1, From 0b35d7c010157841617867ac3924699168cd9d27 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 2 May 2023 09:20:19 -0600 Subject: [PATCH 3/4] Remove duplicate style --- src/styles/styles.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index 6e7ea631daa8..a85d623538af 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1821,7 +1821,6 @@ const styles = { }, emptyAvatarSmall: { - marginRight: variables.avatarChatSpacing - 4, height: variables.avatarSizeSmall, width: variables.avatarSizeSmall, }, From 88ed051546ee4e64a9350b777234340b5470855a Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 2 May 2023 11:47:11 -0600 Subject: [PATCH 4/4] Update src/components/SubscriptAvatar.js Co-authored-by: Aimane Chnaif <96077027+aimane-chnaif@users.noreply.github.com> --- src/components/SubscriptAvatar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SubscriptAvatar.js b/src/components/SubscriptAvatar.js index 4d20785af455..8b552b405ad5 100644 --- a/src/components/SubscriptAvatar.js +++ b/src/components/SubscriptAvatar.js @@ -51,7 +51,7 @@ const SubscriptAvatar = (props) => { // Some views like the chat view require that there be no margins if (props.noMargin) { - marginStyle = null; + marginStyle = {}; } return (