From 8127e4f6359d4c4d8508ef2499679e26597e08f9 Mon Sep 17 00:00:00 2001
From: vaibhav-devere <98757943+vaibhav-devere@users.noreply.github.com>
Date: Fri, 28 Mar 2025 13:58:05 +0530
Subject: [PATCH] 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>
---
 .../views/components/ViewBarDetails.tsx       | 38 +++++++++----------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx b/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx
index 317be0082..d56c226ab 100644
--- a/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx
+++ b/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx
@@ -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>
   );
 };