From 176e22ed40d171a3284863b5843c625db5de35f4 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Thu, 14 Dec 2023 10:40:12 +0100
Subject: [PATCH] feat: adjust filter chips styling (#5638)

---
 frontend/src/component/filter/AddFilterButton.tsx  |  4 ++--
 .../FilterItem/FilterItemChip/FilterItemChip.tsx   | 14 +++++++++++---
 .../FilterItemOperator/FilterItemOperator.tsx      |  7 ++++---
 frontend/src/component/filter/Filters/Filters.tsx  |  2 +-
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/frontend/src/component/filter/AddFilterButton.tsx b/frontend/src/component/filter/AddFilterButton.tsx
index 739d371929..f301339b04 100644
--- a/frontend/src/component/filter/AddFilterButton.tsx
+++ b/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(1.25),
+    padding: theme.spacing(0, 1.25, 0, 1.25),
+    height: theme.spacing(3.75),
 }));
 
 interface IAddFilterButtonProps {
diff --git a/frontend/src/component/filter/FilterItem/FilterItemChip/FilterItemChip.tsx b/frontend/src/component/filter/FilterItem/FilterItemChip/FilterItemChip.tsx
index b76a10e7f4..d77bf876f7 100644
--- a/frontend/src/component/filter/FilterItem/FilterItemChip/FilterItemChip.tsx
+++ b/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 }) => ({
diff --git a/frontend/src/component/filter/FilterItem/FilterItemChip/FilterItemOperator/FilterItemOperator.tsx b/frontend/src/component/filter/FilterItem/FilterItemChip/FilterItemOperator/FilterItemOperator.tsx
index ba68928486..4d15d2d6e2 100644
--- a/frontend/src/component/filter/FilterItem/FilterItemChip/FilterItemOperator/FilterItemOperator.tsx
+++ b/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),
-    height: theme.spacing(3.75),
+    margin: theme.spacing(0, 0, 0, 0.75),
+    height: theme.spacing(3),
     display: 'flex',
     alignItems: 'center',
     backgroundColor: 'transparent',
     '&:hover': {
         backgroundColor: theme.palette.action.hover,
+        color: theme.palette.text.primary,
     },
 }));
 
diff --git a/frontend/src/component/filter/Filters/Filters.tsx b/frontend/src/component/filter/Filters/Filters.tsx
index 8409d40ec6..7a7e7fa3b2 100644
--- a/frontend/src/component/filter/Filters/Filters.tsx
+++ b/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',
 }));