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:
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user