UI MoneyRequestHeader Polish

src/components/Avatar.js

@@ -21,6 +21,10 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     imageStyles: PropTypes.arrayOf(PropTypes.object),
 
+    /** Additional styles to pass to Icon */
+    // eslint-disable-next-line react/forbid-prop-types
+    iconAdditionalStyles: PropTypes.arrayOf(PropTypes.object),
+
     /** Extra styles to pass to View wrapper */
     containerStyles: stylePropTypes,
 
@@ -48,6 +52,7 @@ const propTypes = {
 const defaultProps = {
     source: null,
     imageStyles: [],
+    iconAdditionalStyles: [],
     containerStyles: [],
     size: CONST.AVATAR_SIZE.DEFAULT,
     fill: themeColors.icon,
@@ -68,9 +73,9 @@ function Avatar(props) {
     const isWorkspace = props.type === CONST.ICON_TYPE_WORKSPACE;
     const iconSize = StyleUtils.getAvatarSize(props.size);
 
-    const imageStyle = [StyleUtils.getAvatarStyle(props.size), ...props.imageStyles, StyleUtils.getAvatarBorderRadius(props.size, props.type)];
+    const imageStyle = props.imageStyles ? [StyleUtils.getAvatarStyle(props.size), ...props.imageStyles, StyleUtils.getAvatarBorderRadius(props.size, props.type)] : undefined;
 
-    const iconStyle = [StyleUtils.getAvatarStyle(props.size), styles.bgTransparent, ...props.imageStyles];
+    const iconStyle = props.imageStyles ? [StyleUtils.getAvatarStyle(props.size), styles.bgTransparent, ...props.imageStyles] : undefined;
 
     const iconFillColor = isWorkspace ? StyleUtils.getDefaultWorkspaceAvatarColor(props.name).fill : props.fill;
     const fallbackAvatar = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatar(props.name) : props.fallbackIcon;
@@ -91,6 +96,7 @@ function Avatar(props) {
                             StyleUtils.getAvatarBorderStyle(props.size, props.type),
                             isWorkspace ? StyleUtils.getDefaultWorkspaceAvatarColor(props.name) : {},
                             imageError ? StyleUtils.getBackgroundColorStyle(themeColors.fallbackIconColor) : {},
+                            ...props.iconAdditionalStyles,
                         ]}
                     />
                 </View>

src/components/AvatarWithDisplayName.js

@@ -8,6 +8,7 @@ import participantPropTypes from './participantPropTypes';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import styles from '../styles/styles';
+import themeColors from '../styles/themes/default';
 import SubscriptAvatar from './SubscriptAvatar';
 import * as ReportUtils from '../libs/ReportUtils';
 import Avatar from './Avatar';
@@ -53,9 +54,10 @@ const AvatarWithDisplayName = (props) => {
     return (
         <View style={[styles.appContentHeaderTitle, styles.flex1]}>
             {Boolean(props.report && title) && (
-                <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
+                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
                     {isExpenseReport ? (
                         <SubscriptAvatar
+                            backgroundColor={themeColors.highlightBG}
                             mainAvatar={icons[0]}
                             secondaryAvatar={icons[1]}
                             mainTooltip={props.report.ownerEmail}

src/components/MoneyRequestHeader.js

@@ -71,17 +71,17 @@ const MoneyRequestHeader = (props) => {
                 shouldShowBackButton={props.isSmallScreenWidth}
                 onBackButtonPress={() => Navigation.navigate(ROUTES.HOME)}
             />
-            <View style={[styles.ph5, styles.pb5]}>
+            <View style={[styles.ph5, styles.pb2]}>
                 <Text style={[styles.textLabelSupporting, styles.lh16]}>{props.translate('common.to')}</Text>
                 <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.pv3]}>
-                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
+                    <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
                         <Avatar
                             source={payeeAvatar}
                             type={isExpenseReport ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR}
                             name={payeeName}
-                            size={CONST.AVATAR_SIZE.HEADER}
+                            size={CONST.AVATAR_SIZE.DEFAULT}
                         />
-                        <View style={[styles.flexColumn, styles.ml3]}>
+                        <View style={[styles.flex1, styles.flexColumn, styles.ml3]}>
                             <Text
                                 style={[styles.headerText, styles.pre]}
                                 numberOfLines={1}

src/components/MultipleAvatars.js

@@ -80,7 +80,7 @@ const MultipleAvatars = (props) => {
     }
 
     const oneAvatarSize = StyleUtils.getAvatarStyle(props.size);
-    const oneAvatarBorderWidth = StyleUtils.getAvatarBorderWidth(props.size);
+    const oneAvatarBorderWidth = StyleUtils.getAvatarBorderWidth(props.size).borderWidth;
     const overlapSize = oneAvatarSize.width / 3;
 
     if (props.shouldStackHorizontally) {

src/components/SubscriptAvatar.js

@@ -63,23 +63,21 @@ const SubscriptAvatar = (props) => {
                     type={props.mainAvatar.type}
                 />
             </Tooltip>
-            <View
-                style={[
-                    props.size === CONST.AVATAR_SIZE.SMALL ? styles.secondAvatarSubscriptCompact : styles.secondAvatarSubscript,
-                    StyleUtils.getBackgroundAndBorderStyle(props.backgroundColor),
-                    StyleUtils.getAvatarBorderStyle(props.size, props.secondaryAvatar.type),
-                ]}
-            >
-                <Tooltip text={props.secondaryTooltip}>
-                    <Avatar
-                        source={props.secondaryAvatar.source}
-                        size={props.size === CONST.AVATAR_SIZE.SMALL ? CONST.AVATAR_SIZE.SMALL_SUBSCRIPT : CONST.AVATAR_SIZE.SUBSCRIPT}
-                        fill={themeColors.iconSuccessFill}
-                        name={props.secondaryAvatar.name}
-                        type={props.secondaryAvatar.type}
-                    />
-                </Tooltip>
-            </View>
+            <Tooltip text={props.secondaryTooltip}>
+                <Avatar
+                    imageStyles={null}
+                    containerStyles={[props.size === CONST.AVATAR_SIZE.SMALL ? styles.secondAvatarSubscriptCompact : styles.secondAvatarSubscript]}
+                    iconAdditionalStyles={[
+                        StyleUtils.getAvatarBorderWidth(props.size === CONST.AVATAR_SIZE.SMALL ? CONST.AVATAR_SIZE.SMALL_SUBSCRIPT : CONST.AVATAR_SIZE.SUBSCRIPT),
+                        StyleUtils.getBorderColorStyle(props.backgroundColor),
+                    ]}
+                    source={props.secondaryAvatar.source}
+                    size={props.size === CONST.AVATAR_SIZE.SMALL ? CONST.AVATAR_SIZE.SMALL_SUBSCRIPT : CONST.AVATAR_SIZE.SUBSCRIPT}
+                    fill={themeColors.iconSuccessFill}
+                    name={props.secondaryAvatar.name}
+                    type={props.secondaryAvatar.type}
+                />
+            </Tooltip>
         </View>
     );
 };

src/libs/ReportUtils.js

@@ -108,6 +108,16 @@ function getReportParticipantsTitle(logins) {
     );
 }
 
+/**
+ * Checks if a report is a chat report.
+ *
+ * @param {Object} report
+ * @returns {Boolean}
+ */
+function isChatReport(report) {
+    return lodashGet(report, 'type') === CONST.REPORT.TYPE.CHAT;
+}
+
 /**
  * Checks if a report is an Expense report.
  *
@@ -2218,6 +2228,7 @@ export {
     getAllPolicyReports,
     getIOUReportActionMessage,
     getDisplayNameForParticipant,
+    isChatReport,
     isExpenseReport,
     isIOUReport,
     isTaskReport,

src/pages/home/report/ReportActionItemCreated.js

@@ -36,12 +36,12 @@ const defaultProps = {
 };
 
 const ReportActionItemCreated = (props) => {
-    const icons = ReportUtils.getIcons(props.report, props.personalDetails);
-
-    if (ReportUtils.isMoneyRequestReport(props.report.reportID) || ReportUtils.isTaskReport(props.report)) {
+    if (!ReportUtils.isChatReport(props.report)) {
         return null;
     }
 
+    const icons = ReportUtils.getIcons(props.report, props.personalDetails);
+
     return (
         <OfflineWithFeedback
             pendingAction={lodashGet(props.report, 'pendingFields.addWorkspaceRoom') || lodashGet(props.report, 'pendingFields.createChat')}

src/styles/StyleUtils.js

@@ -33,7 +33,7 @@ const workspaceColorOptions = [
 const avatarBorderSizes = {
     [CONST.AVATAR_SIZE.SMALL_SUBSCRIPT]: variables.componentBorderRadiusSmall,
     [CONST.AVATAR_SIZE.MID_SUBSCRIPT]: variables.componentBorderRadiusSmall,
-    [CONST.AVATAR_SIZE.SUBSCRIPT]: variables.componentBorderRadiusSmall,
+    [CONST.AVATAR_SIZE.SUBSCRIPT]: variables.componentBorderRadiusMedium,
     [CONST.AVATAR_SIZE.SMALLER]: variables.componentBorderRadiusMedium,
     [CONST.AVATAR_SIZE.SMALL]: variables.componentBorderRadiusMedium,
     [CONST.AVATAR_SIZE.HEADER]: variables.componentBorderRadiusMedium,
@@ -85,7 +85,7 @@ function getAvatarStyle(size) {
 /**
  * Get Font size of '+1' text on avatar overlay
  * @param {String} size
- * @returns {Number}
+ * @returns {Object}
  */
 function getAvatarExtraFontSizeStyle(size) {
     const AVATAR_SIZES = {
@@ -107,12 +107,12 @@ function getAvatarExtraFontSizeStyle(size) {
 /**
  * Get Bordersize of Avatar based on avatar size
  * @param {String} size
- * @returns {Number}
+ * @returns {Object}
  */
 function getAvatarBorderWidth(size) {
     const AVATAR_SIZES = {
         [CONST.AVATAR_SIZE.DEFAULT]: 3,
-        [CONST.AVATAR_SIZE.SMALL_SUBSCRIPT]: 2,
+        [CONST.AVATAR_SIZE.SMALL_SUBSCRIPT]: 1,
         [CONST.AVATAR_SIZE.MID_SUBSCRIPT]: 2,
         [CONST.AVATAR_SIZE.SUBSCRIPT]: 2,
         [CONST.AVATAR_SIZE.SMALL]: 3,
@@ -121,7 +121,9 @@ function getAvatarBorderWidth(size) {
         [CONST.AVATAR_SIZE.MEDIUM]: 3,
         [CONST.AVATAR_SIZE.LARGE_BORDERED]: 4,
     };
-    return AVATAR_SIZES[size];
+    return {
+        borderWidth: AVATAR_SIZES[size],
+    };
 }
 
 /**
@@ -349,6 +351,18 @@ function getBackgroundColorStyle(backgroundColor) {
     };
 }
 
+/**
+ * Returns a style with the specified borderColor
+ *
+ * @param {String} borderColor
+ * @returns {Object}
+ */
+function getBorderColorStyle(borderColor) {
+    return {
+        borderColor,
+    };
+}
+
 /**
  * Returns the width style for the wordmark logo on the sign in page
  *
@@ -1122,6 +1136,7 @@ export {
     getAutoGrowHeightInputStyle,
     getBackgroundAndBorderStyle,
     getBackgroundColorStyle,
+    getBorderColorStyle,
     getBackgroundColorWithOpacityStyle,
     getBadgeColorStyle,
     getButtonBackgroundColorStyle,

src/styles/styles.js

@@ -1780,20 +1780,14 @@ const styles = {
 
     secondAvatarSubscript: {
         position: 'absolute',
-        right: -4,
-        bottom: -2,
-        borderWidth: 2,
-        borderRadius: 18,
-        borderColor: 'transparent',
+        right: -6,
+        bottom: -6,
     },
 
     secondAvatarSubscriptCompact: {
         position: 'absolute',
         bottom: -1,
         right: -1,
-        borderWidth: 1,
-        borderRadius: 18,
-        borderColor: 'transparent',
     },
 
     leftSideLargeAvatar: {

src/styles/variables.js

@@ -83,7 +83,7 @@ export default {
     popoverMenuShadow: '0px 4px 12px 0px rgba(0, 0, 0, 0.06)',
     optionRowHeight: 64,
     optionRowHeightCompact: 52,
-    optionsListSectionHeaderHeight: getValueUsingPixelRatio(54, 60),
+    optionsListSectionHeaderHeight: getValueUsingPixelRatio(32, 38),
     overlayOpacity: 0.6,
     lineHeightSmall: getValueUsingPixelRatio(14, 16),
     lineHeightNormal: getValueUsingPixelRatio(16, 21),

tests/ui/UnreadIndicatorsTest.js

@@ -153,6 +153,7 @@ function signInAndGetAppWithUnreadChat() {
                 lastVisibleActionCreated: reportAction9CreatedDate,
                 lastMessageText: 'Test',
                 participants: [USER_B_EMAIL],
+                type: CONST.REPORT.TYPE.CHAT,
             });
             const createdReportActionID = NumberUtils.rand64();
             Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${REPORT_ID}`, {