From a0893ad2ce8f5dbf527a297d6e2f367f4a9c1c86 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Thu, 21 Nov 2024 09:20:29 +0100
Subject: [PATCH] fix: highlight info icon when info popover is open

---
 src/components/DataDimension/ItemSelector.js                | 1 +
 src/components/DataDimension/TransferOption.js              | 5 ++++-
 src/components/DataDimension/styles/TransferOption.style.js | 3 +++
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/DataDimension/ItemSelector.js b/src/components/DataDimension/ItemSelector.js
index 67b5a2aee..68079e93c 100644
--- a/src/components/DataDimension/ItemSelector.js
+++ b/src/components/DataDimension/ItemSelector.js
@@ -510,6 +510,7 @@ const ItemSelector = ({
                         /* eslint-disable react/prop-types */
                         {...props}
                         active={isActive(props.value)}
+                        showingInfo={currentDataItem?.id === props.value}
                         icon={getIcon(getItemType(props.value))}
                         dimensionType={getDimensionType({
                             type: getItemType(props.value),
diff --git a/src/components/DataDimension/TransferOption.js b/src/components/DataDimension/TransferOption.js
index c29967dda..0fd52bdb1 100644
--- a/src/components/DataDimension/TransferOption.js
+++ b/src/components/DataDimension/TransferOption.js
@@ -17,6 +17,7 @@ export const TransferOption = ({
     dimensionType,
     dataTest,
     itemsRef,
+    showingInfo,
     onEditClick,
     onInfoClick,
 }) => {
@@ -63,7 +64,9 @@ export const TransferOption = ({
             <div className={cx('group', 'nowrap', 'typeGroup')}>
                 <span className="type">{dimensionType}</span>
                 <span
-                    className="info"
+                    className={cx('info', {
+                        active: showingInfo,
+                    })}
                     ref={(node) => {
                         node
                             ? itemsRef.current.set(value, node)
diff --git a/src/components/DataDimension/styles/TransferOption.style.js b/src/components/DataDimension/styles/TransferOption.style.js
index b7af72600..98387daca 100644
--- a/src/components/DataDimension/styles/TransferOption.style.js
+++ b/src/components/DataDimension/styles/TransferOption.style.js
@@ -87,6 +87,9 @@ export default css`
         display: flex;
         align-items: center;
     }
+    .info.active {
+        background-color: ${colors.grey200};
+    }
 
     .highlighted {
         background: ${theme.secondary700};