From 0e5861ac33e6567c99d60c63a55456e7db19256d Mon Sep 17 00:00:00 2001 From: Simon Hornby Date: Thu, 7 Dec 2023 12:03:19 +0100 Subject: [PATCH] chore: use explicit images for inverted operator rather than a boolean not operator (#5565) --- frontend/src/assets/icons/24_Negator off.svg | 3 --- frontend/src/assets/icons/24_Negator.svg | 3 --- frontend/src/assets/icons/not_operator_selected.svg | 5 +++++ frontend/src/assets/icons/not_operator_unselected.svg | 3 +++ .../InvertedOperatorButton/InvertedOperatorButton.tsx | 8 ++++---- .../ConstraintViewHeaderOperator.tsx | 6 ++++-- .../ConstraintAccordionViewHeader/StyledIconWrapper.tsx | 5 ++++- 7 files changed, 20 insertions(+), 13 deletions(-) delete mode 100644 frontend/src/assets/icons/24_Negator off.svg delete mode 100644 frontend/src/assets/icons/24_Negator.svg create mode 100644 frontend/src/assets/icons/not_operator_selected.svg create mode 100644 frontend/src/assets/icons/not_operator_unselected.svg 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,