From 45a0ddd2a5daf1b66ab6a8a818fe72f6a4673520 Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Tue, 8 Apr 2025 15:55:07 +0300
Subject: [PATCH] fix: fix hover on release template card (#9721)

For some reason, using template literals do not work after its in
enterprise repo. I will try something that matches more over codebase
style.
---
 .../FeatureReleasePlanCard.tsx                     | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx
index 1b8efb5d29..0e810c551b 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx
@@ -31,6 +31,7 @@ const HoverButtonsContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     gap: theme.spacing(1),
     opacity: 0,
+    transition: 'opacity 0.1s ease-in-out',
 }));
 
 const StyledCard = styled('div')(({ theme }) => ({
@@ -49,13 +50,12 @@ const StyledCard = styled('div')(({ theme }) => ({
     textAlign: 'left',
     overflow: 'hidden',
     position: 'relative',
-    [`&:hover ${CardContent}, &:focus-within ${CardContent}`]: {
+    '&:hover .cardContent, &:focus-within .cardContent': {
         opacity: 0.5,
     },
-    [`&:hover ${HoverButtonsContainer}, &:focus-within ${HoverButtonsContainer}`]:
-        {
-            opacity: 1,
-        },
+    '&:hover .buttonContainer, &:focus-within .buttonContainer': {
+        opacity: 1,
+    },
 }));
 
 const StyledTopRow = styled('div')(({ theme }) => ({
@@ -90,7 +90,7 @@ export const FeatureReleasePlanCard = ({
 
     return (
         <StyledCard>
-            <CardContent>
+            <CardContent className='cardContent'>
                 <StyledTopRow>
                     <StyledIcon>
                         <Icon />
@@ -112,7 +112,7 @@ export const FeatureReleasePlanCard = ({
                 </Truncator>
             </CardContent>
 
-            <HoverButtonsContainer>
+            <HoverButtonsContainer className='buttonContainer'>
                 <Button
                     variant='contained'
                     size='small'