Fix icon hover effect in transaction table (#4070)

* Fix icon hover effect in transaction table

* Add release notes

* Add test

packages/desktop-client/e2e/schedules.test.js

@@ -58,6 +58,10 @@ test.describe('Schedules', () => {
     await expect(transaction.debit).toHaveText('25.00');
     await expect(transaction.credit).toHaveText('');
 
+    const icon = transaction.payee.getByTestId('schedule-icon');
+    await icon.hover();
+    await expect(page).toMatchThemeScreenshots();
+
     // go to rules page
     const rulesPage = await navigation.goToRulesPage();
     await rulesPage.searchFor('Home Depot');

packages/desktop-client/src/components/transactions/TransactionsTable.jsx

@@ -699,40 +699,42 @@ function PayeeCell({
         );
 
         return (
-          <div
-            style={{
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              display: 'flex',
-              alignItems: 'center',
-            }}
-          >
+          <>
             <PayeeIcons
               transaction={transaction}
               transferAccount={transferAccount}
               onNavigateToTransferAccount={onNavigateToTransferAccount}
               onNavigateToSchedule={onNavigateToSchedule}
             />
-            {importedPayee ? (
-              <Tooltip
-                content={
-                  <View style={{ padding: 10 }}>
-                    <Text style={{ fontWeight: 'bold' }}>Imported Payee</Text>
-                    <Text style={{ fontWeight: 'normal' }}>
-                      {importedPayee}
-                    </Text>
-                  </View>
-                }
-                style={{ ...styles.tooltip, borderRadius: '0px 5px 5px 0px' }}
-                placement="bottom"
-                triggerProps={{ delay: 750 }}
-              >
-                {payeeName}
-              </Tooltip>
-            ) : (
-              payeeName
-            )}
-          </div>
+            <div
+              style={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
+              {importedPayee ? (
+                <Tooltip
+                  content={
+                    <View style={{ padding: 10 }}>
+                      <Text style={{ fontWeight: 'bold' }}>Imported Payee</Text>
+                      <Text style={{ fontWeight: 'normal' }}>
+                        {importedPayee}
+                      </Text>
+                    </View>
+                  }
+                  style={{ ...styles.tooltip, borderRadius: '0px 5px 5px 0px' }}
+                  placement="bottom"
+                  triggerProps={{ delay: 750 }}
+                >
+                  {payeeName}
+                </Tooltip>
+              ) : (
+                payeeName
+              )}
+            </div>
+          </>
         );
       }}
     >
@@ -804,6 +806,7 @@ function PayeeIcons({
       {schedule && (
         <Button
           variant="bare"
+          data-testid="schedule-icon"
           aria-label="See schedule details"
           style={payeeIconButtonStyle}
           onPress={() => {
@@ -820,6 +823,7 @@ function PayeeIcons({
       {transferAccount && (
         <Button
           variant="bare"
+          data-testid="transfer-icon"
           aria-label="See transfer account"
           style={payeeIconButtonStyle}
           onPress={() => {

upcoming-release-notes/4070.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [jfdoming]
+---
+
+Fix regression in hover effect for icons