diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlan.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlan.tsx index 07d95f1707..8fadc39b70 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlan.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlan.tsx @@ -19,7 +19,6 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit const StyledContainer = styled('div')(({ theme }) => ({ padding: theme.spacing(2), borderRadius: theme.shape.borderRadiusMedium, - border: `1px solid ${theme.palette.divider}`, '& + &': { marginTop: theme.spacing(2), }, diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestone.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestone.tsx index 4013ee9776..ba20360969 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestone.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestone.tsx @@ -13,6 +13,7 @@ import { ReleasePlanMilestoneStatus, type MilestoneStatus, } from './ReleasePlanMilestoneStatus'; +import { useState } from 'react'; const StyledAccordion = styled(Accordion, { shouldForwardProp: (prop) => prop !== 'status', @@ -51,7 +52,6 @@ const StyledSecondaryLabel = styled('span')(({ theme }) => ({ })); const StyledAccordionDetails = styled(AccordionDetails)(({ theme }) => ({ - backgroundColor: theme.palette.envAccordion.expanded, borderBottomLeftRadius: theme.shape.borderRadiusLarge, borderBottomRightRadius: theme.shape.borderRadiusLarge, })); @@ -67,6 +67,8 @@ export const ReleasePlanMilestone = ({ status, onStartMilestone, }: IReleasePlanMilestoneProps) => { + const [expanded, setExpanded] = useState(false); + if (!milestone.strategies.length) { return ( @@ -85,7 +87,10 @@ export const ReleasePlanMilestone = ({ } return ( - + setExpanded(expanded)} + > }> {milestone.name} @@ -96,8 +101,8 @@ export const ReleasePlanMilestone = ({ {milestone.strategies.length === 1 - ? 'View strategy' - : `View ${milestone.strategies.length} strategies`} + ? `${expanded ? 'Hide' : 'View'} strategy` + : `${expanded ? 'Hide' : 'View'} ${milestone.strategies.length} strategies`} diff --git a/frontend/src/component/releases/ReleasePlanTemplate/MilestoneCard.tsx b/frontend/src/component/releases/ReleasePlanTemplate/MilestoneCard.tsx index 8a008fddbc..97d17267ce 100644 --- a/frontend/src/component/releases/ReleasePlanTemplate/MilestoneCard.tsx +++ b/frontend/src/component/releases/ReleasePlanTemplate/MilestoneCard.tsx @@ -45,9 +45,6 @@ const StyledMilestoneCard = styled(Card)(({ theme }) => ({ }, transition: 'background-color 0.2s ease-in-out', backgroundColor: theme.palette.background.default, - '&:hover': { - backgroundColor: theme.palette.neutral.light, - }, })); const StyledMilestoneCardBody = styled(Box)(({ theme }) => ({ @@ -82,7 +79,6 @@ const StyledAccordion = styled(Accordion)(({ theme }) => ({ [theme.breakpoints.down('sm')]: { justifyContent: 'center', }, - transition: 'background-color 0.2s ease-in-out', backgroundColor: theme.palette.background.default, '&:before': { opacity: '0 !important', @@ -390,7 +386,7 @@ export const MilestoneCard = ({ onEditClick={() => { onSelectEditStrategy(strg); }} - isDragging={false} + isDragging={dragItem?.id === strg.id} strategy={strg} />