From d73b1d1a8a869e2caa613ce1ef7f575716027007 Mon Sep 17 00:00:00 2001
From: Anchit Sinha <anchit1909@gmail.com>
Date: Mon, 11 Mar 2024 21:48:41 +0530
Subject: [PATCH] 4366-feat(front): Clickable Ascending/Descending menu (#4389)

* feat: clickable menu

* Remove unused hover

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>
---
 .../ui/layout/dropdown/components/DropdownMenuHeader.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx
index fc959c1a93..68446f9a94 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx
@@ -7,6 +7,7 @@ import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 const StyledHeader = styled.li`
   align-items: center;
   color: ${({ theme }) => theme.font.color.primary};
+  cursor: pointer;
   display: flex;
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.medium};
@@ -14,6 +15,10 @@ const StyledHeader = styled.li`
   padding: ${({ theme }) => theme.spacing(1)};
 
   user-select: none;
+
+  &:hover {
+    background: ${({ theme }) => theme.background.transparent.light};
+  }
 `;
 
 const StyledChildrenWrapper = styled.span`
@@ -41,12 +46,11 @@ export const DropdownMenuHeader = ({
   testId,
 }: DropdownMenuHeaderProps) => {
   return (
-    <StyledHeader data-testid={testId}>
+    <StyledHeader data-testid={testId} onClick={onClick}>
       {StartIcon && (
         <LightIconButton
           testId="dropdown-menu-header-end-icon"
           Icon={StartIcon}
-          onClick={onClick}
           accent="tertiary"
           size="small"
         />
@@ -56,7 +60,6 @@ export const DropdownMenuHeader = ({
         <StyledLightIconButton
           testId="dropdown-menu-header-end-icon"
           Icon={EndIcon}
-          onClick={onClick}
           accent="tertiary"
           size="small"
         />