Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

feat: adjust filter chips styling (#5638)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2023-12-14 10:40:12 +01:00 committed by GitHub
parent e6442d9304
commit 176e22ed40
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/component/filter/AddFilterButton.tsx
View File

@ -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 {

14
frontend/src/component/filter/FilterItem/FilterItemChip/FilterItemChip.tsx
View File

@ -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 }) => ({

7
frontend/src/component/filter/FilterItem/FilterItemChip/FilterItemOperator/FilterItemOperator.tsx
View File

@ -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,
},
}));

2
frontend/src/component/filter/Filters/Filters.tsx
View File

@ -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',
}));