diff --git a/frontend/src/assets/icons/constraint-equals.svg b/frontend/src/assets/icons/constraint-equals.svg
new file mode 100644
index 0000000000..98049d89ec
--- /dev/null
+++ b/frontend/src/assets/icons/constraint-equals.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/src/assets/icons/constraint-not-equals.svg b/frontend/src/assets/icons/constraint-not-equals.svg
new file mode 100644
index 0000000000..b20120a77f
--- /dev/null
+++ b/frontend/src/assets/icons/constraint-not-equals.svg
@@ -0,0 +1,4 @@
+
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
index 389b9268a9..583fa25893 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
@@ -42,6 +42,8 @@ import Delete from '@mui/icons-material/Delete';
import { ValueList } from './ValueList';
import { ReactComponent as CaseSensitiveIcon } from 'assets/icons/case-sensitive.svg';
import { ReactComponent as CaseInsensitiveIcon } from 'assets/icons/case-insensitive.svg';
+import { ReactComponent as EqualsIcon } from 'assets/icons/constraint-equals.svg';
+import { ReactComponent as NotEqualsIcon } from 'assets/icons/constraint-not-equals.svg';
import { ScreenReaderOnly } from 'component/common/ScreenReaderOnly/ScreenReaderOnly';
const Container = styled('article')(({ theme }) => ({
@@ -112,6 +114,8 @@ const StyledSelect = styled(GeneralSelect)(({ theme }) => ({
}));
const StyledButton = styled('button')(({ theme }) => ({
+ display: 'grid',
+ placeItems: 'center',
width: '5ch',
borderRadius: theme.shape.borderRadius,
padding: theme.spacing(0.25, 0),
@@ -134,13 +138,24 @@ const StyledCaseInsensitiveIcon = styled(CaseInsensitiveIcon)(({ theme }) => ({
fill: theme.palette.text.secondary,
},
}));
+
const StyledCaseSensitiveIcon = styled(CaseSensitiveIcon)(({ theme }) => ({
fill: 'currentcolor',
}));
-const CaseButton = styled(StyledButton)(({ theme }) => ({
- display: 'grid',
- placeItems: 'center',
+const StyledEqualsIcon = styled(EqualsIcon)(({ theme }) => ({
+ path: {
+ fill: 'currentcolor',
+ },
+}));
+
+const StyledNotEqualsIcon = styled(NotEqualsIcon)(({ theme }) => ({
+ path: {
+ fill: theme.palette.text.disabled,
+ },
+ rect: {
+ fill: theme.palette.text.secondary,
+ },
}));
type Props = {
@@ -380,7 +395,17 @@ export const EditableConstraint: FC = ({
type='button'
onClick={toggleInvertedOperator}
>
- {localConstraint.inverted ? 'aint' : 'is'}
+ {localConstraint.inverted ? (
+
+ ) : (
+
+ )}
+
+ Make the selected operator
+ {localConstraint.inverted
+ ? ' inclusive'
+ : ' exclusive'}
+
= ({
/>
{showCaseSensitiveButton ? (
-
@@ -407,7 +432,7 @@ export const EditableConstraint: FC = ({
: ' not '}
case sensitive
-
+
) : null}
{!input.includes('LEGAL_VALUES') && (