fix Add to group button has same color as background

Expensify · Aug 15, 2024 · 651c9e0 · 651c9e0
1 parent 9769bff
commit 651c9e0
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 4 deletions.
diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx
@@ -54,7 +54,7 @@ function BaseListItem<TItem extends ListItem>({
         }
 
         if (typeof rightHandSideComponent === 'function') {
-            return rightHandSideComponent(item);
+            return rightHandSideComponent(item, isFocused);
         }
 
         return rightHandSideComponent;

diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
@@ -18,7 +18,7 @@ import type UserListItem from './UserListItem';
 
 type TRightHandSideComponent<TItem extends ListItem> = {
     /** Component to display on the right side */
-    rightHandSideComponent?: ((item: TItem) => ReactElement | null | undefined) | ReactElement | null;
+    rightHandSideComponent?: ((item: TItem, isFocused?: boolean) => ReactElement | null | undefined) | ReactElement | null;
 };
 
 type CommonListItemProps<TItem extends ListItem> = {

diff --git a/src/pages/NewChatPage.tsx b/src/pages/NewChatPage.tsx
@@ -226,7 +226,7 @@ function NewChatPage({isGroupChat}: NewChatPageProps) {
     );
 
     const itemRightSideComponent = useCallback(
-        (item: ListItem & OptionsListUtils.Option) => {
+        (item: ListItem & OptionsListUtils.Option, isFocused?: boolean) => {
             if (item.isSelfDM) {
                 return null;
             }
@@ -263,12 +263,13 @@ function NewChatPage({isGroupChat}: NewChatPageProps) {
                     </PressableWithFeedback>
                 );
             }
-
+            const buttonInnerStyles = isFocused ? styles.buttonDefaultHovered : {};
             return (
                 <Button
                     onPress={() => toggleOption(item)}
                     style={[styles.pl2]}
                     text={translate('newChatPage.addToGroup')}
+                    innerStyles={buttonInnerStyles}
                     small
                 />
             );