From abb38610c8d86ef63b776c81f8c6f02f71bfa7cd Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Mon, 5 Jun 2023 01:41:43 +0500
Subject: [PATCH 01/14] feat: use MenuItem instead of TaskSelectorLink on Task
 page

---
 src/components/MenuItem.js          | 246 +++++++++++++++-------------
 src/components/TaskSelectorLink.js  | 114 -------------
 src/components/menuItemPropTypes.js |   9 +-
 src/pages/tasks/NewTaskPage.js      |  72 ++++----
 src/styles/styles.js                |   7 -
 5 files changed, 173 insertions(+), 275 deletions(-)
 delete mode 100644 src/components/TaskSelectorLink.js

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 21195a9f4ca2..8e1a23445db4 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -75,7 +75,7 @@ const MenuItem = (props) => {
         [
             styles.flexShrink1,
             styles.popoverMenuText,
-            props.icon ? styles.ml3 : undefined,
+            props.icon && !_.isArray(props.icon) ? styles.ml3 : undefined,
             props.shouldShowBasicTitle ? undefined : styles.textStrong,
             props.interactive && props.disabled ? {...styles.disabledText, ...styles.userSelectNone} : undefined,
             styles.pre,
@@ -87,7 +87,7 @@ const MenuItem = (props) => {
     );
     const descriptionTextStyle = StyleUtils.combineStyles([
         styles.textLabelSupporting,
-        props.icon ? styles.ml3 : undefined,
+        props.icon && !_.isArray(props.icon) ? styles.ml3 : undefined,
         styles.lineHeightNormal,
         props.title ? descriptionVerticalMargin : undefined,
         props.descriptionTextStyle,
@@ -95,6 +95,8 @@ const MenuItem = (props) => {
     ]);
 
     const fallbackAvatarSize = props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT;
+    const stylesWithoutPadding = _.isArray(props.style) ? _.map(props.style, style => _.omit(style, ['padding', 'paddingVertical', 'paddingHorizontal'])) : _.omit(props.style, ['padding', 'paddingVertical', 'paddingHorizontal']);
+    const paddingStyles = _.isArray(props.style) ? _.map(props.style, style => _.pick(style, ['padding', 'paddingVertical', 'paddingHorizontal'])) : _.pick(props.style, ['padding', 'paddingVertical', 'paddingHorizontal']);
 
     return (
         <PressableWithSecondaryInteraction
@@ -113,7 +115,7 @@ const MenuItem = (props) => {
             onPressOut={ControlSelection.unblock}
             onSecondaryInteraction={props.onSecondaryInteraction}
             style={({hovered, pressed}) => [
-                props.style,
+                paddingStyles,
                 !props.interactive && styles.cursorDefault,
                 StyleUtils.getButtonBackgroundColorStyle(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive), true),
                 (hovered || pressed) && props.hoverAndPressStyle,
@@ -124,135 +126,149 @@ const MenuItem = (props) => {
         >
             {({hovered, pressed}) => (
                 <>
-                    <View style={[styles.flexRow, styles.pointerEventsAuto, styles.flex1, props.disabled && styles.cursorDisabled]}>
-                        {Boolean(props.icon) && (
-                            <View style={[styles.popoverMenuIcon, ...props.iconStyles]}>
-                                {props.iconType === CONST.ICON_TYPE_ICON && (
-                                    <Icon
-                                        src={props.icon}
-                                        width={props.iconWidth}
-                                        height={props.iconHeight}
-                                        fill={
-                                            props.iconFill ||
-                                            StyleUtils.getIconFillColor(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive), true)
-                                        }
-                                    />
-                                )}
-                                {props.iconType === CONST.ICON_TYPE_WORKSPACE && (
-                                    <Avatar
-                                        imageStyles={[styles.alignSelfCenter]}
-                                        size={CONST.AVATAR_SIZE.DEFAULT}
-                                        source={props.icon}
-                                        fallbackIcon={props.fallbackIcon}
-                                        name={props.title}
-                                        type={CONST.ICON_TYPE_WORKSPACE}
-                                    />
-                                )}
-                                {props.iconType === CONST.ICON_TYPE_AVATAR && (
-                                    <Avatar
-                                        imageStyles={[styles.avatarNormal, styles.alignSelfCenter]}
-                                        source={props.icon}
-                                        fallbackIcon={props.fallbackIcon}
-                                    />
-                                )}
-                            </View>
-                        )}
-                        <View style={[styles.justifyContentCenter, styles.menuItemTextContainer, styles.flex1]}>
-                            {Boolean(props.description) && props.shouldShowDescriptionOnTop && (
-                                <Text
-                                    style={descriptionTextStyle}
-                                    numberOfLines={2}
-                                >
-                                    {props.description}
-                                </Text>
+                    {props.label &&
+                        <View style={props.icon ? styles.mb2 : null}>
+                            <Text style={StyleUtils.combineStyles(styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting, styles.pre)}>{props.label}</Text>
+                        </View>
+                    }
+                    <View style={stylesWithoutPadding}>
+                        <View style={[styles.flexRow, styles.pointerEventsAuto, styles.flex1, props.disabled && styles.cursorDisabled]}>
+                            {Boolean(props.icon) && _.isArray(props.icon) && (
+                                <MultipleAvatars
+                                    icons={props.icon}
+                                    size={CONST.AVATAR_SIZE.DEFAULT}
+                                    secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(themeColors.appBG)]}
+                                />
+                            )}
+                            {Boolean(props.icon) && !_.isArray(props.icon) && (
+                                <View style={[styles.popoverMenuIcon, ...props.iconStyles]}>
+                                    {props.iconType === CONST.ICON_TYPE_ICON && (
+                                        <Icon
+                                            src={props.icon}
+                                            width={props.iconWidth}
+                                            height={props.iconHeight}
+                                            fill={
+                                                props.iconFill ||
+                                                StyleUtils.getIconFillColor(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive), true)
+                                            }
+                                        />
+                                    )}
+                                    {props.iconType === CONST.ICON_TYPE_WORKSPACE && (
+                                        <Avatar
+                                            imageStyles={[styles.alignSelfCenter]}
+                                            size={CONST.AVATAR_SIZE.DEFAULT}
+                                            source={props.icon}
+                                            fallbackIcon={props.fallbackIcon}
+                                            name={props.title}
+                                            type={CONST.ICON_TYPE_WORKSPACE}
+                                        />
+                                    )}
+                                    {props.iconType === CONST.ICON_TYPE_AVATAR && (
+                                        <Avatar
+                                            imageStyles={[styles.avatarNormal, styles.alignSelfCenter]}
+                                            source={props.icon}
+                                            fallbackIcon={props.fallbackIcon}
+                                        />
+                                    )}
+                                </View>
                             )}
-                            <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                {Boolean(props.title) && (
+                            <View style={[styles.justifyContentCenter, styles.menuItemTextContainer, styles.flex1]}>
+                                {Boolean(props.description) && props.shouldShowDescriptionOnTop && (
+                                    <Text
+                                        style={descriptionTextStyle}
+                                        numberOfLines={2}
+                                    >
+                                        {props.description}
+                                    </Text>
+                                )}
+                                <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                                    {Boolean(props.title) && (
+                                        <Text
+                                            style={titleTextStyle}
+                                            numberOfLines={1}
+                                        >
+                                            {convertToLTR(props.title)}
+                                        </Text>
+                                    )}
+                                    {Boolean(props.shouldShowTitleIcon) && (
+                                        <View style={[styles.ml2]}>
+                                            <Icon
+                                                src={props.titleIcon}
+                                                fill={themeColors.iconSuccessFill}
+                                            />
+                                        </View>
+                                    )}
+                                </View>
+                                {Boolean(props.description) && !props.shouldShowDescriptionOnTop && (
                                     <Text
-                                        style={titleTextStyle}
-                                        numberOfLines={1}
+                                        style={descriptionTextStyle}
+                                        numberOfLines={2}
                                     >
-                                        {convertToLTR(props.title)}
+                                        {props.description}
                                     </Text>
                                 )}
-                                {Boolean(props.shouldShowTitleIcon) && (
-                                    <View style={[styles.ml2]}>
+                                {Boolean(props.furtherDetails) && (
+                                    <View style={[styles.flexRow, styles.mt2, styles.alignItemsCenter]}>
                                         <Icon
-                                            src={props.titleIcon}
-                                            fill={themeColors.iconSuccessFill}
+                                            src={props.furtherDetailsIcon}
+                                            height={variables.iconSizeNormal}
+                                            width={variables.iconSizeNormal}
+                                            inline
                                         />
+                                        <Text
+                                            style={[styles.furtherDetailsText, styles.ph2, styles.pt1]}
+                                            numberOfLines={2}
+                                        >
+                                            {props.furtherDetails}
+                                        </Text>
                                     </View>
                                 )}
                             </View>
-                            {Boolean(props.description) && !props.shouldShowDescriptionOnTop && (
-                                <Text
-                                    style={descriptionTextStyle}
-                                    numberOfLines={2}
-                                >
-                                    {props.description}
-                                </Text>
+                        </View>
+                        <View style={[styles.flexRow, styles.menuItemTextContainer, styles.pointerEventsNone]}>
+                            {Boolean(props.badgeText) && (
+                                <Badge
+                                    text={props.badgeText}
+                                    badgeStyles={[styles.alignSelfCenter, props.brickRoadIndicator ? styles.mr2 : undefined, props.focused || hovered || pressed ? styles.hoveredButton : {}]}
+                                />
+                            )}
+                            {/* Since subtitle can be of type number, we should allow 0 to be shown */}
+                            {(props.subtitle || props.subtitle === 0) && (
+                                <View style={[styles.justifyContentCenter, styles.mr1]}>
+                                    <Text style={[styles.textLabelSupporting, props.style]}>{props.subtitle}</Text>
+                                </View>
+                            )}
+                            {!_.isEmpty(props.floatRightAvatars) && (
+                                <View style={[styles.justifyContentCenter, props.brickRoadIndicator ? styles.mr2 : undefined]}>
+                                    <MultipleAvatars
+                                        isHovered={hovered}
+                                        isPressed={pressed}
+                                        icons={props.floatRightAvatars}
+                                        size={props.avatarSize || fallbackAvatarSize}
+                                        fallbackIcon={defaultWorkspaceAvatars.WorkspaceBuilding}
+                                        shouldStackHorizontally={props.shouldStackHorizontally}
+                                    />
+                                </View>
                             )}
-                            {Boolean(props.furtherDetails) && (
-                                <View style={[styles.flexRow, styles.mt2, styles.alignItemsCenter]}>
+                            {Boolean(props.brickRoadIndicator) && (
+                                <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.ml1]}>
                                     <Icon
-                                        src={props.furtherDetailsIcon}
-                                        height={variables.iconSizeNormal}
-                                        width={variables.iconSizeNormal}
-                                        inline
+                                        src={Expensicons.DotIndicator}
+                                        fill={props.brickRoadIndicator === 'error' ? colors.red : colors.green}
+                                    />
+                                </View>
+                            )}
+                            {Boolean(props.shouldShowRightIcon) && (
+                                <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, props.disabled && styles.cursorDisabled]}>
+                                    <Icon
+                                        src={props.iconRight}
+                                        fill={StyleUtils.getIconFillColor(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive))}
                                     />
-                                    <Text
-                                        style={[styles.furtherDetailsText, styles.ph2, styles.pt1]}
-                                        numberOfLines={2}
-                                    >
-                                        {props.furtherDetails}
-                                    </Text>
                                 </View>
                             )}
+                            {props.shouldShowSelectedState && <SelectCircle isChecked={props.isSelected} />}
                         </View>
                     </View>
-                    <View style={[styles.flexRow, styles.menuItemTextContainer, styles.pointerEventsNone]}>
-                        {Boolean(props.badgeText) && (
-                            <Badge
-                                text={props.badgeText}
-                                badgeStyles={[styles.alignSelfCenter, props.brickRoadIndicator ? styles.mr2 : undefined, props.focused || hovered || pressed ? styles.hoveredButton : {}]}
-                            />
-                        )}
-                        {/* Since subtitle can be of type number, we should allow 0 to be shown */}
-                        {(props.subtitle || props.subtitle === 0) && (
-                            <View style={[styles.justifyContentCenter, styles.mr1]}>
-                                <Text style={[styles.textLabelSupporting, props.style]}>{props.subtitle}</Text>
-                            </View>
-                        )}
-                        {!_.isEmpty(props.floatRightAvatars) && (
-                            <View style={[styles.justifyContentCenter, props.brickRoadIndicator ? styles.mr2 : undefined]}>
-                                <MultipleAvatars
-                                    isHovered={hovered}
-                                    isPressed={pressed}
-                                    icons={props.floatRightAvatars}
-                                    size={props.avatarSize || fallbackAvatarSize}
-                                    fallbackIcon={defaultWorkspaceAvatars.WorkspaceBuilding}
-                                    shouldStackHorizontally={props.shouldStackHorizontally}
-                                />
-                            </View>
-                        )}
-                        {Boolean(props.brickRoadIndicator) && (
-                            <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.ml1]}>
-                                <Icon
-                                    src={Expensicons.DotIndicator}
-                                    fill={props.brickRoadIndicator === 'error' ? colors.red : colors.green}
-                                />
-                            </View>
-                        )}
-                        {Boolean(props.shouldShowRightIcon) && (
-                            <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, props.disabled && styles.cursorDisabled]}>
-                                <Icon
-                                    src={props.iconRight}
-                                    fill={StyleUtils.getIconFillColor(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive))}
-                                />
-                            </View>
-                        )}
-                        {props.shouldShowSelectedState && <SelectCircle isChecked={props.isSelected} />}
-                    </View>
                 </>
             )}
         </PressableWithSecondaryInteraction>
diff --git a/src/components/TaskSelectorLink.js b/src/components/TaskSelectorLink.js
deleted file mode 100644
index a288fc22acb3..000000000000
--- a/src/components/TaskSelectorLink.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import React from 'react';
-import {View, TouchableOpacity} from 'react-native';
-import PropTypes from 'prop-types';
-import styles from '../styles/styles';
-import Icon from './Icon';
-import * as Expensicons from './Icon/Expensicons';
-import themeColors from '../styles/themes/default';
-import variables from '../styles/variables';
-import Text from './Text';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import * as StyleUtils from '../styles/StyleUtils';
-import DisplayNames from './DisplayNames';
-import MultipleAvatars from './MultipleAvatars';
-import CONST from '../CONST';
-import avatarPropTypes from './avatarPropTypes';
-
-const propTypes = {
-    /** Array of avatar URLs or icons */
-    icons: PropTypes.arrayOf(avatarPropTypes),
-
-    /** The title to display */
-    text: PropTypes.string,
-
-    /** The description to display */
-    alternateText: PropTypes.string,
-
-    /** The function to call when the link is pressed */
-    onPress: PropTypes.func.isRequired,
-
-    /** Label for the Link */
-    label: PropTypes.string.isRequired,
-
-    /** Whether it is a share location */
-    isShareDestination: PropTypes.bool,
-
-    /** Whether the Touchable should be disabled */
-    disabled: PropTypes.bool,
-
-    /** Whether we're creating a new task or editing */
-    isNewTask: PropTypes.bool,
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    icons: [],
-    text: '',
-    alternateText: '',
-    isShareDestination: false,
-    disabled: false,
-    isNewTask: true,
-};
-
-const TaskSelectorLink = (props) => {
-    const displayNameStyle = StyleUtils.combineStyles(styles.optionDisplayName, styles.pre);
-    const alternateTextStyle = StyleUtils.combineStyles(styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting, styles.pre);
-    return (
-        <TouchableOpacity
-            style={[styles.flexRow, styles.taskSelectorLink, styles.mb1]}
-            onPress={props.onPress}
-            disabled={props.disabled}
-        >
-            <View style={[styles.flexRow, styles.containerWithSpaceBetween, styles.alignItemsCenter]}>
-                {props.icons.length !== 0 || props.text !== '' ? (
-                    <View style={[styles.flex1, styles.alignItemsStart]}>
-                        <Text style={[styles.label, styles.textWhite, styles.mb2]}>{props.translate(props.label)}</Text>
-                        <View style={[styles.flexRow, styles.w100, styles.alignItemsCenter]}>
-                            <MultipleAvatars
-                                icons={props.icons}
-                                size={CONST.AVATAR_SIZE.DEFAULT}
-                                secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(themeColors.appBG)]}
-                            />
-                            <View style={[styles.flex1]}>
-                                <DisplayNames
-                                    accessibilityLabel={props.translate('accessibilityHints.chatUserDisplayNames')}
-                                    fullTitle={props.text}
-                                    tooltipEnabled={false}
-                                    numberOfLines={1}
-                                    textStyles={displayNameStyle}
-                                    shouldUseFullTitle={props.isShareDestination}
-                                />
-                                {props.alternateText ? (
-                                    <Text
-                                        style={alternateTextStyle}
-                                        numberOfLines={1}
-                                    >
-                                        {props.alternateText}
-                                    </Text>
-                                ) : null}
-                            </View>
-                        </View>
-                    </View>
-                ) : (
-                    <Text style={[styles.textWhite, styles.textNormal]}>{props.translate(props.label)}</Text>
-                )}
-                {props.disabled || !props.isNewTask ? null : (
-                    <Icon
-                        src={Expensicons.ArrowRight}
-                        fill={themeColors.textLight}
-                        width={variables.iconSizeSmall}
-                        height={variables.iconSizeSmall}
-                        inline
-                    />
-                )}
-            </View>
-        </TouchableOpacity>
-    );
-};
-
-TaskSelectorLink.defaultProps = defaultProps;
-TaskSelectorLink.propTypes = propTypes;
-TaskSelectorLink.displayName = 'TaskSelectorLink';
-
-export default withLocalize(TaskSelectorLink);
diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
index 57266831377f..4291a3acbb41 100644
--- a/src/components/menuItemPropTypes.js
+++ b/src/components/menuItemPropTypes.js
@@ -22,7 +22,11 @@ const propTypes = {
     onPress: PropTypes.func,
 
     /** Icon to display on the left side of component */
-    icon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.string]),
+    icon: PropTypes.oneOfType([
+        PropTypes.elementType, 
+        PropTypes.string, 
+        PropTypes.arrayOf(avatarPropTypes)
+    ]),
 
     /** Icon Width */
     iconWidth: PropTypes.number,
