From cdeb515488ddc173ee5ff75e4a6263a0a20af45b Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Mon, 10 Feb 2025 10:52:32 +0100
Subject: [PATCH] chore: removes extra border on collapse for the event
 timeline (#9270)

Fixes a small visual glitch where the event timeline panel (which
usually doesn't have a bottom border on the summary) would get a
bottom border during the collapsing animation.

This happens because to make the border act as we want, we switch
between using the summary's bottom border and the content's top
border, and I'd only updated one of the borders to respect the new
design.
---
 .../personalDashboard/PersonalDashboard.tsx   | 69 ++++++++++---------
 1 file changed, 38 insertions(+), 31 deletions(-)

diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
index 74295e52e7..c66a2a9534 100644
--- a/frontend/src/component/personalDashboard/PersonalDashboard.tsx
+++ b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
@@ -42,26 +42,41 @@ const ViewKeyConceptsButton = styled(Button)({
     margin: 0,
 });
 
-const SectionAccordion = styled(Accordion)(({ theme }) => ({
-    border: `1px solid ${theme.palette.divider}`,
-    borderRadius: theme.shape.borderRadiusMedium,
-    backgroundColor: theme.palette.background.paper,
-    boxShadow: 'none',
-    '& .expanded': {
-        '&:before': {
-            opacity: '0 !important',
-        },
-    },
+const SectionAccordion = styled(Accordion, {
+    shouldForwardProp: (prop) => prop !== 'withSummaryContentBorder',
+})<{ withSummaryContentBorder?: boolean }>(
+    ({ theme, withSummaryContentBorder = true }) => {
+        const borderStyle = `1px solid ${theme.palette.divider}`;
+        return {
+            border: `1px solid ${theme.palette.divider}`,
+            borderRadius: theme.shape.borderRadiusMedium,
+            backgroundColor: theme.palette.background.paper,
+            boxShadow: 'none',
+            '& .expanded': {
+                '&:before': {
+                    opacity: '0 !important',
+                },
+            },
 
-    // add a top border to the region when the accordion is collapsed.
-    // This retains the border between the summary and the region
-    // during the collapsing animation
-    "[aria-expanded='false']+.MuiCollapse-root .MuiAccordion-region": {
-        borderTop: `1px solid ${theme.palette.divider}`,
-    },
+            ...(withSummaryContentBorder && {
+                // add a top border to the region when the accordion is collapsed.
+                // This retains the border between the summary and the region
+                // during the collapsing animation
+                "[aria-expanded='false']+.MuiCollapse-root .MuiAccordion-region":
+                    {
+                        borderTop: borderStyle,
+                    },
 
-    overflow: 'hidden',
-}));
+                // add the border to the region for the accordion is expanded
+                "&>.MuiAccordionSummary-root[aria-expanded='true']": {
+                    borderBottom: borderStyle,
+                },
+            }),
+
+            overflow: 'hidden',
+        };
+    },
+);
 
 const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
     border: 'none',
@@ -73,15 +88,6 @@ const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
     },
 }));
 
-const StyledAccordionSummaryWithBorder = styled(StyledAccordionSummary)(
-    ({ theme }) => ({
-        "&[aria-expanded='true']": {
-            // only add the border when it's open
-            borderBottom: `1px solid ${theme.palette.divider}`,
-        },
-    }),
-);
-
 const StyledAccordionDetails = styled(AccordionDetails)({
     padding: 0,
 });
@@ -121,6 +127,7 @@ const EventTimelinePanel = () => {
             disableGutters
             expanded={expandTimeline ?? false}
             onChange={() => toggleSectionState('timeline')}
+            withSummaryContentBorder={false}
         >
             <StyledAccordionSummary
                 expandIcon={
@@ -175,7 +182,7 @@ const FlagPanel = () => {
             expanded={expandFlags ?? true}
             onChange={() => toggleSectionState('flags')}
         >
-            <StyledAccordionSummaryWithBorder
+            <StyledAccordionSummary
                 expandIcon={<ExpandMore titleAccess='Toggle flags section' />}
                 id='flags-panel-header'
                 aria-controls='flags-panel-content'
@@ -188,7 +195,7 @@ const FlagPanel = () => {
                         Feature flags you have created or favorited
                     </AccordionSummarySubtitle>
                 </AccordionSummaryText>
-            </StyledAccordionSummaryWithBorder>
+            </StyledAccordionSummary>
             <StyledAccordionDetails>
                 <MyFlags
                     hasProjects={projects?.length > 0}
@@ -232,7 +239,7 @@ const ProjectPanel = () => {
             expanded={expandProjects ?? true}
             onChange={() => toggleSectionState('projects')}
         >
-            <StyledAccordionSummaryWithBorder
+            <StyledAccordionSummary
                 expandIcon={
                     <ExpandMore titleAccess='Toggle projects section' />
                 }
@@ -246,7 +253,7 @@ const ProjectPanel = () => {
                         are a member of
                     </AccordionSummarySubtitle>
                 </AccordionSummaryText>
-            </StyledAccordionSummaryWithBorder>
+            </StyledAccordionSummary>
             <StyledAccordionDetails>
                 <MyProjects
                     owners={personalDashboard?.projectOwners ?? []}