Chore: constraint context field legal values improvement (#6729)

Improves how we show context field legal values in the new strategy
configuration.

Refactored makeStyles to styled components 

Closes #
[1-2235](https://linear.app/unleash/issue/1-2235/context-field-ui-in-strategy-configuration)

Before: 

![Screenshot 2024-03-28 at 12 19
12](https://github.com/Unleash/unleash/assets/104830839/43c62cf4-f344-476f-9ef6-75e388fab000)

After:

![Screenshot 2024-03-28 at 13 03
46](https://github.com/Unleash/unleash/assets/104830839/16dd03e0-bc67-402b-ba54-56fa1af136a5)

Signed-off-by: andreas-unleash <andreas@getunleash.ai>

frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts

@@ -1,17 +1,24 @@
-import { makeStyles } from 'tss-react/mui';
+import { styled } from '@mui/material';
 
-export const useStyles = makeStyles()((theme) => ({
+export const StyledContainer = styled('div')(({ theme }) => ({
-    container: {
     display: 'inline-block',
     wordBreak: 'break-word',
+    padding: theme.spacing(0.5, 1),
+    background: theme.palette.common.white,
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+
+    '&:hover': {
+        border: `2px solid ${theme.palette.primary.main}`,
     },
-    value: {
+}));
+
+export const StyledValue = styled('div')(({ theme }) => ({
     lineHeight: 1.33,
     fontSize: theme.fontSizes.smallBody,
-    },
+}));
-    description: {
+export const StyledDescription = styled('div')(({ theme }) => ({
     lineHeight: 1.33,
     fontSize: theme.fontSizes.smallerBody,
     color: theme.palette.action.active,
-    },
 }));

frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.tsx

@@ -1,5 +1,9 @@
 import type { ILegalValue } from 'interfaces/context';
-import { useStyles } from './LegalValueLabel.styles';
+import {
+    StyledContainer,
+    StyledValue,
+    StyledDescription,
+} from './LegalValueLabel.styles';
 import type React from 'react';
 import { FormControlLabel } from '@mui/material';
 
@@ -9,23 +13,21 @@ interface ILegalValueTextProps {
 }
 
 export const LegalValueLabel = ({ legal, control }: ILegalValueTextProps) => {
-    const { classes: styles } = useStyles();
-
     return (
-        <div className={styles.container}>
+        <StyledContainer>
             <FormControlLabel
                 value={legal.value}
                 control={control}
                 label={
                     <>
-                        <div className={styles.value}>{legal.value}</div>
+                        <StyledValue>{legal.value}</StyledValue>
-                        <div className={styles.description}>
+                        <StyledDescription>
                             {legal.description}
-                        </div>
+                        </StyledDescription>
                     </>
                 }
             />
-        </div>
+        </StyledContainer>
     );
 };
 

frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { Alert, Checkbox } from '@mui/material';
+import { Alert, Checkbox, styled } from '@mui/material';
 import { useThemeStyles } from 'themes/themeStyles';
 import { ConstraintValueSearch } from 'component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch';
 import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader';
@@ -50,6 +50,17 @@ export const getIllegalValues = (
     return constraintValues.filter((value) => deletedValuesSet.has(value));
 };
 
+const StyledValuesContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: theme.spacing(1),
+    padding: theme.spacing(2),
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadiusMedium,
+    maxHeight: '378px',
+    overflow: 'auto',
+}));
+
 export const RestrictiveLegalValues = ({
     data,
     values,
@@ -136,6 +147,7 @@ export const RestrictiveLegalValues = ({
                     />
                 }
             />
+            <StyledValuesContainer>
                 {filteredValues.map((match) => (
                     <LegalValueLabel
                         key={match.value}
@@ -153,7 +165,7 @@ export const RestrictiveLegalValues = ({
                         }
                     />
                 ))}
-
+            </StyledValuesContainer>
             <ConditionallyRender
                 condition={Boolean(error)}
                 show={<p className={styles.error}>{error}</p>}