+
0 && showLabel
}
show={
-
+
Constraints
-
+
}
/>
{constraints.map((constraint, index) => (
@@ -140,13 +166,9 @@ export const ConstraintAccordionList = forwardRef<
condition={Boolean(showCreateButton && onAdd)}
show={
-
+
Add any number of constraints
-
+
-
+
-
-
+
+
);
}
);
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
index 382aea7266..15718cf74a 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
@@ -5,6 +5,7 @@ import {
AccordionDetails,
SxProps,
Theme,
+ styled,
} from '@mui/material';
import { IConstraint } from 'interfaces/strategy';
import { ConstraintAccordionViewBody } from './ConstraintAccordionViewBody/ConstraintAccordionViewBody';
@@ -15,7 +16,6 @@ import {
numOperators,
semVerOperators,
} from 'constants/operators';
-import { useStyles } from '../ConstraintAccordion.styles';
interface IConstraintAccordionViewProps {
constraint: IConstraint;
@@ -26,6 +26,41 @@ interface IConstraintAccordionViewProps {
renderAfter?: JSX.Element;
}
+const StyledAccordion = styled(Accordion)(({ theme }) => ({
+ border: `1px solid ${theme.palette.dividerAlternative}`,
+ borderRadius: theme.shape.borderRadiusMedium,
+ backgroundColor: theme.palette.constraintAccordion.background,
+ boxShadow: 'none',
+ margin: 0,
+
+ '& .root': {
+ '&:before': {
+ opacity: '0 !important',
+ },
+ },
+}));
+
+const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
+ '& .root': {
+ border: 'none',
+ padding: theme.spacing(0.5, 3),
+ '&:hover .valuesExpandLabel': {
+ textDecoration: 'underline',
+ },
+ },
+}));
+const StyledAccordionDetails = styled(AccordionDetails)(({ theme }) => ({
+ borderTop: `1px dashed ${theme.palette.divider}`,
+ display: 'flex',
+ flexDirection: 'column',
+}));
+
+const StyledWrapper = styled('div')({
+ display: 'flex',
+ flexDirection: 'column',
+ width: '100%',
+});
+
export const ConstraintAccordionView = ({
constraint,
onEdit,
@@ -34,7 +69,6 @@ export const ConstraintAccordionView = ({
compact = false,
renderAfter,
}: IConstraintAccordionViewProps) => {
- const { classes: styles } = useStyles();
const [expandable, setExpandable] = useState(true);
const [expanded, setExpanded] = useState(false);
@@ -49,14 +83,8 @@ export const ConstraintAccordionView = ({
};
return (
-
-
+
-
+
{renderAfter}
-
-
+
+
-
+
-
-
+
+
);
};
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.style.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.style.ts
deleted file mode 100644
index 7d0cc2d8b8..0000000000
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.style.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
- chip: {
- margin: '0 0.5rem 0.5rem 0',
- },
- chipValue: {
- whiteSpace: 'pre',
- },
- singleValueView: {
- display: 'flex',
- alignItems: 'center',
- [theme.breakpoints.down(600)]: { flexDirection: 'column' },
- },
- singleValueText: {
- marginRight: '0.75rem',
- [theme.breakpoints.down(600)]: {
- marginBottom: '0.75rem',
- marginRight: 0,
- },
- },
- settingsParagraph: {
- display: 'flex',
- alignItems: 'center',
- padding: '0.5rem 0',
- },
-}));
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx
index 703f4eb746..44c43bf758 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx
@@ -1,29 +1,34 @@
import { IConstraint } from 'interfaces/strategy';
-import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccordion.styles';
import { formatConstraintValue } from 'utils/formatConstraintValue';
import { useLocationSettings } from 'hooks/useLocationSettings';
import { MultipleValues } from './MultipleValues/MultipleValues';
import { SingleValue } from './SingleValue/SingleValue';
+import { styled } from '@mui/material';
interface IConstraintAccordionViewBodyProps {
constraint: IConstraint;
}
+const StyledValueContainer = styled('div')(({ theme }) => ({
+ padding: theme.spacing(2, 0),
+ maxHeight: '400px',
+ overflowY: 'auto',
+}));
+
export const ConstraintAccordionViewBody = ({
constraint,
}: IConstraintAccordionViewBodyProps) => {
- const { classes: styles } = useStyles();
const { locationSettings } = useLocationSettings();
return (
);
};
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/MultipleValues/MultipleValues.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/MultipleValues/MultipleValues.tsx
index cdcb925720..efae8a2f7d 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/MultipleValues/MultipleValues.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/MultipleValues/MultipleValues.tsx
@@ -1,17 +1,23 @@
import { useState } from 'react';
-import { Chip } from '@mui/material';
+import { Chip, styled } from '@mui/material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import StringTruncator from 'component/common/StringTruncator/StringTruncator';
import { ConstraintValueSearch } from '../../../ConstraintValueSearch/ConstraintValueSearch';
-import { useStyles } from '../ConstraintAccordionViewBody.style';
interface IMultipleValuesProps {
values: string[] | undefined;
}
+const StyledTruncator = styled(StringTruncator)({
+ whiteSpace: 'pre',
+});
+
+const StyledChip = styled(Chip)(({ theme }) => ({
+ margin: theme.spacing(0, 1, 1, 0),
+}));
+
export const MultipleValues = ({ values }: IMultipleValuesProps) => {
const [filter, setFilter] = useState('');
- const { classes: styles } = useStyles();
if (!values || values.length === 0) return null;
@@ -29,17 +35,15 @@ export const MultipleValues = ({ values }: IMultipleValuesProps) => {
{values
.filter(value => value.includes(filter))
.map((value, index) => (
-
}
- className={styles.chip}
/>
))}
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
index ec3beef9ce..7e1d3f84d7 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
@@ -2,7 +2,7 @@ import { ConstraintIcon } from 'component/common/ConstraintAccordion/ConstraintI
import { IConstraint } from 'interfaces/strategy';
import { ConstraintAccordionViewHeaderInfo } from './ConstraintAccordionViewHeaderInfo';
import { ConstraintAccordionHeaderActions } from '../../ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions';
-import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccordion.styles';
+import { styled } from '@mui/system';
interface IConstraintAccordionViewHeaderProps {
constraint: IConstraint;
@@ -14,6 +14,17 @@ interface IConstraintAccordionViewHeaderProps {
compact?: boolean;
}
+const StyledContainer = styled('div')(({ theme }) => ({
+ display: 'flex',
+ alignItems: 'center',
+ width: '100%',
+ [theme.breakpoints.down('sm')]: {
+ flexDirection: 'column',
+ alignItems: 'center',
+ position: 'relative',
+ },
+}));
+
export const ConstraintAccordionViewHeader = ({
constraint,
onEdit,
@@ -23,10 +34,8 @@ export const ConstraintAccordionViewHeader = ({
expanded,
compact,
}: IConstraintAccordionViewHeaderProps) => {
- const { classes: styles } = useStyles();
-
return (
-
+
-
+
);
};