feat: remove borders, improve draggable visibility etc (#9002)

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),
     },

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 (
             <StyledAccordion status={status}>
@@ -85,7 +87,10 @@ export const ReleasePlanMilestone = ({
     }
 
     return (
-        <StyledAccordion status={status}>
+        <StyledAccordion
+            status={status}
+            onChange={(evt, expanded) => setExpanded(expanded)}
+        >
             <StyledAccordionSummary expandIcon={<ExpandMore />}>
                 <StyledTitleContainer>
                     <StyledTitle>{milestone.name}</StyledTitle>
@@ -96,8 +101,8 @@ export const ReleasePlanMilestone = ({
                 </StyledTitleContainer>
                 <StyledSecondaryLabel>
                     {milestone.strategies.length === 1
-                        ? 'View strategy'
-                        : `View ${milestone.strategies.length} strategies`}
+                        ? `${expanded ? 'Hide' : 'View'} strategy`
+                        : `${expanded ? 'Hide' : 'View'} ${milestone.strategies.length} strategies`}
                 </StyledSecondaryLabel>
             </StyledAccordionSummary>
             <StyledAccordionDetails>

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}
                         />
                     </div>