From bb5bab53ce49c91deddaf20cb32e2885f66a7ed6 Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Mon, 8 Sep 2025 13:27:23 +0300
Subject: [PATCH] Fix highlight for Workspace row

---
 src/pages/workspace/WorkspacesListRow.tsx | 124 +++++++++++-----------
 1 file changed, 63 insertions(+), 61 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 3ef71c7b88e8f..d62dc87b7bcd4 100644
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -141,7 +141,7 @@ function WorkspacesListRow({
         borderRadius: variables.componentBorderRadius,
         shouldHighlight: !!shouldAnimateInHighlight,
         highlightColor: theme.messageHighlightBG,
-        backgroundColor: theme.highlightBG,
+        backgroundColor: theme.transparent,
     });
 
     useEffect(() => {
@@ -213,80 +213,82 @@ function WorkspacesListRow({
     );
 
     return (
-        <Animated.View style={[styles.flexRow, styles.highlightBG, style, isWide && styles.gap5, styles.br3, styles.p5, animatedHighlightStyle, rowStyles]}>
-            <View style={[isWide ? styles.flexRow : styles.flexColumn, styles.flex1, isWide && styles.gap5]}>
-                <View style={[styles.flexRow, styles.justifyContentBetween, styles.flex2, isNarrow && styles.mb3, styles.alignItemsCenter]}>
-                    <View style={[styles.flexRow, styles.gap3, styles.flex1, styles.alignItemsCenter]}>
-                        <Avatar
-                            imageStyles={[styles.alignSelfCenter]}
-                            size={CONST.AVATAR_SIZE.DEFAULT}
-                            source={workspaceIcon}
-                            fallbackIcon={fallbackWorkspaceIcon}
-                            avatarID={policyID}
-                            name={title}
-                            type={CONST.ICON_TYPE_WORKSPACE}
-                        />
-                        <TextWithTooltip
-                            text={title}
-                            shouldShowTooltip
-                            style={[styles.flex1, styles.flexGrow1, styles.textStrong, isDeleted ? styles.offlineFeedback.deleted : {}]}
-                        />
-                    </View>
-                    {isNarrow && ThreeDotMenuOrPendingIcon}
-                </View>
-                <View style={[styles.flexRow, isWide && styles.flex1, isWide && styles.workspaceOwnerSectionMinWidth, styles.gap2, styles.alignItemsCenter]}>
-                    {!!ownerDetails && (
-                        <>
+        <View style={[styles.flexRow, styles.highlightBG, rowStyles, style, styles.br3]}>
+            <Animated.View style={[styles.flex1, styles.flexRow, styles.bgTransparent, isWide && styles.gap5, styles.p5, animatedHighlightStyle]}>
+                <View style={[isWide ? styles.flexRow : styles.flexColumn, styles.flex1, isWide && styles.gap5]}>
+                    <View style={[styles.flexRow, styles.justifyContentBetween, styles.flex2, isNarrow && styles.mb3, styles.alignItemsCenter]}>
+                        <View style={[styles.flexRow, styles.gap3, styles.flex1, styles.alignItemsCenter]}>
                             <Avatar
-                                source={ownerDetails.avatar}
-                                avatarID={ownerDetails.accountID}
-                                type={CONST.ICON_TYPE_AVATAR}
-                                size={CONST.AVATAR_SIZE.SMALL}
-                                containerStyles={styles.workspaceOwnerAvatarWrapper}
+                                imageStyles={[styles.alignSelfCenter]}
+                                size={CONST.AVATAR_SIZE.DEFAULT}
+                                source={workspaceIcon}
+                                fallbackIcon={fallbackWorkspaceIcon}
+                                avatarID={policyID}
+                                name={title}
+                                type={CONST.ICON_TYPE_WORKSPACE}
                             />
-                            <View style={styles.flex1}>
-                                <WorkspacesListRowDisplayName
-                                    isDeleted={isDeleted}
-                                    ownerName={getDisplayNameOrDefault(ownerDetails)}
+                            <TextWithTooltip
+                                text={title}
+                                shouldShowTooltip
+                                style={[styles.flex1, styles.flexGrow1, styles.textStrong, isDeleted ? styles.offlineFeedback.deleted : {}]}
+                            />
+                        </View>
+                        {isNarrow && ThreeDotMenuOrPendingIcon}
+                    </View>
+                    <View style={[styles.flexRow, isWide && styles.flex1, isWide && styles.workspaceOwnerSectionMinWidth, styles.gap2, styles.alignItemsCenter]}>
+                        {!!ownerDetails && (
+                            <>
+                                <Avatar
+                                    source={ownerDetails.avatar}
+                                    avatarID={ownerDetails.accountID}
+                                    type={CONST.ICON_TYPE_AVATAR}
+                                    size={CONST.AVATAR_SIZE.SMALL}
+                                    containerStyles={styles.workspaceOwnerAvatarWrapper}
                                 />
+                                <View style={styles.flex1}>
+                                    <WorkspacesListRowDisplayName
+                                        isDeleted={isDeleted}
+                                        ownerName={getDisplayNameOrDefault(ownerDetails)}
+                                    />
+                                    <Text
+                                        numberOfLines={1}
+                                        style={[styles.textMicro, styles.textSupporting, isDeleted ? styles.offlineFeedback.deleted : {}]}
+                                    >
+                                        {Str.removeSMSDomain(ownerDetails?.login ?? '')}
+                                    </Text>
+                                </View>
+                            </>
+                        )}
+                    </View>
+                    <View style={[styles.flexRow, isWide && styles.flex1, styles.gap2, styles.alignItemsCenter]}>
+                        <Icon
+                            src={workspaceTypeIcon(workspaceType)}
+                            width={variables.workspaceTypeIconWidth}
+                            height={variables.workspaceTypeIconWidth}
+                            additionalStyles={styles.workspaceTypeWrapper}
+                        />
+                        <View>
+                            {!!workspaceType && (
                                 <Text
                                     numberOfLines={1}
-                                    style={[styles.textMicro, styles.textSupporting, isDeleted ? styles.offlineFeedback.deleted : {}]}
+                                    style={[styles.labelStrong, isDeleted ? styles.offlineFeedback.deleted : {}]}
                                 >
-                                    {Str.removeSMSDomain(ownerDetails?.login ?? '')}
+                                    {getUserFriendlyWorkspaceType(workspaceType)}
                                 </Text>
-                            </View>
-                        </>
-                    )}
-                </View>
-                <View style={[styles.flexRow, isWide && styles.flex1, styles.gap2, styles.alignItemsCenter]}>
-                    <Icon
-                        src={workspaceTypeIcon(workspaceType)}
-                        width={variables.workspaceTypeIconWidth}
-                        height={variables.workspaceTypeIconWidth}
-                        additionalStyles={styles.workspaceTypeWrapper}
-                    />
-                    <View>
-                        {!!workspaceType && (
+                            )}
                             <Text
                                 numberOfLines={1}
-                                style={[styles.labelStrong, isDeleted ? styles.offlineFeedback.deleted : {}]}
+                                style={[styles.textMicro, styles.textSupporting, isDeleted ? styles.offlineFeedback.deleted : {}]}
                             >
-                                {getUserFriendlyWorkspaceType(workspaceType)}
+                                {translate('workspace.common.plan')}
                             </Text>
-                        )}
-                        <Text
-                            numberOfLines={1}
-                            style={[styles.textMicro, styles.textSupporting, isDeleted ? styles.offlineFeedback.deleted : {}]}
-                        >
-                            {translate('workspace.common.plan')}
-                        </Text>
+                        </View>
                     </View>
                 </View>
-            </View>
 
-            {!isNarrow && ThreeDotMenuOrPendingIcon}
-        </Animated.View>
+                {!isNarrow && ThreeDotMenuOrPendingIcon}
+            </Animated.View>
+        </View>
     );
 }