From 8e05c9244070617007defce44a5134038bb7f5ca Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Tue, 6 May 2025 15:42:38 +0300
Subject: [PATCH] chore: align recently used constraints to designs (#9904)

Now both of the recents have aligned styling.
Now ConstraintAccordionView accepts dashed and solid borders.


![image](https://github.com/user-attachments/assets/89fefaf5-4acc-41b0-aa7b-efb1d5e1eb63)
---
 .../ConstraintAccordionView.tsx                    | 14 +++++++++++---
 .../RecentlyUsedConstraints.tsx                    |  1 +
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
index ceaaadd137..233cf39635 100644
--- a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
+++ b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
@@ -26,10 +26,17 @@ interface IConstraintAccordionViewProps {
     compact?: boolean;
     disabled?: boolean;
     renderAfter?: JSX.Element;
+    borderStyle?: 'solid' | 'dashed';
 }
 
-const StyledAccordion = styled(Accordion)(({ theme }) => ({
-    border: `1px solid ${theme.palette.divider}`,
+interface StyledAccordionProps {
+    borderStyle?: 'solid' | 'dashed';
+}
+
+const StyledAccordion = styled(Accordion, {
+    shouldForwardProp: (prop) => prop !== 'borderStyle',
+})<StyledAccordionProps>(({ theme, borderStyle = 'solid' }) => ({
+    border: `1px ${borderStyle} ${theme.palette.divider}`,
     borderRadius: theme.shape.borderRadiusMedium,
     boxShadow: 'none',
     margin: 0,
@@ -73,6 +80,7 @@ export const ConstraintAccordionView = ({
     compact = false,
     disabled = false,
     renderAfter,
+    borderStyle = 'solid',
 }: IConstraintAccordionViewProps) => {
     const [expandable, setExpandable] = useState(true);
     const [expanded, setExpanded] = useState(false);
@@ -88,7 +96,7 @@ export const ConstraintAccordionView = ({
     };
 
     return (
-        <StyledAccordion expanded={expanded} sx={sx}>
+        <StyledAccordion expanded={expanded} sx={sx} borderStyle={borderStyle}>
             <StyledAccordionSummary
                 expandIcon={null}
                 onClick={handleClick}
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/RecentlyUsedConstraints/RecentlyUsedConstraints.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/RecentlyUsedConstraints/RecentlyUsedConstraints.tsx
index d3d743b992..9e3f9413ea 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/RecentlyUsedConstraints/RecentlyUsedConstraints.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/RecentlyUsedConstraints/RecentlyUsedConstraints.tsx
@@ -41,6 +41,7 @@ export const RecentlyUsedConstraints = ({
                     <ConstraintAccordionView
                         key={constraint[constraintId]}
                         constraint={constraint}
+                        borderStyle='dashed'
                         onUse={() => {
                             setConstraints((prev) => [...prev, constraint]);
                         }}