From 0167179c487dea975c23251063d140094e8f4cce Mon Sep 17 00:00:00 2001 From: Daniel Gale-Rosen Date: Thu, 12 Jan 2023 17:39:39 -0500 Subject: [PATCH 1/8] initial updates for new shared size avatars --- src/components/RoomHeaderAvatars.js | 4 +++- src/styles/StyleUtils.js | 9 +++++++++ src/styles/variables.js | 1 + 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js index 7d8b5f134003..d11619b97a69 100644 --- a/src/components/RoomHeaderAvatars.js +++ b/src/components/RoomHeaderAvatars.js @@ -61,9 +61,11 @@ const RoomHeaderAvatars = (props) => { } const iconsToDisplay = props.icons.slice(0, CONST.REPORT.MAX_PREVIEW_AVATARS); + console.log('this is large bordered', StyleUtils.getAvatarStyle(CONST.AVATAR_SIZE.LARGE_BORDERED)); + const iconStyle = [ styles.roomHeaderAvatar, - StyleUtils.getAvatarStyle(CONST.AVATAR_SIZE.MEDIUM), + StyleUtils.getAvatarStyle(CONST.AVATAR_SIZE.LARGE_BORDERED), ]; return ( diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index 548ef84c60b3..4d8d1ba2a810 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -22,7 +22,12 @@ function getAvatarSize(size) { [CONST.AVATAR_SIZE.SMALLER]: variables.avatarSizeSmaller, [CONST.AVATAR_SIZE.LARGE]: variables.avatarSizeLarge, [CONST.AVATAR_SIZE.MEDIUM]: variables.avatarSizeMedium, + [CONST.AVATAR_SIZE.LARGE_BORDERED]: variables.avatarSizeLargeBordered, }; + + if (!size) { + console.log('nothing was sent to size either', size, AVATAR_SIZES[size]); + } return AVATAR_SIZES[size]; } @@ -33,6 +38,10 @@ function getAvatarSize(size) { * @returns {Object} */ function getAvatarStyle(size) { + if (!size) { + console.log('yourenot sending anything to style'); + } + const avatarSize = getAvatarSize(size); return { height: avatarSize, diff --git a/src/styles/variables.js b/src/styles/variables.js index 46905db35eb3..32b22f3bf140 100644 --- a/src/styles/variables.js +++ b/src/styles/variables.js @@ -27,6 +27,7 @@ export default { componentBorderRadiusRounded: 20, buttonBorderRadius: 100, avatarSizeLarge: 80, + avatarSizeLargeBordered: 88, avatarSizeMedium: 52, avatarSizeNormal: 40, avatarSizeSmall: 28, From 679476f71fcc4d5db1b3c38c555ed5821d62e965 Mon Sep 17 00:00:00 2001 From: Daniel Gale-Rosen Date: Fri, 13 Jan 2023 16:36:20 -0500 Subject: [PATCH 2/8] remove console logs and add constant --- src/CONST.js | 1 + src/components/RoomHeaderAvatars.js | 1 - src/styles/StyleUtils.js | 7 ------- 3 files changed, 1 insertion(+), 8 deletions(-) diff --git a/src/CONST.js b/src/CONST.js index 8cd279eedbed..a65cadee6b8b 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -733,6 +733,7 @@ const CONST = { SMALLER: 'smaller', SUBSCRIPT: 'subscript', SMALL_SUBSCRIPT: 'small-subscript', + LARGE_BORDERED: 'large-bordered', }, OPTION_MODE: { COMPACT: 'compact', diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js index d11619b97a69..5a69b3ddcabc 100644 --- a/src/components/RoomHeaderAvatars.js +++ b/src/components/RoomHeaderAvatars.js @@ -61,7 +61,6 @@ const RoomHeaderAvatars = (props) => { } const iconsToDisplay = props.icons.slice(0, CONST.REPORT.MAX_PREVIEW_AVATARS); - console.log('this is large bordered', StyleUtils.getAvatarStyle(CONST.AVATAR_SIZE.LARGE_BORDERED)); const iconStyle = [ styles.roomHeaderAvatar, diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index 4d8d1ba2a810..a4a763fbfd6a 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -25,9 +25,6 @@ function getAvatarSize(size) { [CONST.AVATAR_SIZE.LARGE_BORDERED]: variables.avatarSizeLargeBordered, }; - if (!size) { - console.log('nothing was sent to size either', size, AVATAR_SIZES[size]); - } return AVATAR_SIZES[size]; } @@ -38,10 +35,6 @@ function getAvatarSize(size) { * @returns {Object} */ function getAvatarStyle(size) { - if (!size) { - console.log('yourenot sending anything to style'); - } - const avatarSize = getAvatarSize(size); return { height: avatarSize, From 4aee6b7b43cbbcf1b7efb04417c743c8255765bc Mon Sep 17 00:00:00 2001 From: Daniel Gale-Rosen Date: Fri, 13 Jan 2023 16:43:33 -0500 Subject: [PATCH 3/8] remove shouldShowLargeAvatars --- src/components/RoomHeaderAvatars.js | 24 ++----------------- .../home/report/ReportActionItemCreated.js | 1 - 2 files changed, 2 insertions(+), 23 deletions(-) diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js index 5a69b3ddcabc..25515242912f 100644 --- a/src/components/RoomHeaderAvatars.js +++ b/src/components/RoomHeaderAvatars.js @@ -38,32 +38,12 @@ const RoomHeaderAvatars = (props) => { ); } - if (props.shouldShowLargeAvatars) { - return ( - - - - - - - - - ); - } - const iconsToDisplay = props.icons.slice(0, CONST.REPORT.MAX_PREVIEW_AVATARS); const iconStyle = [ styles.roomHeaderAvatar, + + // Because the border is applied to the Avatars when there are multiple they need to be slightly larger to match size StyleUtils.getAvatarStyle(CONST.AVATAR_SIZE.LARGE_BORDERED), ]; return ( diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js index e62bbb99ea73..b1412df7a238 100644 --- a/src/pages/home/report/ReportActionItemCreated.js +++ b/src/pages/home/report/ReportActionItemCreated.js @@ -57,7 +57,6 @@ const ReportActionItemCreated = (props) => { ReportUtils.navigateToDetailsPage(props.report)}> From 84073680b3a29aa03f2d76bceee8d302914983b3 Mon Sep 17 00:00:00 2001 From: Daniel Gale-Rosen Date: Fri, 13 Jan 2023 17:05:58 -0500 Subject: [PATCH 4/8] center number --- src/components/RoomHeaderAvatars.js | 6 +----- src/styles/styles.js | 2 +- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js index 25515242912f..46b88530c293 100644 --- a/src/components/RoomHeaderAvatars.js +++ b/src/components/RoomHeaderAvatars.js @@ -12,14 +12,10 @@ import * as StyleUtils from '../styles/StyleUtils'; const propTypes = { /** Array of avatar URLs or icons */ icons: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.func])), - - /** Whether show large Avatars */ - shouldShowLargeAvatars: PropTypes.bool, }; const defaultProps = { icons: [], - shouldShowLargeAvatars: false, }; const RoomHeaderAvatars = (props) => { @@ -43,7 +39,7 @@ const RoomHeaderAvatars = (props) => { const iconStyle = [ styles.roomHeaderAvatar, - // Because the border is applied to the Avatars when there are multiple they need to be slightly larger to match size + // Due to border-box box-sizing, the Avatars have to be larger when bordered to visually match size with non-bordered Avatars StyleUtils.getAvatarStyle(CONST.AVATAR_SIZE.LARGE_BORDERED), ]; return ( diff --git a/src/styles/styles.js b/src/styles/styles.js index 01961d07a068..36845d6d0c7c 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2028,10 +2028,10 @@ const styles = { avatarInnerTextChat: { color: themeColors.textLight, fontSize: variables.fontSizeNormal, - left: 1, textAlign: 'center', fontWeight: 'normal', position: 'absolute', + marginLeft: -16, }, pageWrapper: { From e1e86b36ef442d77a63d81a7e5b9683ac1ae7e1a Mon Sep 17 00:00:00 2001 From: Daniel Gale-Rosen Date: Fri, 13 Jan 2023 17:32:01 -0500 Subject: [PATCH 5/8] center number on mobile --- src/styles/styles.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index 36845d6d0c7c..ed1cd35193f0 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2031,7 +2031,8 @@ const styles = { textAlign: 'center', fontWeight: 'normal', position: 'absolute', - marginLeft: -16, + width: 88, + left: -16, }, pageWrapper: { From 19c960247b4e749a646971491ad1f0bc755e55c3 Mon Sep 17 00:00:00 2001 From: Daniel Gale-Rosen Date: Fri, 13 Jan 2023 17:33:58 -0500 Subject: [PATCH 6/8] remove unused variable --- src/pages/home/report/ReportActionItemCreated.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js index b1412df7a238..69dbb5a31d86 100644 --- a/src/pages/home/report/ReportActionItemCreated.js +++ b/src/pages/home/report/ReportActionItemCreated.js @@ -36,7 +36,6 @@ const defaultProps = { }; const ReportActionItemCreated = (props) => { - const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(props.report); const icons = ReportUtils.getIcons(props.report, props.personalDetails, props.policies); return ( Date: Fri, 13 Jan 2023 17:36:47 -0500 Subject: [PATCH 7/8] remove another shouldShowLargeAvatars --- src/pages/ReportDetailsPage.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js index 62afb287ed0e..1b3af0732570 100644 --- a/src/pages/ReportDetailsPage.js +++ b/src/pages/ReportDetailsPage.js @@ -121,7 +121,6 @@ class ReportDetailsPage extends Component { From bb3a7d1c61d8fa85b74eb463988d06360cc23c11 Mon Sep 17 00:00:00 2001 From: Daniel Gale-Rosen Date: Fri, 20 Jan 2023 16:52:06 -0500 Subject: [PATCH 8/8] update overlay --- src/styles/styles.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index ed1cd35193f0..6ab84277e028 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2023,11 +2023,13 @@ const styles = { left: 0, backgroundColor: themeColors.overlay, opacity: variables.overlayOpacity, + borderRadius: 88, }, avatarInnerTextChat: { color: themeColors.textLight, - fontSize: variables.fontSizeNormal, + fontSize: variables.fontSizeXLarge, + fontFamily: fontFamily.EXP_NEW_KANSAS_MEDIUM, textAlign: 'center', fontWeight: 'normal', position: 'absolute',