chore: use explicit images for inverted operator rather than a boolea…

…n not operator (#5565)
Unleash · Dec 7, 2023 · 0e5861a · 0e5861a
1 parent e89ebf3
commit 0e5861a
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 13 deletions.
diff --git a/frontend/src/assets/icons/24_Negator off.svg b/frontend/src/assets/icons/24_Negator off.svg
diff --git a/frontend/src/assets/icons/24_Negator.svg b/frontend/src/assets/icons/24_Negator.svg
diff --git a/frontend/src/assets/icons/not_operator_selected.svg b/frontend/src/assets/icons/not_operator_selected.svg
diff --git a/frontend/src/assets/icons/not_operator_unselected.svg b/frontend/src/assets/icons/not_operator_unselected.svg
diff --git a/...straintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx b/...straintAccordionEdit/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,15 +30,15 @@ export const InvertedOperatorButton = ({
                         onClick={setInvertedOperator}
                         disableRipple
                     >
-                        <NegatedIcon />
+                        <NegatedOnIcon />
                     </StyledToggleButtonOn>
                 }
                 elseShow={
                     <StyledToggleButtonOff
                         onClick={setInvertedOperator}
                         disableRipple
                     >
-                        <NegatedIconOff />
+                        <NegatedOffIcon />
                     </StyledToggleButtonOff>
                 }
             />

diff --git a/...on/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator.tsx b/...on/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 (
         <StyledHeaderValuesContainerWrapper>
             <ConditionallyRender
@@ -39,7 +41,7 @@ export const ConstraintViewHeaderOperator = ({
                     <Tooltip title={'Operator is negated'} arrow>
                         <Box sx={{ display: 'flex' }}>
                             <StyledIconWrapper isPrefix>
-                                <NegatedIcon />
+                                <NegatedOnIcon />
                             </StyledIconWrapper>
                         </Box>
                     </Tooltip>

diff --git a/...aintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper.tsx b/...aintAccordion/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,