Use svg icons for case sensitivity button and give it better textual representation (#9808)

Light mode:
<img width="110" alt="image"
src="https://github.com/user-attachments/assets/dba5dd69-685c-4259-ba07-f50ad7c66833"
/>
<img width="265" alt="image"
src="https://github.com/user-attachments/assets/1ac2e71b-36f7-4a90-b96c-38f9aee4cb51"
/>

Dark mode:
<img width="311" alt="image"
src="https://github.com/user-attachments/assets/780c2110-2871-4634-b755-e3e0e3681826"
/>
<img width="285" alt="image"
src="https://github.com/user-attachments/assets/fdf0d790-eee6-4640-823a-758570c53b2f"
/>

frontend/src/assets/icons/case-insensitive.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="none"><path fill="#9F9FA1" d="m2.6 10.45-.725 2.025a.696.696 0 0 1-.275.388.776.776 0 0 1-.45.137.788.788 0 0 1-.675-.35.76.76 0 0 1-.1-.75l3.15-8.35a.91.91 0 0 1 .3-.4A.77.77 0 0 1 4.3 3h.65a.77.77 0 0 1 .475.15.91.91 0 0 1 .3.4l3.15 8.375c.1.267.07.512-.088.737a.765.765 0 0 1-.662.338.77.77 0 0 1-.475-.15.91.91 0 0 1-.3-.4l-.7-2H2.6ZM3.125 9h3l-1.45-4.15h-.1L3.125 9Zm9.225 4.275c-.817 0-1.459-.213-1.925-.638-.467-.425-.7-1.004-.7-1.737 0-.7.27-1.27.812-1.713.542-.441 1.238-.662 2.088-.662.383 0 .737.03 1.062.088.325.058.604.154.838.287v-.35c0-.45-.155-.808-.463-1.075-.308-.267-.73-.4-1.262-.4a2.238 2.238 0 0 0-1.325.425.938.938 0 0 1-.5.2.687.687 0 0 1-.5-.15.658.658 0 0 1-.263-.438.521.521 0 0 1 .163-.462c.316-.283.675-.5 1.075-.65a3.9 3.9 0 0 1 1.375-.225c1.033 0 1.825.246 2.375.737.55.492.825 1.205.825 2.138v3.8c0 .2-.071.37-.213.513a.698.698 0 0 1-.512.212.72.72 0 0 1-.525-.225.72.72 0 0 1-.225-.525V12.2h-.075a2.285 2.285 0 0 1-.875.788 2.658 2.658 0 0 1-1.25.287Zm.25-1.25c.533 0 .987-.188 1.362-.563.375-.374.563-.829.563-1.362a2.848 2.848 0 0 0-.8-.3c-.3-.067-.575-.1-.825-.1-.534 0-.942.104-1.225.313-.284.208-.425.504-.425.887 0 .333.125.604.375.813.25.208.575.312.975.312Z"/><rect width="1" height="18.374" x="11.885" y=".531" fill="#6E6E70" rx=".5" transform="rotate(32.071 11.885 .531)"/></svg>

frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx

@@ -40,6 +40,9 @@ import { ConstraintOperatorSelect } from './ConstraintOperatorSelect';
 import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
 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 { ScreenReaderOnly } from 'component/common/ScreenReaderOnly/ScreenReaderOnly';
 
 const Container = styled('article')(({ theme }) => ({
     '--padding': theme.spacing(2),
@@ -123,6 +126,23 @@ const StyledButton = styled('button')(({ theme }) => ({
     },
 }));
 
+const StyledCaseInsensitiveIcon = styled(CaseInsensitiveIcon)(({ theme }) => ({
+    path: {
+        fill: theme.palette.text.disabled,
+    },
+    rect: {
+        fill: theme.palette.text.secondary,
+    },
+}));
+const StyledCaseSensitiveIcon = styled(CaseSensitiveIcon)(({ theme }) => ({
+    fill: 'currentcolor',
+}));
+
+const CaseButton = styled(StyledButton)(({ theme }) => ({
+    display: 'grid',
+    placeItems: 'center',
+}));
+
 type Props = {
     localConstraint: IConstraint;
     setContextName: (contextName: string) => void;
@@ -371,12 +391,23 @@ export const EditableConstraint: FC<Props> = ({
                     />
 
                     {showCaseSensitiveButton ? (
-                        <StyledButton
+                        <CaseButton
                             type='button'
                             onClick={toggleCaseSensitivity}
                         >
-                            {localConstraint.caseInsensitive ? 'Aa' : 'A/a'}
+                            {localConstraint.caseInsensitive ? (
-                        </StyledButton>
+                                <StyledCaseInsensitiveIcon aria-label='The match is not case sensitive.' />
+                            ) : (
+                                <StyledCaseSensitiveIcon aria-label='The match is case sensitive.' />
+                            )}
+                            <ScreenReaderOnly>
+                                Make match
+                                {localConstraint.caseInsensitive
+                                    ? ' '
+                                    : ' not '}
+                                case sensitive
+                            </ScreenReaderOnly>
+                        </CaseButton>
                     ) : null}
 
                     {!input.includes('LEGAL_VALUES') && (