@@ -33,6 +37,9 @@ const propTypes = {
     /** Text to display for the item */
     title: PropTypes.string.isRequired,
 
+    /** Text that appears above the title */
+    label: PropTypes.string,
+
     /** Boolean whether to display the title right icon */
     shouldShowTitleIcon: PropTypes.bool,
 
diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
index efeca6b790c8..77e97c084184 100644
--- a/src/pages/tasks/NewTaskPage.js
+++ b/src/pages/tasks/NewTaskPage.js
@@ -12,7 +12,7 @@ import styles from '../../styles/styles';
 import ONYXKEYS from '../../ONYXKEYS';
 import Permissions from '../../libs/Permissions';
 import ROUTES from '../../ROUTES';
-import TaskSelectorLink from '../../components/TaskSelectorLink';
+import MenuItemWithTopDescription from '../../components/MenuItemWithTopDescription';
 import reportPropTypes from '../reportPropTypes';
 import * as TaskUtils from '../../libs/actions/Task';
 import * as OptionsListUtils from '../../libs/OptionsListUtils';
@@ -126,42 +126,38 @@ const NewTaskPage = (props) => {
                 shouldShowBackButton
                 onBackButtonPress={() => Navigation.goBack()}
             />
-            <View style={[styles.mt5, styles.ph5, styles.containerWithSpaceBetween]}>
-                <View>
-                    <View style={styles.mb5}>
-                        <TaskSelectorLink
-                            text={props.task.title}
-                            onPress={() => Navigation.navigate(ROUTES.NEW_TASK_TITLE)}
-                            label="newTaskPage.title"
-                        />
-                    </View>
-                    <View style={styles.mb5}>
-                        <TaskSelectorLink
-                            text={props.task.description}
-                            onPress={() => Navigation.navigate(ROUTES.NEW_TASK_DESCRIPTION)}
-                            label="newTaskPage.description"
-                        />
-                    </View>
-                    <View style={styles.mb5}>
-                        <TaskSelectorLink
-                            icons={assignee.icons}
-                            text={assignee.displayName}
-                            alternateText={assignee.subtitle}
-                            onPress={() => Navigation.navigate(ROUTES.NEW_TASK_ASSIGNEE)}
-                            label="newTaskPage.assignee"
-                        />
-                    </View>
-                    <View style={styles.mb5}>
-                        <TaskSelectorLink
-                            icons={shareDestination.icons}
-                            text={shareDestination.displayName}
-                            alternateText={shareDestination.subtitle}
-                            onPress={() => Navigation.navigate(ROUTES.NEW_TASK_SHARE_DESTINATION)}
-                            label="newTaskPage.shareSomewhere"
-                            isShareDestination
-                            disabled={Boolean(props.task.parentReportID)}
-                        />
-                    </View>
+            <View style={[styles.mt5, styles.containerWithSpaceBetween]}>
+                <View style={styles.mb5}>
+                    <MenuItemWithTopDescription
+                        description={props.translate('newTaskPage.title')}
+                        title={props.task.title}
+                        onPress={() => Navigation.navigate(ROUTES.NEW_TASK_TITLE)}
+                        shouldShowRightIcon
+                    />
+                    <MenuItemWithTopDescription
+                        description={props.translate('newTaskPage.description')}
+                        title={props.task.description}
+                        onPress={() => Navigation.navigate(ROUTES.NEW_TASK_DESCRIPTION)}
+                        shouldShowRightIcon
+                    />
+                    <MenuItemWithTopDescription
+                        label={assignee.displayName ? props.translate('newTaskPage.assignee') : ''}
+                        description={assignee.displayName ? assignee.displayName : props.translate('newTaskPage.assignee')}
+                        title={assignee.subtitle || ""}
+                        icon={assignee.icons}
+                        onPress={() => Navigation.navigate(ROUTES.NEW_TASK_ASSIGNEE)}
+                        shouldShowRightIcon
+                    />
+                </View>
+                <View style={styles.mb5}>
+                    <MenuItemWithTopDescription
+                        label={shareDestination.displayName ? props.translate('newTaskPage.shareSomewhere') : ''}
+                        description={shareDestination.displayName ? shareDestination.displayName : props.translate('newTaskPage.shareSomewhere')}
+                        title={shareDestination.subtitle || ""}
+                        icon={shareDestination.icons}
+                        onPress={() => Navigation.navigate(ROUTES.NEW_TASK_SHARE_DESTINATION)}
+                        shouldShowRightIcon
+                    />
                 </View>
                 <FormAlertWithSubmitButton
                     isAlertVisible={submitError}
@@ -169,7 +165,7 @@ const NewTaskPage = (props) => {
                     onSubmit={() => onSubmit()}
                     enabledWhenOffline
                     buttonText={props.translate('newTaskPage.confirmTask')}
-                    containerStyles={[styles.mh0, styles.mt5, styles.flex1]}
+                    containerStyles={[styles.mh0, styles.mt5, styles.flex1, styles.ph5]}
                 />
             </View>
         </ScreenWrapper>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 6968016b1503..2474f6859259 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1710,13 +1710,6 @@ const styles = {
         backgroundColor: themeColors.transparent,
     },
 
-    taskSelectorLink: {
-        alignSelf: 'center',
-        width: '100%',
-        padding: 6,
-        backgroundColor: themeColors.transparent,
-    },
-
     chatItemAttachmentPlaceholder: {
         backgroundColor: themeColors.sidebar,
         borderColor: themeColors.border,

From fe9ba8d687a2a5e4e74e4c1cb42d0e75c30623b8 Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Mon, 5 Jun 2023 16:44:22 +0500
Subject: [PATCH 02/14] fix: prettier errors

---
 src/components/MenuItem.js          | 12 ++++++++----
 src/components/menuItemPropTypes.js |  6 +-----
 src/pages/tasks/NewTaskPage.js      |  4 ++--
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 8e1a23445db4..bbbb0eda3f98 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -95,8 +95,12 @@ const MenuItem = (props) => {
     ]);
 
     const fallbackAvatarSize = props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT;
-    const stylesWithoutPadding = _.isArray(props.style) ? _.map(props.style, style => _.omit(style, ['padding', 'paddingVertical', 'paddingHorizontal'])) : _.omit(props.style, ['padding', 'paddingVertical', 'paddingHorizontal']);
-    const paddingStyles = _.isArray(props.style) ? _.map(props.style, style => _.pick(style, ['padding', 'paddingVertical', 'paddingHorizontal'])) : _.pick(props.style, ['padding', 'paddingVertical', 'paddingHorizontal']);
+    const stylesWithoutPadding = _.isArray(props.style)
+        ? _.map(props.style, (style) => _.omit(style, ['padding', 'paddingVertical', 'paddingHorizontal']))
+        : _.omit(props.style, ['padding', 'paddingVertical', 'paddingHorizontal']);
+    const paddingStyles = _.isArray(props.style)
+        ? _.map(props.style, (style) => _.pick(style, ['padding', 'paddingVertical', 'paddingHorizontal']))
+        : _.pick(props.style, ['padding', 'paddingVertical', 'paddingHorizontal']);
 
     return (
         <PressableWithSecondaryInteraction
@@ -126,11 +130,11 @@ const MenuItem = (props) => {
         >
             {({hovered, pressed}) => (
                 <>
-                    {props.label &&
+                    {props.label && (
                         <View style={props.icon ? styles.mb2 : null}>
                             <Text style={StyleUtils.combineStyles(styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting, styles.pre)}>{props.label}</Text>
                         </View>
-                    }
+                    )}
                     <View style={stylesWithoutPadding}>
                         <View style={[styles.flexRow, styles.pointerEventsAuto, styles.flex1, props.disabled && styles.cursorDisabled]}>
                             {Boolean(props.icon) && _.isArray(props.icon) && (
diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
index 4291a3acbb41..3909f446c907 100644
--- a/src/components/menuItemPropTypes.js
+++ b/src/components/menuItemPropTypes.js
@@ -22,11 +22,7 @@ const propTypes = {
     onPress: PropTypes.func,
 
     /** Icon to display on the left side of component */
-    icon: PropTypes.oneOfType([
-        PropTypes.elementType, 
-        PropTypes.string, 
-        PropTypes.arrayOf(avatarPropTypes)
-    ]),
+    icon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.string, PropTypes.arrayOf(avatarPropTypes)]),
 
     /** Icon Width */
     iconWidth: PropTypes.number,
diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
index 77e97c084184..33e35f7008c0 100644
--- a/src/pages/tasks/NewTaskPage.js
+++ b/src/pages/tasks/NewTaskPage.js
@@ -143,7 +143,7 @@ const NewTaskPage = (props) => {
                     <MenuItemWithTopDescription
                         label={assignee.displayName ? props.translate('newTaskPage.assignee') : ''}
                         description={assignee.displayName ? assignee.displayName : props.translate('newTaskPage.assignee')}
-                        title={assignee.subtitle || ""}
+                        title={assignee.subtitle || ''}
                         icon={assignee.icons}
                         onPress={() => Navigation.navigate(ROUTES.NEW_TASK_ASSIGNEE)}
                         shouldShowRightIcon
@@ -153,7 +153,7 @@ const NewTaskPage = (props) => {
                     <MenuItemWithTopDescription
                         label={shareDestination.displayName ? props.translate('newTaskPage.shareSomewhere') : ''}
                         description={shareDestination.displayName ? shareDestination.displayName : props.translate('newTaskPage.shareSomewhere')}
-                        title={shareDestination.subtitle || ""}
+                        title={shareDestination.subtitle || ''}
                         icon={shareDestination.icons}
                         onPress={() => Navigation.navigate(ROUTES.NEW_TASK_SHARE_DESTINATION)}
                         shouldShowRightIcon

From 8290ff18e87e49360e5d03a60259a0d818af00b0 Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Tue, 6 Jun 2023 16:37:52 +0500
Subject: [PATCH 03/14] fix: removed extra space between task menu items

---
 src/pages/tasks/NewTaskPage.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
index 5362b7471ad4..87e1abbfcfad 100644
--- a/src/pages/tasks/NewTaskPage.js
+++ b/src/pages/tasks/NewTaskPage.js
@@ -147,9 +147,8 @@ const NewTaskPage = (props) => {
                         icon={assignee.icons}
                         onPress={() => Navigation.navigate(ROUTES.NEW_TASK_ASSIGNEE)}
                         shouldShowRightIcon
+                        style={styles.popoverMenuItem}
                     />
-                </View>
-                <View style={styles.mb5}>
                     <MenuItemWithTopDescription
                         label={shareDestination.displayName ? props.translate('newTaskPage.shareSomewhere') : ''}
                         description={shareDestination.displayName ? shareDestination.displayName : props.translate('newTaskPage.shareSomewhere')}

From 5f0a6ff99dc1844278d9112c2f33dd18d176cf25 Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Wed, 7 Jun 2023 05:08:07 +0500
Subject: [PATCH 04/14] fix: vertically center the menu item right icons

---
 src/components/MenuItem.js     | 104 ++++++++++++++++-----------------
 src/pages/tasks/NewTaskPage.js |  14 ++---
 2 files changed, 56 insertions(+), 62 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 9f744563b210..3f03726d0a7c 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -96,12 +96,6 @@ const MenuItem = (props) => {
     ]);
 
     const fallbackAvatarSize = props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT;
-    const stylesWithoutPadding = _.isArray(props.style)
-        ? _.map(props.style, (style) => _.omit(style, ['padding', 'paddingVertical', 'paddingHorizontal']))
-        : _.omit(props.style, ['padding', 'paddingVertical', 'paddingHorizontal']);
-    const paddingStyles = _.isArray(props.style)
-        ? _.map(props.style, (style) => _.pick(style, ['padding', 'paddingVertical', 'paddingHorizontal']))
-        : _.pick(props.style, ['padding', 'paddingVertical', 'paddingHorizontal']);
 
     return (
         <PressableWithSecondaryInteraction
@@ -120,7 +114,7 @@ const MenuItem = (props) => {
             onPressOut={ControlSelection.unblock}
             onSecondaryInteraction={props.onSecondaryInteraction}
             style={({hovered, pressed}) => [
-                paddingStyles,
+                props.style,
                 !props.interactive && styles.cursorDefault,
                 StyleUtils.getButtonBackgroundColorStyle(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive), true),
                 (hovered || pressed) && props.hoverAndPressStyle,
@@ -131,12 +125,12 @@ const MenuItem = (props) => {
         >
             {({hovered, pressed}) => (
                 <>
-                    {props.label && (
-                        <View style={props.icon ? styles.mb2 : null}>
-                            <Text style={StyleUtils.combineStyles(styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting, styles.pre)}>{props.label}</Text>
-                        </View>
-                    )}
-                    <View style={stylesWithoutPadding}>
+                    <View style={[styles.flexColumn]}>
+                        {props.label && (
+                            <View style={props.icon ? styles.mb2 : null}>
+                                <Text style={StyleUtils.combineStyles(styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting, styles.pre)}>{props.label}</Text>
+                            </View>
+                        )}
                         <View style={[styles.flexRow, styles.pointerEventsAuto, styles.flex1, props.disabled && styles.cursorDisabled]}>
                             {Boolean(props.icon) && _.isArray(props.icon) && (
                                 <MultipleAvatars
@@ -230,49 +224,49 @@ const MenuItem = (props) => {
                                 )}
                             </View>
                         </View>
-                        <View style={[styles.flexRow, styles.menuItemTextContainer, styles.pointerEventsNone]}>
-                            {Boolean(props.badgeText) && (
-                                <Badge
-                                    text={props.badgeText}
-                                    badgeStyles={[styles.alignSelfCenter, props.brickRoadIndicator ? styles.mr2 : undefined, props.focused || hovered || pressed ? styles.hoveredButton : {}]}
+                    </View>
+                    <View style={[styles.flexRow, styles.menuItemTextContainer, styles.pointerEventsNone]}>
+                        {Boolean(props.badgeText) && (
+                            <Badge
+                                text={props.badgeText}
+                                badgeStyles={[styles.alignSelfCenter, props.brickRoadIndicator ? styles.mr2 : undefined, props.focused || hovered || pressed ? styles.hoveredButton : {}]}
+                            />
+                        )}
+                        {/* Since subtitle can be of type number, we should allow 0 to be shown */}
+                        {(props.subtitle || props.subtitle === 0) && (
+                            <View style={[styles.justifyContentCenter, styles.mr1]}>
+                                <Text style={[styles.textLabelSupporting, props.style]}>{props.subtitle}</Text>
+                            </View>
+                        )}
+                        {!_.isEmpty(props.floatRightAvatars) && (
+                            <View style={[styles.justifyContentCenter, props.brickRoadIndicator ? styles.mr2 : undefined]}>
+                                <MultipleAvatars
+                                    isHovered={hovered}
+                                    isPressed={pressed}
+                                    icons={props.floatRightAvatars}
+                                    size={props.avatarSize || fallbackAvatarSize}
+                                    fallbackIcon={defaultWorkspaceAvatars.WorkspaceBuilding}
+                                    shouldStackHorizontally={props.shouldStackHorizontally}
                                 />
-                            )}
-                            {/* Since subtitle can be of type number, we should allow 0 to be shown */}
-                            {(props.subtitle || props.subtitle === 0) && (
-                                <View style={[styles.justifyContentCenter, styles.mr1]}>
-                                    <Text style={[styles.textLabelSupporting, props.style]}>{props.subtitle}</Text>
-                                </View>
-                            )}
-                            {!_.isEmpty(props.floatRightAvatars) && (
-                                <View style={[styles.justifyContentCenter, props.brickRoadIndicator ? styles.mr2 : undefined]}>
-                                    <MultipleAvatars
-                                        isHovered={hovered}
-                                        isPressed={pressed}
-                                        icons={props.floatRightAvatars}
-                                        size={props.avatarSize || fallbackAvatarSize}
-                                        fallbackIcon={defaultWorkspaceAvatars.WorkspaceBuilding}
-                                        shouldStackHorizontally={props.shouldStackHorizontally}
-                                    />
-                                </View>
-                            )}
-                            {Boolean(props.brickRoadIndicator) && (
-                                <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.ml1]}>
-                                    <Icon
-                                        src={Expensicons.DotIndicator}
-                                        fill={props.brickRoadIndicator === 'error' ? colors.red : colors.green}
-                                    />
-                                </View>
-                            )}
-                            {Boolean(props.shouldShowRightIcon) && (
-                                <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, props.disabled && styles.cursorDisabled]}>
-                                    <Icon
-                                        src={props.iconRight}
-                                        fill={StyleUtils.getIconFillColor(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive))}
-                                    />
-                                </View>
-                            )}
-                            {props.shouldShowSelectedState && <SelectCircle isChecked={props.isSelected} />}
-                        </View>
+                            </View>
+                        )}
+                        {Boolean(props.brickRoadIndicator) && (
+                            <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.ml1]}>
+                                <Icon
+                                    src={Expensicons.DotIndicator}
+                                    fill={props.brickRoadIndicator === 'error' ? colors.red : colors.green}
+                                />
+                            </View>
+                        )}
+                        {Boolean(props.shouldShowRightIcon) && (
+                            <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, props.disabled && styles.cursorDisabled]}>
+                                <Icon
+                                    src={props.iconRight}
+                                    fill={StyleUtils.getIconFillColor(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive))}
+                                />
+                            </View>
+                        )}
+                        {props.shouldShowSelectedState && <SelectCircle isChecked={props.isSelected} />}
                     </View>
                 </>
             )}
diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
index 87e1abbfcfad..5fa993b00746 100644
--- a/src/pages/tasks/NewTaskPage.js
+++ b/src/pages/tasks/NewTaskPage.js
@@ -13,6 +13,7 @@ import ONYXKEYS from '../../ONYXKEYS';
 import Permissions from '../../libs/Permissions';
 import ROUTES from '../../ROUTES';
 import MenuItemWithTopDescription from '../../components/MenuItemWithTopDescription';
+import MenuItem from '../../components/MenuItem';
 import reportPropTypes from '../reportPropTypes';
 import * as TaskUtils from '../../libs/actions/Task';
 import * as OptionsListUtils from '../../libs/OptionsListUtils';
@@ -140,19 +141,18 @@ const NewTaskPage = (props) => {
                         onPress={() => Navigation.navigate(ROUTES.NEW_TASK_DESCRIPTION)}
                         shouldShowRightIcon
                     />
-                    <MenuItemWithTopDescription
+                    <MenuItem
                         label={assignee.displayName ? props.translate('newTaskPage.assignee') : ''}
-                        description={assignee.displayName ? assignee.displayName : props.translate('newTaskPage.assignee')}
-                        title={assignee.subtitle || ''}
+                        title={assignee.displayName || ''}
+                        description={assignee.subtitle ? assignee.subtitle : props.translate('newTaskPage.assignee')}
                         icon={assignee.icons}
                         onPress={() => Navigation.navigate(ROUTES.NEW_TASK_ASSIGNEE)}
                         shouldShowRightIcon
-                        style={styles.popoverMenuItem}
                     />
-                    <MenuItemWithTopDescription
+                    <MenuItem
                         label={shareDestination.displayName ? props.translate('newTaskPage.shareSomewhere') : ''}
-                        description={shareDestination.displayName ? shareDestination.displayName : props.translate('newTaskPage.shareSomewhere')}
-                        title={shareDestination.subtitle || ''}
+                        title={shareDestination.displayName || ''}
+                        description={shareDestination.subtitle ? shareDestination.subtitle : props.translate('newTaskPage.shareSomewhere')}
                         icon={shareDestination.icons}
                         onPress={() => Navigation.navigate(ROUTES.NEW_TASK_SHARE_DESTINATION)}
                         shouldShowRightIcon

From 7fd48bcbb2b7e45411284121808ed18c43c03790 Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Wed, 7 Jun 2023 05:12:21 +0500
Subject: [PATCH 05/14] fix: make menu item container take up full height

---
 src/components/MenuItem.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 3f03726d0a7c..f3382c2c8cd5 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -125,7 +125,7 @@ const MenuItem = (props) => {
         >
             {({hovered, pressed}) => (
                 <>
-                    <View style={[styles.flexColumn]}>
+                    <View style={[styles.flexColumn, styles.flex1]}>
                         {props.label && (
                             <View style={props.icon ? styles.mb2 : null}>
                                 <Text style={StyleUtils.combineStyles(styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting, styles.pre)}>{props.label}</Text>

From 58a13b38c4bd786501f303c895c428d014b0225d Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Wed, 7 Jun 2023 15:51:03 +0500
Subject: [PATCH 06/14] fix: add storybook item for the updated menuitem

---
 src/components/MenuItem.js      |  2 +-
 src/stories/MenuItem.stories.js | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index f3382c2c8cd5..17f84f77cd6b 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -131,7 +131,7 @@ const MenuItem = (props) => {
                                 <Text style={StyleUtils.combineStyles(styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting, styles.pre)}>{props.label}</Text>
                             </View>
                         )}
-                        <View style={[styles.flexRow, styles.pointerEventsAuto, styles.flex1, props.disabled && styles.cursorDisabled]}>
+                        <View style={[styles.flexRow, styles.pointerEventsAuto, props.disabled && styles.cursorDisabled]}>
                             {Boolean(props.icon) && _.isArray(props.icon) && (
                                 <MultipleAvatars
                                     icons={props.icon}
diff --git a/src/stories/MenuItem.stories.js b/src/stories/MenuItem.stories.js
index 99d7bf4f1c2e..0c01c8944e9e 100644
--- a/src/stories/MenuItem.stories.js
+++ b/src/stories/MenuItem.stories.js
@@ -54,6 +54,17 @@ RightIconAndDescription.args = {
     shouldShowRightIcon: true,
 };
 
+const RightIconAndDescriptionWithLabel = Template.bind({});
+RightIconAndDescriptionWithLabel.args = {
+    label: 'Account number',
+    title: 'Alberta Bobbeth Charleson',
+    description: 'Account ending in 1111',
+    icon: Chase,
+    iconHeight: variables.iconSizeExtraLarge,
+    iconWidth: variables.iconSizeExtraLarge,
+    shouldShowRightIcon: true,
+};
+
 const Selected = Template.bind({});
 Selected.args = {
     title: 'Alberta Bobbeth Charleson',
@@ -116,4 +127,4 @@ BrickRoadIndicatorFailure.args = {
 };
 
 export default story;
-export {Default, Description, RightIcon, RightIconAndDescription, Selected, BadgeText, Focused, Disabled, BrickRoadIndicatorSuccess, BrickRoadIndicatorFailure};
+export {Default, Description, RightIcon, RightIconAndDescription, Selected, BadgeText, Focused, Disabled, BrickRoadIndicatorSuccess, BrickRoadIndicatorFailure, RightIconAndDescriptionWithLabel};

From 3602dfc8eaea0427b37db7a552efbe5bec843109 Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Thu, 8 Jun 2023 00:19:00 +0500
Subject: [PATCH 07/14] fix: lint errors

---
 src/stories/MenuItem.stories.js | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/stories/MenuItem.stories.js b/src/stories/MenuItem.stories.js
index 0c01c8944e9e..1b5b550a7e51 100644
--- a/src/stories/MenuItem.stories.js
+++ b/src/stories/MenuItem.stories.js
@@ -127,4 +127,16 @@ BrickRoadIndicatorFailure.args = {
 };
 
 export default story;
-export {Default, Description, RightIcon, RightIconAndDescription, Selected, BadgeText, Focused, Disabled, BrickRoadIndicatorSuccess, BrickRoadIndicatorFailure, RightIconAndDescriptionWithLabel};
+export {
+    Default,
+    Description,
+    RightIcon,
+    RightIconAndDescription,
+    Selected,
+    BadgeText,
+    Focused,
+    Disabled,
+    BrickRoadIndicatorSuccess,
+    BrickRoadIndicatorFailure,
+    RightIconAndDescriptionWithLabel,
+};

From 26e14c50190298fc77babfc093a6340f36a20ddf Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Thu, 8 Jun 2023 01:06:39 +0500
Subject: [PATCH 08/14] Update src/components/MenuItem.js

Co-authored-by: Abdelhafidh Belalia <16493223+s77rt@users.noreply.github.com>
---
 src/components/MenuItem.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 17f84f77cd6b..4e21864fcbc2 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -126,7 +126,7 @@ const MenuItem = (props) => {
             {({hovered, pressed}) => (
                 <>
                     <View style={[styles.flexColumn, styles.flex1]}>
-                        {props.label && (
+                        {Boolean(props.label) && (
                             <View style={props.icon ? styles.mb2 : null}>
                                 <Text style={StyleUtils.combineStyles(styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting, styles.pre)}>{props.label}</Text>
                             </View>

From a49252965a117bca45f071f65ddba3e4c3462c25 Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Thu, 8 Jun 2023 02:37:21 +0500
Subject: [PATCH 09/14] fix: make title optional in menu item

---
 src/components/menuItemPropTypes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
index 3909f446c907..bb8405ae71e7 100644
--- a/src/components/menuItemPropTypes.js
+++ b/src/components/menuItemPropTypes.js
@@ -31,7 +31,7 @@ const propTypes = {
     iconHeight: PropTypes.number,
 
     /** Text to display for the item */
-    title: PropTypes.string.isRequired,
+    title: PropTypes.string,
 
     /** Text that appears above the title */
     label: PropTypes.string,

From acf461311dec8f0ea4bd8ab3fd828075758a7c53 Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Thu, 8 Jun 2023 04:03:12 +0500
Subject: [PATCH 10/14] fix: fallback empty text for task description

---
 src/components/menuItemPropTypes.js | 2 +-
 src/pages/tasks/NewTaskPage.js      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
index bb8405ae71e7..3909f446c907 100644
--- a/src/components/menuItemPropTypes.js
+++ b/src/components/menuItemPropTypes.js
@@ -31,7 +31,7 @@ const propTypes = {
     iconHeight: PropTypes.number,
 
     /** Text to display for the item */
-    title: PropTypes.string,
+    title: PropTypes.string.isRequired,
 
     /** Text that appears above the title */
     label: PropTypes.string,
diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
index 906b752d5613..2407a9714781 100644
--- a/src/pages/tasks/NewTaskPage.js
+++ b/src/pages/tasks/NewTaskPage.js
@@ -140,13 +140,13 @@ const NewTaskPage = (props) => {
                 <View style={styles.mb5}>
                     <MenuItemWithTopDescription
                         description={props.translate('newTaskPage.title')}
-                        title={props.task.title}
+                        title={props.task.title || ''}
                         onPress={() => Navigation.navigate(ROUTES.NEW_TASK_TITLE)}
                         shouldShowRightIcon
                     />
                     <MenuItemWithTopDescription
                         description={props.translate('newTaskPage.description')}
-                        title={props.task.description}
+                        title={props.task.description || ''}
                         onPress={() => Navigation.navigate(ROUTES.NEW_TASK_DESCRIPTION)}
                         shouldShowRightIcon
                     />

From 6518b0231d8b12df4d51415216eba2917cadfbb4 Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Thu, 8 Jun 2023 04:45:11 +0500
Subject: [PATCH 11/14] fix: incorrect task page menu item description

---
 src/pages/tasks/NewTaskPage.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
index 2407a9714781..ad936b900c1e 100644
--- a/src/pages/tasks/NewTaskPage.js
+++ b/src/pages/tasks/NewTaskPage.js
@@ -153,7 +153,7 @@ const NewTaskPage = (props) => {
                     <MenuItem
                         label={assignee.displayName ? props.translate('newTaskPage.assignee') : ''}
                         title={assignee.displayName || ''}
-                        description={assignee.subtitle ? assignee.subtitle : props.translate('newTaskPage.assignee')}
+                        description={assignee.displayName ? assignee.subtitle : props.translate('newTaskPage.assignee')}
                         icon={assignee.icons}
                         onPress={() => Navigation.navigate(ROUTES.NEW_TASK_ASSIGNEE)}
                         shouldShowRightIcon
@@ -161,7 +161,7 @@ const NewTaskPage = (props) => {
                     <MenuItem
                         label={shareDestination.displayName ? props.translate('newTaskPage.shareSomewhere') : ''}
                         title={shareDestination.displayName || ''}
-                        description={shareDestination.subtitle ? shareDestination.subtitle : props.translate('newTaskPage.shareSomewhere')}
+                        description={shareDestination.displayName ? shareDestination.subtitle : props.translate('newTaskPage.shareSomewhere')}
                         icon={shareDestination.icons}
                         onPress={() => Navigation.navigate(ROUTES.NEW_TASK_SHARE_DESTINATION)}
                         shouldShowRightIcon

From 553b3c6949596e4ccba4c5dc18ed70c6eda75085 Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Fri, 9 Jun 2023 00:22:45 +0500
Subject: [PATCH 12/14] fix: use correct border for MultipleAvatar inside
 MenuItem

---
 src/components/MenuItem.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 4e21864fcbc2..abf4909f5d61 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -134,9 +134,12 @@ const MenuItem = (props) => {
                         <View style={[styles.flexRow, styles.pointerEventsAuto, props.disabled && styles.cursorDisabled]}>
                             {Boolean(props.icon) && _.isArray(props.icon) && (
                                 <MultipleAvatars
+                                    isHovered={hovered}
                                     icons={props.icon}
                                     size={CONST.AVATAR_SIZE.DEFAULT}
-                                    secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(themeColors.appBG)]}
+                                    secondAvatarStyle={[
+                                        StyleUtils.getBackgroundAndBorderStyle(hovered ? themeColors.border : themeColors.appBG),
+                                    ]}
                                 />
                             )}
                             {Boolean(props.icon) && !_.isArray(props.icon) && (

From 1310ded170e1fd1fb80b8f732e8f496c5d2bf09c Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Fri, 9 Jun 2023 00:28:43 +0500
Subject: [PATCH 13/14] fix: prettier errors

---
 src/components/MenuItem.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index abf4909f5d61..1a521212c6e2 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -137,9 +137,7 @@ const MenuItem = (props) => {
                                     isHovered={hovered}
                                     icons={props.icon}
                                     size={CONST.AVATAR_SIZE.DEFAULT}
-                                    secondAvatarStyle={[
-                                        StyleUtils.getBackgroundAndBorderStyle(hovered ? themeColors.border : themeColors.appBG),
-                                    ]}
+                                    secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(hovered ? themeColors.border : themeColors.appBG)]}
                                 />
                             )}
                             {Boolean(props.icon) && !_.isArray(props.icon) && (

From d4e51ecb9ee3a94589b7c4a053be6c338c14a24b Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Fri, 9 Jun 2023 02:56:59 +0500
Subject: [PATCH 14/14] fix: add press colour for menu item avatars

---
 src/components/MenuItem.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 1a521212c6e2..77b4d559701d 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -135,9 +135,14 @@ const MenuItem = (props) => {
                             {Boolean(props.icon) && _.isArray(props.icon) && (
                                 <MultipleAvatars
                                     isHovered={hovered}
+                                    isPressed={pressed}
                                     icons={props.icon}
                                     size={CONST.AVATAR_SIZE.DEFAULT}
-                                    secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(hovered ? themeColors.border : themeColors.appBG)]}
+                                    secondAvatarStyle={[
+                                        StyleUtils.getBackgroundAndBorderStyle(themeColors.sidebar),
+                                        pressed ? StyleUtils.getBackgroundAndBorderStyle(themeColors.buttonPressedBG) : undefined,
+                                        hovered && !pressed ? StyleUtils.getBackgroundAndBorderStyle(themeColors.border) : undefined,
+                                    ]}
                                 />
                             )}
                             {Boolean(props.icon) && !_.isArray(props.icon) && (