Fix filter button height (#11237)

[#11218](https://github.com/twentyhq/twenty/issues/11218) Fixed Filter
Reset Button height

- Replaced the default button with LightButton to align with Figma
design specs which Restores expected button size and appearance.

- Ensured the correct height, padding, and styling are applied
automatically.

- Wrapped the button inside StyledChipcontainer for consistency.

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>
This commit is contained in:
vaibhav-devere
2025-03-28 13:58:05 +05:30
committed by GitHub
parent c294d967a3
commit 8127e4f635

View File

@ -29,6 +29,7 @@ import { isViewBarExpandedComponentState } from '@/views/states/isViewBarExpande
import { t } from '@lingui/core/macro';
import { isNonEmptyArray } from '@sniptt/guards';
import { isDefined } from 'twenty-shared/utils';
import { LightButton } from 'twenty-ui';
export type ViewBarDetailsProps = {
hasFilterButton?: boolean;
@ -63,18 +64,11 @@ const StyledChipcontainer = styled.div`
z-index: 1;
`;
const StyledCancelButton = styled.button`
background-color: inherit;
border: none;
color: ${({ theme }) => theme.font.color.tertiary};
cursor: pointer;
font-weight: ${({ theme }) => theme.font.weight.medium};
user-select: none;
margin-right: ${({ theme }) => theme.spacing(2)};
&:hover {
background-color: ${({ theme }) => theme.background.tertiary};
border-radius: ${({ theme }) => theme.spacing(1)};
}
const StyledActionButtonContainer = styled.div`
display: flex;
flex-direction: row;
gap: ${({ theme }) => theme.spacing(2)};
padding-top: ${({ theme }) => theme.spacing(1)};
`;
const StyledFilterContainer = styled.div`
@ -257,15 +251,17 @@ export const ViewBarDetails = ({
</StyledAddFilterContainer>
)}
</StyledFilterContainer>
{canResetView && (
<StyledCancelButton
data-testid="cancel-button"
onClick={handleCancelClick}
>
{t`Reset`}
</StyledCancelButton>
)}
{rightComponent}
<StyledActionButtonContainer>
{canResetView && (
<LightButton
data-testid="cancel-button"
accent="tertiary"
title={t`Reset`}
onClick={handleCancelClick}
/>
)}
{rightComponent}
</StyledActionButtonContainer>
</StyledBar>
);
};