feat: adjust filter chips styling (#5638)

frontend/src/component/filter/AddFilterButton.tsx

@@ -6,8 +6,8 @@ import { styled } from '@mui/material';
 import { Add } from '@mui/icons-material';
 
 const StyledButton = styled(Button)(({ theme }) => ({
-    margin: theme.spacing(-1, 0, -1, 0),
+    padding: theme.spacing(0, 1.25, 0, 1.25),
-    padding: theme.spacing(1.25),
+    height: theme.spacing(3.75),
 }));
 
 interface IAddFilterButtonProps {

frontend/src/component/filter/FilterItem/FilterItemChip/FilterItemChip.tsx

@@ -17,6 +17,7 @@ const StyledChip = styled(
     borderRadius: `${theme.shape.borderRadius}px`,
     padding: 0,
     fontSize: theme.typography.body2.fontSize,
+    height: 'auto',
     ...(isActive
         ? {
               backgroundColor: theme.palette.secondary.light,
@@ -32,13 +33,13 @@ const StyledLabel = styled('div')(({ theme }) => ({
 }));
 
 const StyledCategoryIconWrapper = styled('div')(({ theme }) => ({
-    marginRight: theme.spacing(1),
+    marginRight: theme.spacing(0.5),
     display: 'flex',
     alignItems: 'center',
-    fontSize: theme.typography.h2.fontSize,
+    fontSize: theme.spacing(2),
 }));
 
-const StyledOptions = styled('span')(({ theme }) => ({
+const StyledOptions = styled('button')(({ theme }) => ({
     color: theme.palette.text.primary,
     fontWeight: theme.typography.fontWeightRegular,
     textOverflow: 'ellipsis',
@@ -48,6 +49,13 @@ const StyledOptions = styled('span')(({ theme }) => ({
     [theme.breakpoints.up('md')]: {
         maxWidth: '800px',
     },
+    border: 'none',
+    cursor: 'pointer',
+    backgroundColor: 'transparent',
+    '&:hover': {
+        backgroundColor: theme.palette.action.hover,
+    },
+    height: theme.spacing(3),
 }));
 
 const StyledIconButton = styled(IconButton)(({ theme }) => ({

frontend/src/component/filter/FilterItem/FilterItemChip/FilterItemOperator/FilterItemOperator.tsx

@@ -11,16 +11,17 @@ const StyledOperator = styled('button')(({ theme }) => ({
     borderRadius: 0,
     border: 'none',
     cursor: 'pointer',
-    color: theme.palette.text.disabled,
+    color: theme.palette.text.secondary,
     fontSize: theme.typography.body2.fontSize,
     padding: theme.spacing(0, 0.75),
-    margin: theme.spacing(0, 0.75),
+    margin: theme.spacing(0, 0, 0, 0.75),
-    height: theme.spacing(3.75),
+    height: theme.spacing(3),
     display: 'flex',
     alignItems: 'center',
     backgroundColor: 'transparent',
     '&:hover': {
         backgroundColor: theme.palette.action.hover,
+        color: theme.palette.text.primary,
     },
 }));
 

frontend/src/component/filter/Filters/Filters.tsx

@@ -7,7 +7,7 @@ import { FilterItem, FilterItemParams } from '../FilterItem/FilterItem';
 
 const StyledBox = styled(Box)(({ theme }) => ({
     display: 'flex',
-    padding: theme.spacing(2, 3),
+    padding: theme.spacing(1.5, 3),
     gap: theme.spacing(1),
     flexWrap: 'wrap',
 }));