diff --git a/frontend/src/assets/icons/24_Negator off.svg b/frontend/src/assets/icons/24_Negator off.svg
deleted file mode 100644
index a3dababecf..0000000000
--- a/frontend/src/assets/icons/24_Negator off.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/frontend/src/assets/icons/24_Negator.svg b/frontend/src/assets/icons/24_Negator.svg
deleted file mode 100644
index 84e1638591..0000000000
--- a/frontend/src/assets/icons/24_Negator.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/frontend/src/assets/icons/not_operator_selected.svg b/frontend/src/assets/icons/not_operator_selected.svg
new file mode 100644
index 0000000000..366b830b91
--- /dev/null
+++ b/frontend/src/assets/icons/not_operator_selected.svg
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/frontend/src/assets/icons/not_operator_unselected.svg b/frontend/src/assets/icons/not_operator_unselected.svg
new file mode 100644
index 0000000000..dae0054475
--- /dev/null
+++ b/frontend/src/assets/icons/not_operator_unselected.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx
index f69ca2acb1..31f523fc86 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx
@@ -1,6 +1,6 @@
import { Box, Tooltip } from '@mui/material';
-import { ReactComponent as NegatedIcon } from 'assets/icons/24_Negator.svg';
-import { ReactComponent as NegatedIconOff } from 'assets/icons/24_Negator off.svg';
+import { ReactComponent as NegatedOnIcon } from 'assets/icons/not_operator_selected.svg';
+import { ReactComponent as NegatedOffIcon } from 'assets/icons/not_operator_unselected.svg';
import { IConstraint } from 'interfaces/strategy';
import {
StyledToggleButtonOff,
@@ -30,7 +30,7 @@ export const InvertedOperatorButton = ({
onClick={setInvertedOperator}
disableRipple
>
-
+
}
elseShow={
@@ -38,7 +38,7 @@ export const InvertedOperatorButton = ({
onClick={setInvertedOperator}
disableRipple
>
-
+
}
/>
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator.tsx
index 5ba0ab66d7..af3ba01a13 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator.tsx
@@ -2,11 +2,12 @@ import { IConstraint } from 'interfaces/strategy';
import { ConditionallyRender } from '../../../ConditionallyRender/ConditionallyRender';
import { Tooltip, Box, styled } from '@mui/material';
import { stringOperators } from 'constants/operators';
-import { ReactComponent as NegatedIcon } from 'assets/icons/24_Negator.svg';
+import { ReactComponent as NegatedOnIcon } from 'assets/icons/not_operator_selected.svg';
import { ConstraintOperator } from '../../ConstraintOperator/ConstraintOperator';
import { StyledIconWrapper } from './StyledIconWrapper';
import { ReactComponent as CaseSensitive } from 'assets/icons/24_Text format.svg';
import { oneOf } from 'utils/oneOf';
+import { useTheme } from '@mui/material';
interface ConstraintViewHeaderOperatorProps {
constraint: IConstraint;
@@ -31,6 +32,7 @@ export const ConstraintViewHeaderOperator = ({
constraint,
disabled = false,
}: ConstraintViewHeaderOperatorProps) => {
+ const theme = useTheme();
return (
-
+
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper.tsx
index fa420e3244..ee47d93448 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper.tsx
@@ -16,7 +16,10 @@ export const StyledIconWrapperBase = styled('div')<{
borderRadius: theme.shape.borderRadius,
}));
-const StyledPrefixIconWrapper = styled(StyledIconWrapperBase)(() => ({
+const StyledPrefixIconWrapper = styled(StyledIconWrapperBase)(({ theme }) => ({
+ width: 'auto',
+ paddingLeft: theme.spacing(1),
+ paddingRight: theme.spacing(1),
marginLeft: 0,
borderTopRightRadius: 0,
borderBottomRightRadius: 0,