From 5e7bdd1e04d03c09da97de46e4bb0b26c7f6549f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Thu, 23 Oct 2025 11:10:25 +0200
Subject: [PATCH] Create widget grip and update title color (#15280)

Changed grip size and stoped using IconButton
---
 .../widgets/components/WidgetGrip.tsx         | 42 +++++++++++++++++++
 .../widgets/components/WidgetHeader.tsx       | 25 +++--------
 2 files changed, 48 insertions(+), 19 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/page-layout/widgets/components/WidgetGrip.tsx

diff --git a/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetGrip.tsx b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetGrip.tsx
new file mode 100644
index 00000000000..0d27401304f
--- /dev/null
+++ b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetGrip.tsx
@@ -0,0 +1,42 @@
+import styled from '@emotion/styled';
+import { IconGripVertical } from 'twenty-ui/display';
+
+const StyledGripContainer = styled.div`
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  user-select: none;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  box-sizing: border-box;
+
+  &:active {
+    cursor: grabbing;
+    background: ${({ theme }) => theme.background.tertiary};
+  }
+
+  &:hover {
+    background: ${({ theme }) => theme.background.tertiary};
+  }
+
+  svg {
+    width: ${({ theme }) => theme.icon.size.sm};
+    height: ${({ theme }) => theme.icon.size.sm};
+    color: ${({ theme }) => theme.font.color.extraLight};
+  }
+`;
+
+type WidgetGripProps = {
+  className?: string;
+  onClick?: (e: React.MouseEvent) => void;
+};
+
+export const WidgetGrip = ({ className, onClick }: WidgetGripProps) => {
+  return (
+    <StyledGripContainer className={className} onClick={onClick}>
+      <IconGripVertical />
+    </StyledGripContainer>
+  );
+};
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetHeader.tsx b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetHeader.tsx
index 0b7f1739b9c..0d24e0fa10b 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetHeader.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetHeader.tsx
@@ -1,7 +1,9 @@
 import styled from '@emotion/styled';
-import { IconGripVertical, IconX } from 'twenty-ui/display';
+import { IconX } from 'twenty-ui/display';
 import { IconButton } from 'twenty-ui/input';
 
+import { WidgetGrip } from './WidgetGrip';
+
 const StyledHeader = styled.div`
   align-items: center;
   display: flex;
@@ -10,19 +12,8 @@ const StyledHeader = styled.div`
   flex-shrink: 0;
 `;
 
-const StyledDragHandleButton = styled(IconButton)`
-  cursor: grab;
-  display: flex;
-  align-items: center;
-  user-select: none;
-
-  &:active {
-    cursor: grabbing;
-  }
-`;
-
 const StyledTitle = styled.span`
-  color: ${({ theme }) => theme.font.color.secondary};
+  color: ${({ theme }) => theme.font.color.primary};
   flex: 1;
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.medium};
@@ -44,13 +35,9 @@ export const WidgetHeader = ({
 }: WidgetHeaderProps) => {
   return (
     <StyledHeader>
-      {isInEditMode && (
-        <StyledDragHandleButton
-          Icon={IconGripVertical}
+      {!isEmpty && isInEditMode && (
+        <WidgetGrip
           className="drag-handle"
-          variant="tertiary"
-          size="small"
-          disabled={isEmpty}
           onClick={(e) => e.stopPropagation()}
         />
       )}