Merge pull request #27264 from Pujan92/fix/26494

Fix: Select all checkbox is not aligned with member checkboxes
Expensify · Sep 14, 2023 · 105c3fd · 105c3fd
2 parents 5ed88e3 + 5e69dec
commit 105c3fd
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 20 deletions.
diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js
@@ -355,7 +355,7 @@ function BaseSelectionList({
                                             disabled={flattenedSections.allOptions.length === flattenedSections.disabledOptionsIndexes.length}
                                         />
                                         <View style={[styles.flex1]}>
-                                            <Text style={[styles.textStrong, styles.ph5]}>{translate('workspace.people.selectAll')}</Text>
+                                            <Text style={[styles.textStrong, styles.ph3]}>{translate('workspace.people.selectAll')}</Text>
                                         </View>
                                     </PressableWithFeedback>
                                 )}

diff --git a/src/components/SelectionList/UserListItem.js b/src/components/SelectionList/UserListItem.js
@@ -21,7 +21,7 @@ function UserListItem({item, isFocused = false, showTooltip, onSelectRow, onDism
 
     const avatar = (
         <Avatar
-            containerStyles={styles.pl5}
+            containerStyles={styles.pl3}
             source={lodashGet(item, 'avatar.source', '')}
             name={lodashGet(item, 'avatar.name', item.text)}
             type={lodashGet(item, 'avatar.type', CONST.ICON_TYPE_AVATAR)}
@@ -64,29 +64,31 @@ function UserListItem({item, isFocused = false, showTooltip, onSelectRow, onDism
                 hoverStyle={styles.hoveredComponentBG}
                 focusStyle={styles.hoveredComponentBG}
             >
-                <View
-                    style={[
-                        StyleUtils.getCheckboxContainerStyle(20, 4),
-                        item.isSelected && styles.checkedContainer,
-                        item.isSelected && styles.borderColorFocus,
-                        item.isDisabled && styles.cursorDisabled,
-                        item.isDisabled && styles.buttonOpacityDisabled,
-                    ]}
-                >
-                    {item.isSelected && (
-                        <Icon
-                            src={Expensicons.Checkmark}
-                            fill={themeColors.textLight}
-                            height={14}
-                            width={14}
-                        />
-                    )}
+                <View style={styles.checkboxPressable}>
+                    <View
+                        style={[
+                            StyleUtils.getCheckboxContainerStyle(20, 4),
+                            item.isSelected && styles.checkedContainer,
+                            item.isSelected && styles.borderColorFocus,
+                            item.isDisabled && styles.cursorDisabled,
+                            item.isDisabled && styles.buttonOpacityDisabled,
+                        ]}
+                    >
+                        {item.isSelected && (
+                            <Icon
+                                src={Expensicons.Checkmark}
+                                fill={themeColors.textLight}
+                                height={14}
+                                width={14}
+                            />
+                        )}
+                    </View>
                 </View>
                 {Boolean(item.avatar) &&
                     (showTooltip ? (
                         <UserDetailsTooltip
                             accountID={item.accountID}
-                            shiftHorizontal={styles.pl5.paddingLeft / 2}
+                            shiftHorizontal={styles.pl3.paddingLeft / 2}
                         >
                             <View>{avatar}</View>
                         </UserDetailsTooltip>